JSFiddle - React, Tailwind, and code Playground

HTML

<header id="pageheader">
			<canvas id="bannerCanvas"></canvas>
</header>

CSS

#pageheader{
	height: 100px;
  width:100%;
	background: #f4f5ef; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#222, #f4f5ef); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#222, #f4f5ef); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#222, #f4f5ef); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#222, #f4f5ef);
}

JavaScript

$(function(){
	var word0 = '<RUBY>';
	var word1 = '<HTML>';
	var word2 = '<PHP>';
	var word3 = '<SQL>';
	var word4 = '<CSS>';
	var word5 = '<C#>';
	var word6 = '<JAVASCRIPT>';
	var word7 = '<JAVA>';
	var word8 = '<XML>';
	var word9 = '<PYTHON>';
	
	var fps = 30;
	
	var delta = 1; // range (from 0) of possible dx or dy change
	var max = 2; // maximum dx or dy values
	
	var jCanvas = $('#bannerCanvas');
	var canvas = document.getElementById('bannerCanvas');
	canvas.width = jCanvas.parent().width();
	canvas.height = jCanvas.parent().height();
	
	var start_x = function(){ return Math.random() * canvas.width; };
	var start_y = function(){ return Math.random() * canvas.height; };
	
	jCanvas.bind("click", function(){
		if(interval === undefined){
			interval = window.setInterval(animate, 1000 / fps);
		}
		else{
			interval = clearInterval(interval);
			console.log(interval);
		}
	});
	
	var cxt = canvas.getContext('2d');
	cxt.fillStyle = '#FF0000';
	
	var interval = window.setInterval(animate, 1000 / fps);
	
	var w0x = start_x();
	var w0y = start_y();
	var w1x = start_x();
	var w1y = start_y();
	var w2x = start_x();
	var w2y = start_y();
	var w3x = start_x();
	var w3y = start_y();
	var w4x = start_x();
	var w4y = start_y();
	var w5x = start_x();
	var w5y = start_y();
	var w6x = start_x();
	var w6y = start_y();
	var w7x = start_x();
	var w7y = start_y();
	var w8x = start_x();
	var w8y = start_y();
	var w9x = start_x();
	var w9y = start_y();
	
	var w0dx = 0;
	var w0dy = 0;
	var w1dx = 0;
	var w1dy = 0;
	var w2dx = 0;
	var w2dy = 0;
	var w3dx = 0;
	var w3dy = 0;
	var w4dx = 0;
	var w4dy = 0;
	var w5dx = 0;
	var w5dy = 0;
	var w6dx = 0;
	var w6dy = 0;
	var w7dx = 0;
	var w7dy = 0;
	var w8dx = 0;
	var w8dy = 0;
	var w9dx = 0;
	var w9dy = 0;
	
	function getWx(dx){
		var wx = (Math.random() * delta - delta / 2);
		if(Math.abs(wx + dx) > max){ wx *= -1; }
		return wx;
	}
	function getWy(dy){
		var wy = (Math.random() * delta - delta / 2);
		if(Math.abs(wy + dy) > max){ wy *=...