estrellas landing @nitoku_es.diseño

%###### HTML ######%
<div class="stars-frame">
    <div class="message">
        <div class="message-details">
            <p>Welcome to Nitoku! A unique community that helps you manage and share content with co-workers, 
            researchers, classmates and friends. </p>
            <p>
            This team, @nitoku.public, is our official team to distribute information about the platform.</p>
            <p><a href='https://www.nitoku.com/@nitoku.public/Documentation' class="buttom">Start now</a></p>
        </div>    
    </div>
    <div class="background">
        <div class="landscape"></div>
        <canvas id="canvas"></canvas>
    </div>
</div>
%###### CSS #######%
.stars-frame{
    position: relative;    
}

.stars-frame p{
    margin:0px;
    padding:8px;
}
.background{
    z-index: 0;
    width: 100%;
    height: 500px;
    background: #ffffff;
    background: linear-gradient(to bottom, #ffffff 0%, #619c85 100%); 
    overflow: hidden;
    position: relative;
}

@keyframes colorChange {
    0%,
    100% {
    opacity: 0;
    }
    50% {
    opacity: .9;
    }
}

.landscape {
    position :absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 500px;
    /*background-image: url(https://openclipart.org/image/2400px/svg_to_png/250847/Trees-Landscape-Silhouette.png);*/
    background-image:url(https://storage.googleapis.com/nitoku-static/site-img/Trees-Landscape-SilhouetteCBG.png);
    background-size: 1000px 250px;
    background-repeat: repeat-x;
    background-position: center bottom;
}

/** message **/
.message {
    position : absolute;
    width: 95%;
    z-index: 1;    
}

.message-details {
    max-width : 600px;
    color: #676a6c;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    font-size: 18px;
    font-weight: 600;
}

.buttom{

-webkit-transform: translateY(-1px);
    transform: translateY(-1px);
    -webkit-box-shadow: 0 13px 27px -5px rgba(50,50,93,.25),0 8px 16px -8px rgba(0,0,0,.3),0 -6px 16px -6px rgba(0,0,0,.025);
    box-shadow: 0 13px 27px -5px rgba(50,50,93,.25),0 8px 16px -8px rgba(0,0,0,.3),0 -6px 16px -6px rgba(0,0,0,.025);
    white-space: nowrap;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    padding: 0 14px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .025em;
    text-decoration: none;
    -webkit-transition: all .15s ease;
    transition: all .15s ease;
    margin-right: 23px;
    margin-top: 30px;
    color: #fff;
    background: #3ecf8e;
    text-shadow: 0 1px 3px rgba(36,180,126,.4);

}
%### JAVASCRIPT ###%
function Star(id, x, y){
	this.id = id;
	this.x = x;
	this.y = y;
	this.r = Math.floor(Math.random()*2)+1;
	var alpha = (Math.floor(Math.random()*10)+1)/10/2;
	this.color = "rgba(255,255,255,"+alpha+")";
}

Star.prototype.draw = function() {
	ctx.fillStyle = this.color;
	ctx.shadowBlur = this.r * 2;
	ctx.beginPath();
	ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
	ctx.closePath();
	ctx.fill();
}

Star.prototype.move = function() {
	this.y -= .15 + params.backgroundSpeed/100;
	if (this.y <= -10) this.y = HEIGHT + 10;
	this.draw();
}

function Dot(id, x, y, r) {
	this.id = id;
	this.x = x;
	this.y = y;
	this.r = Math.floor(Math.random()*5)+1;
	this.maxLinks = 2;
	this.speed = .5;
	this.a = .5;
	this.aReduction = .005;
	this.color = "rgba(255,255,255,"+this.a+")";
	this.linkColor = "rgba(255,255,255,"+this.a/4+")";

this.dir = Math.floor(Math.random()*140)+200;
}

Dot.prototype.draw = function() {
	ctx.fillStyle = this.color;
	ctx.shadowBlur = this.r * 2;
	ctx.beginPath();
	ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
	ctx.closePath();
	ctx.fill();
}

Dot.prototype.link = function() {
	if (this.id == 0) return;
	var previousDot1 = getPreviousDot(this.id, 1);
	var previousDot2 = getPreviousDot(this.id, 2);
	var previousDot3 = getPreviousDot(this.id, 3);
	if (!previousDot1) return;
	ctx.strokeStyle = this.linkColor;
	ctx.moveTo(previousDot1.x, previousDot1.y);
	ctx.beginPath();
	ctx.lineTo(this.x, this.y);
	if (previousDot2 != false) ctx.lineTo(previousDot2.x, previousDot2.y);
	if (previousDot3 != false) ctx.lineTo(previousDot3.x, previousDot3.y);
	ctx.stroke();
	ctx.closePath();
}

function getPreviousDot(id, stepback) {
	if (id == 0 || id - stepback < 0) return false;
	if (typeof dots[id - stepback] != "undefined") return dots[id - stepback];
	else return false;//getPreviousDot(id - stepback);
}

Dot.prototype.move = function() {
	this.a -= this.aReduction;
	if (this.a <= 0) {
		this.die();
		return
	}
	this.color = "rgba(255,255,255,"+this.a+")";
	this.linkColor = "rgba(255,255,255,"+this.a/4+")";
	this.x = this.x + Math.cos(degToRad(this.dir))*(this.speed+params.dotsSpeed/100),
	this.y = this.y + Math.sin(degToRad(this.dir))*(this.speed+params.dotsSpeed/100);

this.draw();
	this.link();
}

Dot.prototype.die = function() {
    dots[this.id] = null;
    delete dots[this.id];
}

var canvas  = document.getElementById('canvas'),
	ctx = canvas.getContext('2d'),
	WIDTH,
	HEIGHT,
	mouseMoving = false,
	mouseMoveChecker,
	mouseX,
	mouseY,
	stars = [],
	initStarsPopulation = 80,
	dots = [],
	dotsMinDist = 2,
	params = {
		maxDistFromCursor: 50,
		dotsSpeed: 0,
		backgroundSpeed: 0
	};

function setCanvasSize() {
	WIDTH = document.documentElement.clientWidth,
    HEIGHT = document.documentElement.clientHeight;

canvas.setAttribute("width", WIDTH);
	canvas.setAttribute("height", HEIGHT);
}

function init() {
	ctx.strokeStyle = "white";
	ctx.shadowColor = "white";
	for (var i = 0; i < initStarsPopulation; i++) {
		stars[i] = new Star(i, Math.floor(Math.random()*WIDTH), Math.floor(Math.random()*HEIGHT));
		//stars[i].draw();
	}
	ctx.shadowBlur = 0;
	animate();
}

function animate() {
    ctx.clearRect(0, 0, WIDTH, HEIGHT);

for (var i in stars) {
    	stars[i].move();
    }
    for (var i in dots) {
    	dots[i].move();
    }
    drawIfMouseMoving();
    requestAnimationFrame(animate);
}

window.onmousemove = function(e){
	mouseMoving = true;
	mouseX = e.clientX;
	mouseY = e.clientY;
	clearInterval(mouseMoveChecker);
	mouseMoveChecker = setTimeout(function() {
		mouseMoving = false;
	}, 100);
}

function drawIfMouseMoving(){
	if (!mouseMoving) return;

if (dots.length == 0) {
		dots[0] = new Dot(0, mouseX, mouseY);
		dots[0].draw();
		return;
	}

var previousDot = getPreviousDot(dots.length, 1);
	var prevX = previousDot.x; 
	var prevY = previousDot.y;

var diffX = Math.abs(prevX - mouseX);
	var diffY = Math.abs(prevY - mouseY);

if (diffX < dotsMinDist || diffY < dotsMinDist) return;

var xVariation = Math.random() > .5 ? -1 : 1;
	xVariation = xVariation*Math.floor(Math.random()*params.maxDistFromCursor)+1;
	var yVariation = Math.random() > .5 ? -1 : 1;
	yVariation = yVariation*Math.floor(Math.random()*params.maxDistFromCursor)+1;
	dots[dots.length] = new Dot(dots.length, mouseX+xVariation, mouseY+yVariation);
	dots[dots.length-1].draw();
	dots[dots.length-1].link();
}
//setInterval(drawIfMouseMoving, 17);

function degToRad(deg) {
	return deg * (Math.PI / 180);
}

parent.postMessage("{'service':'@nitoku.public/blockApi','request':'set-full-width'}",
								"*");

parent.postMessage("{'service':'@nitoku.public/blockApi','request':{'set-height':'400'}}",
							"*");

setTimeout(function(){ 
	setCanvasSize();
	init();
}, 100);

%#### SETTINGS ####%
{"readOnly":false}