prototype nyan cat

_src/_assets/javascripts/bigchain/nyan.js

@@ -0,0 +1,97 @@
+// https://codepen.io/brunorcunha/pen/wikEI
+// highly modified
+
+// var posX = 100,
+//     posY = 100,
+//     px = 0,
+//     py = 0,
+//     an = false;
+var nyan = $('.nyan');
+var nyanToAppend = $('.nyan-container')
+//var rainbow = null;
+var altura = 800;
+var largura = parseInt(nyanToAppend.width());
+var tamanhoTela = parseInt(largura / 9);
+var pilha = [];
+
+function getRandomInt(min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function criarEstrela() {
+    var rand = getRandomInt(3, 14);
+    var tempoDeVida = getRandomInt(5, 10);
+    var star = $('<div class="star"/>').css({
+        width: rand + 'px',
+        height: rand + 'px',
+        left: largura - 10 + 'px',
+        top: Math.floor((Math.random() * altura) + 1),
+        '-webkit-transition': 'all ' + tempoDeVida + 's linear',
+        '-webkit-transform': 'translate(0px, 0px)'
+    });
+    nyanToAppend.append(star);
+
+    window.setTimeout(function() {
+        star.css({
+            '-webkit-transform': 'translate(-' + largura + 'px, 0px)'
+        });
+    }, getRandomInt(5, 10) * 10);
+
+    window.setTimeout(function() {
+        star.remove();
+    }, tempoDeVida * 1000);
+}
+
+// function moveNyan() {
+//     var tamX = nyan.width() / 2,
+//         tamY = nyan.height() / 2;
+//     px += (posX - px - tamX) / 50;
+//     py += (posY - py - tamY) / 50;
+//
+//     nyan.css({
+//         left: px + 'px',
+//         top: py + 'px'
+//     });
+// }
+// function peidaArcoIris() {
+//     var qnt = Math.floor(nyan.position().left / 9) + 2;
+//
+//     if (pilha.length >= qnt)
+//         pilha.pop();
+//
+//     pilha.unshift(py);
+//
+//     rainbow.hide();
+//     for (var i = 0; i < qnt; i++) {
+//         var am = (i % 2);
+//         if (an)
+//             am = (i % 2)
+//                 ? 0
+//                 : 1;
+//
+//         rainbow.eq(qnt - i).css({
+//             top: pilha[i] + am
+//         }).show();
+//     }
+// }
+
+// window.setInterval(function() {
+//     moveNyan();
+//     peidaArcoIris();
+// }, 10);
+
+window.setInterval(function() {
+    criarEstrela();
+}, 300);
+
+// window.setInterval(function() {
+//     an = !an;
+// }, 500);
+
+// var frame = 0;
+// window.setInterval(function() {
+//     nyan.css({
+//         'background-position': 34 *frame + 'px'
+//     });
+//     frame++;
+// }, 100);

_src/_assets/javascripts/page-getstarted.js

@@ -104,6 +104,8 @@ window.addEventListener('DOMContentLoaded', function domload(event) {
             postButton.classList.add('disabled')
             postButton.style.opacity = 0
 
+            //=include bigchain/nyan.js
+
         }, reason => { // Error!
             console.log(reason)
 

_src/_assets/styles/bigchain.scss

@@ -35,6 +35,7 @@
 @import 'bigchain/team';
 @import 'bigchain/timeline';
 @import 'bigchain/terminal';
+@import 'bigchain/nyan';
 @import 'bigchain/utilities';
 
 // Content types

_src/_assets/styles/bigchain/_nyan.scss

@@ -0,0 +1,50 @@
+// https://codepen.io/brunorcunha/pen/wikEI
+// highly modified
+
+.nyan-container {
+    position: relative;
+    overflow: hidden;
+}
+
+.nyan {
+    z-index: 10;
+    position: absolute;
+    width: 34px;
+    height: 33px;
+    left: 50%;
+
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMwAAAAgCAYAAABepJcLAAACiUlEQVR4nO2Yi23DMAxEvVMW6Ghdwzt1p7Qp4sKhKIkUqVyUXtEHBIlsPZ9J+bN9fG4bIcQGXICQlYALELIScAFCVgIuQMhKwAUIWQnboG27RkmRpQc9wB4mievXHiYaCj3o8QoePomffzcJodCDHq/iYRepTXTZ9c+KTEog9KAH0MMm0pvI2MHhQOhBjwSP7f680vM4xo03TIdC5CzeEcn0KFwqHl4XeqxfH7ex+77/0spDjktvGFVE6dyaSPaJqbqIE+Nxocf69XHefysPOeahYQ7RA7PIqTOjIqFAxCW46aKcmLQCocf0+pA1GvU45jmj/V40jNw42rlekVAgk1wyV/aVPeTYjJV9JAtZp1kePdSG0ZpGFak8UEVF3IE0HuwyXMyF+uYecltZ5Mj68HqMOBR5yFVECnU791JeSoe71xOI4pEVSq1I0R6IPGRdIOtDa+BjzIjH7a/mJn8rGqbWNH8ijhVsRMQciOGVYaZLtXEBHsg8ZA6o+sisU20xOB9bt2G0YCz3hhki5kCe4KJtg/AIraiTzo37SjfJIeJxvaM1bNHAd6oNY74FUd48RESGA6m8EQqFUjnBSA/zQjbBY+jlwxPqI8NDZiw/mxvmQaRzucsQyfDIdJEFivCQY5B5vFt91BaiM2r2ZpHOJS8qkuUx0wXhcfyO9mjegQDrw+uhubQosjffDhmIiLhDAbjQQ7/6orI49jeah4VizpaIZTUYxdMsMz1GXJAe6DzO8yOzmOXRa1bzSdG+t2xr3c5aIJ79vaML2gE9P9qjusMz2ve9g6lt6ynQ1pwZLl6fV3BBO6Dnz9hP5BhcxUvIfwcuQMhKwAUIWQm4ACErARcgZCXgAoSsxDdoVHw2ca8RoAAAAABJRU5ErkJggg==");
+
+    // rainbow
+    &:before {
+        content: '';
+        position: absolute;
+        right: 0;
+        top: 50%;
+        margin-top: -9px;
+        margin-right: 34px;
+        width: 750%;
+        height: 18px;
+        background: linear-gradient(to bottom, red 16%, orange 16%, orange 32%, yellow 32%, yellow 48%, green 48%, green 64%, blue 64%, blue 80%, violet 80%);
+        opacity: .4;
+        z-index: -1;
+    }
+
+    animation: nyan .6s steps(6, end) infinite;
+}
+
+@keyframes nyan {
+    to {
+        background-position: -204px center;
+    }
+}
+
+.star {
+    width: 7px;
+    height: 7px;
+    position: absolute;
+    z-index: 1;
+    background-size: 100% 100%;
+
+    background-image: url("data:image/gif;base64,R0lGODlhBwAHAIABAP///////yH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjU0NTY1ODg4RDlBODExRTI5MzZGQjVEN0ZDMUFENjhCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjU0NTY1ODg5RDlBODExRTI5MzZGQjVEN0ZDMUFENjhCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTQ1NjU4ODZEOUE4MTFFMjkzNkZCNUQ3RkMxQUQ2OEIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTQ1NjU4ODdEOUE4MTFFMjkzNkZCNUQ3RkMxQUQ2OEIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQJFAABACwAAAAABwAHAAACB4yPqQfrXwAAIfkEBRQAAQAsAAAAAAcABwAAAgmMj2mQzPiUNAUAIfkECRQAAQAsAQABAAUABQAAAgdMYGm4mlwAACH5BAkUAAEALAAAAAAHAAcAAAILjGEZqA0IWUuSpgIAIfkECRQAAQAsAAAAAAcABwAAAgqMYZeYzdscnKEAACH5BAUUAAEALAAAAAAHAAcAAAIJjGGpm6jO4kkFADs=");
+}

_src/getstarted.html

@@ -52,7 +52,8 @@ redirect_from:
                 </div>
 
                 <div class="response highlight hide">
-                    <pre>
+                    <pre class="nyan-container">
+<div class="nyan"></div>
 <code class="output language-json">{
   "asset": {
     "data": {