JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<script src="https://code.createjs.com/easeljs-0.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<div class="wrapper">
     <canvas id="projector">bla bla bla</canvas>
     <header></header>
</div>

CSS

body, html {
	padding:0;
	background:#c0d4e6;
	font-family:arial, cursive;
	color:#373737;
}

.wrapper {
	position:relative;
	top:0;
	left:0;
	right:0;
	height:45rem;
	overflow:hidden;
	border-top:#7ab5ff 4px solid;
}

#projector {
  position: absolute; 
  top: 0px;
  left: 0px;
  width:100%;
  height:100%;
} 


header {
	position:absolute;
	top:-6rem;
	left:-4rem;
	right:-4rem;
	height:31rem;
	padding:8rem;
	transform:rotate(-3deg);
	background:#161f27;
	background-size:100% 100%;
	-webkit-animation:colorChange 50s linear infinite;
	-moz-animation:colorChange 50s linear infinite;
	animation:colorChange 50s linear infinite;
}

@-webkit-keyframes colorChange {
    0%{background:#161f27;}
    25%{background:#313e85;}
    50%{background:#3973a7;}
    75%{background:##25748e;}
    100%{background:#161f27;}
}
@-moz-keyframes colorChange {
    0%{background:#161f27;}
    25%{background:#313e85;}
    50%{background:#3973a7;}
    75%{background:##25748e;}
    100%{background:#161f27;}
}
@keyframes colorChange {
    0%{background:#161f27;}
    25%{background:#313e85;}
    50%{background:#3973a7;}
    75%{background:##25748e;}
    100%{background:#161f27;}
}

JavaScript 1.7

var ParticleEngine = (function() {
	'use strict';

	function ParticleEngine(canvas_id) {
		// enforces new
		if (!(this instanceof ParticleEngine)) {
			return new ParticleEngine(args);
		}
		
		var _ParticleEngine = this;

		this.canvas_id = canvas_id;
		this.stage = new createjs.Stage(canvas_id);
		this.totalWidth = this.canvasWidth = document.getElementById(canvas_id).width = document.getElementById(canvas_id).offsetWidth;
		this.totalHeight = this.canvasHeight = document.getElementById(canvas_id).height = document.getElementById(canvas_id).offsetHeight;
		this.compositeStyle = "lighter";

		this.particleSettings = [{id:"small", num:300, fromX:0, toX:this.totalWidth, ballwidth:3, alphamax:0.4, areaHeight:.5, color:"#0cdbf3", fill:false}, 
								{id:"medium", num:100, fromX:0, toX:this.totalWidth,  ballwidth:8, alphamax:0.3, areaHeight:1, color:"#6fd2f3", fill:true}, 
								{id:"large", num:10, fromX:0, toX:this.totalWidth, ballwidth:30,  alphamax:0.2, areaHeight:1, color:"#93e9f3", fill:true}];
		this.particleArray = [];
		this.lights = [{ellipseWidth:400, ellipseHeight:100, alpha:0.6, offsetX:0, offsetY:0, color:"#6ac6e8"}, 
						{ellipseWidth:350, ellipseHeight:250, alpha:0.3, offsetX:-50, offsetY:0, color:"#54d5e8"}, 
						{ellipseWidth:100, ellipseHeight:80, alpha:0.2, offsetX:80, offsetY:-50, color:"#2ae8d8"}];

		this.stage.compositeOperation = _ParticleEngine.compositeStyle;


		function drawBgLight()
		{
			var light;
			var bounds;
			var blurFilter;
			for (var i = 0, len = _ParticleEngine.lights.length; i < len; i++) {				
				light = new createjs.Shape();
				light.graphics.beginFill(_ParticleEngine.lights[i].color).drawEllipse(0, 0, _ParticleEngine.lights[i].ellipseWidth, _ParticleEngine.lights[i].ellipseHeight);
				light.regX = _ParticleEngine.lights[i].ellipseWidth/2;
				light.regY = _ParticleEngine.lights[i].ellipseHeight/2; 
				light.y = light.initY = _ParticleEngine.totalHeight/2 + _ParticleEngine.lights[i].offsetY;
				light.x =...