JSFiddle - React, Tailwind, and code Playground

HTML

<!--from: http://codepen.io/mmmeff/pen/NqqvrR-->

<canvas id="can"></canvas>
<h1 id="title"></h1>

CSS

html,body {
  background: #FFFFFF;
  height: 100%;
  overflow: hidden;
  position: relative;
}
#can {
  height: 100%;
  min-height: 2000px;
  position: absolute;
  width: 100%;
}
#title {
  color: #FFFFFF;
  font-family: 'Nunito', sans-serif;
  font-size: 10rem;
  font-weight: 100;
  height: 180px;
  line-height: 180px;
  margin: auto;
  pointer-events: none;
  position: absolute;
  text-align: center;
  text-shadow: none;
  -webkit-transition: text-shadow 10s 3s;
          transition: text-shadow 10s 3s;
  top: 0;
  bottom: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: 100%;
  z-index: 2;
}
#title.anim {
  text-shadow: 0 2px 3px rgba(0,0,0,0.3);
}

JavaScript

//#151B54
//#FFFFFF
var c = document.getElementById('can');
var t = document.getElementById('title');

setTimeout(function () {
	t.classList.add('anim');
}, 500);

    var w = c.width = window.innerWidth,
    h = c.height = Math.max(2000, window.innerHeight),
    ctx = c.getContext('2d'),

    spawnProb = 1,
    linesPerIteration = 5,
    numberOfMoves = [8, 24], //[min, max]
    distance = [50, 200],
    attenuator = 900,
    timeBetweenMoves = [3, 10],
    size = [.2, 3],

    lines = [],
    frame = (Math.random()*360)|0;

function rand(ar){
  return Math.random() * (ar[1] - ar[0]) + ar[0];
}



/* orig line function
function Line(){
  this.x = Math.random() * w;
  this.y = Math.random() * h;
  this.vx = this.vy = 0;
  this.last = {};
  this.target = {};
  this.totalMoves = rand(numberOfMoves);
  this.move = 0;
  this.timeBetweenMoves = rand(timeBetweenMoves);
  this.timeSpentThisMove = this.timeBetweenMoves;
  this.distance = rand(distance);
  if(Math.random() >= 0.80){
    this.size = rand(size)*10;
    this.color = 'hsl(hue, 80%, 100%)'.replace('hue', frame%360);
  }
  else{
    this.size = rand(size)*2.5;
    this.color = 'hsl(hue, 60%, 60%)'.replace('hue', frame%360);
  }
}
*/


function Line(){

  this.vx = this.vy = 0;
  this.last = {};
  this.target = {};
  this.totalMoves = rand(numberOfMoves);
  this.move = 0;
  this.timeBetweenMoves = rand(timeBetweenMoves);
  this.timeSpentThisMove = this.timeBetweenMoves;
  this.distance = rand(distance);

  //


  //
  randvar1 = Math.random();
  if(randvar1 >= 0.10 && randvar1 < 0.20){
    this.x = 0.25 * w;
    this.y = 0.15 * h;
  }
  else if(randvar1 >= 0.10){
    this.x = 0.1 * w;
    this.y = 0.1 * h;
  }
  else{
    this.x = 0.2 * w;
    this.y = 0.2 * h;
  }


  //
  if(randvar1 >= 0.10 && randvar1 < 0.20){
    this.size = rand(size)*10;
    this.color = 'hsl(hue, 80%, 100%)'.replace('hue', frame%360);
  }
  else if(randvar1 >= 0.10){
    this.size = rand(size)*2.5;
    this.color = 'hsl(hue, 60%,...