diff --git a/docs/css/_home.scss b/docs/css/_home.scss
index 99933c45..7d34213d 100644
--- a/docs/css/_home.scss
+++ b/docs/css/_home.scss
@@ -303,3 +303,21 @@ footer.site-footer .input-group-addon {
background-color: transparent;
}
+.doc-page {
+ position: absolute;
+ transition: opacity 1000ms;
+ opacity:1;
+ z-index: 1;
+}
+
+.doc-page.init {
+ opacity: 0;
+}
+
+.index-container {
+ position: relative;
+ text-align: center;
+ margin:auto;
+ transform:translateZ(0);
+ z-index: 100;
+}
diff --git a/docs/img/icon-page-doc.png b/docs/img/icon-page-doc.png
new file mode 100644
index 00000000..a34352f4
Binary files /dev/null and b/docs/img/icon-page-doc.png differ
diff --git a/docs/img/icon-page-doc.svg b/docs/img/icon-page-doc.svg
new file mode 100644
index 00000000..4140d94a
--- /dev/null
+++ b/docs/img/icon-page-doc.svg
@@ -0,0 +1,19 @@
+
+
\ No newline at end of file
diff --git a/docs/img/icon-page-doc@2x.png b/docs/img/icon-page-doc@2x.png
new file mode 100644
index 00000000..fc9712c1
Binary files /dev/null and b/docs/img/icon-page-doc@2x.png differ
diff --git a/docs/img/icon-page-doc@3x.png b/docs/img/icon-page-doc@3x.png
new file mode 100644
index 00000000..d5c2d78c
Binary files /dev/null and b/docs/img/icon-page-doc@3x.png differ
diff --git a/docs/img/illus-index.png b/docs/img/illus-index.png
new file mode 100644
index 00000000..9ccb8789
Binary files /dev/null and b/docs/img/illus-index.png differ
diff --git a/docs/img/illus-index.svg b/docs/img/illus-index.svg
new file mode 100644
index 00000000..8623020d
--- /dev/null
+++ b/docs/img/illus-index.svg
@@ -0,0 +1,33 @@
+
+
\ No newline at end of file
diff --git a/docs/img/illus-index@2x.png b/docs/img/illus-index@2x.png
new file mode 100644
index 00000000..ffbf894b
Binary files /dev/null and b/docs/img/illus-index@2x.png differ
diff --git a/docs/img/illus-index@3x.png b/docs/img/illus-index@3x.png
new file mode 100644
index 00000000..21c342ef
Binary files /dev/null and b/docs/img/illus-index@3x.png differ
diff --git a/docs/index.haml b/docs/index.haml
index 02e4689c..814225c9 100644
--- a/docs/index.haml
+++ b/docs/index.haml
@@ -14,6 +14,8 @@ layout: default
%span.big S
%p#top The easiest way to add search to your documentation.
.jumbotron-left-column
+ %div.index-container
+ %img.index{src: 'img/illus-index.png'}
%p We’ve created the fastest, easiest way to search within documentation.
%p And best of all? It’s free!
%form#join-form{action: '#', method: 'POST'}
@@ -112,6 +114,8 @@ layout: default
Help me improve my search
%i.fa.fa-heart
+
+
{% contentfor site-footer %}
{% endcontentfor %}
diff --git a/docs/js/animation.js b/docs/js/animation.js
new file mode 100644
index 00000000..88b829c7
--- /dev/null
+++ b/docs/js/animation.js
@@ -0,0 +1,85 @@
+document.addEventListener("DOMContentLoaded", function(){
+ var box = getIndexDomPosition();
+
+ console.log(box);
+ var center = [box[0] + 90, box[1] - 90];
+
+ var particles = [];
+ for(var i=0; i<10; i++) {
+ setTimeout(function(){
+ var p = genParticle(center);
+ particles.push(p);
+ }, i * 300);
+ }
+
+ window.requestAnimationFrame(function loop(){
+ window.requestAnimationFrame(loop);
+ particles.forEach(function(p){
+ updatePosition(p, center);
+ if(distance(p.pos, center) < distance(p.v, [0, 0])) {
+ recycle(p, center);
+ }
+ else{
+ updateDOMPosition(p);
+ }
+ });
+ });
+
+ function genParticle(center){
+ var theta = - Math.random() * Math.PI;
+ var r = Math.random() * 300 + 400;
+ var x = r * Math.cos(theta);
+ var y = r * Math.sin(theta);
+ var e = document.createElement('img');
+ e.src = 'img/icon-page-doc.svg';
+ e.className = 'doc-page init';
+ e.style.top = center[1] + 'px';
+ e.style.left = center[0] + 'px';
+ document.body.querySelector('.jumbotron').appendChild(e);
+ return {
+ pos: [x + center[0], y + center[1]],
+ v: [0, 0],
+ e: e
+ };
+ }
+
+ function recycle(p, center) {
+ var theta = - Math.random() * Math.PI;
+ var r = Math.random() * 500 + 200;
+ var x = r * Math.cos(theta);
+ var y = r * Math.sin(theta);
+ var e = p.e;
+
+ e.className = 'doc-page init';
+ e.style.top = center[1] + 'px';
+ e.style.left = center[0] + 'px';
+
+ p.pos = [x + center[0], y + center[1]];
+ p.v = [0, 0];
+ }
+
+ function updateDOMPosition(p) {
+ var pos = [p.pos[0] - 18, p.pos[1] - 23];
+ p.e.style.transform = 'translate3D(' + pos[0] + 'px, ' + pos[1] + 'px, 0)';
+ p.e.className = 'doc-page';
+ }
+
+ function updatePosition(p, center) {
+ var d = distance(p.pos, center);
+ p.v[0] += (center[0] - p.pos[0] ) / 500;
+ p.v[1] += (center[1] - p.pos[1] ) / 500;
+ p.pos[0] += p.v[0] / 5;
+ p.pos[1] += p.v[1] / 5;
+ }
+
+ function distance(a, b) {
+ return Math.sqrt(
+ Math.pow(b[0] - a[0], 2) +
+ Math.pow(b[1] - a[1], 2));
+ }
+
+ function getIndexDomPosition() {
+ var position = jQuery('.index-container').position();
+ return [position.left, position.top];
+ }
+});