JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<canvas id="box_canvas1"></canvas>

CSS

body {
  background: #409FD2;
}

JavaScript

$(function(){
   let fn = {
	  ss: function() {

	    let fc1 = fn.random(0, 255);
	    let fc2 = fn.random(0, 255);
	    let fc3 = fn.random(0, 255);

	    let fs = fn.random(30, 150);

	    $('[data-block]').css({
	      "color": 'rgb(' + fc1 + ', ' + fc2 + ', ' + fc3 + ')',
	      "font-size": fs + 'px'
	    });

	    let height = fn.random(0, $(window).height() - $('[data-block]').height());
	    let width = fn.random(0, $(window).width() - $('[data-block]').width());
	    let speed = fn.random(2000, 3500);

	    $('[data-block]').animate({
	      "top": height,
	      "left": width
	    }, speed);

	    let b1 = fn.random(0, 255);
	    let b2 = fn.random(0, 255);
	    let b3 = fn.random(0, 255);

	    $('body').css({
	      "background": 'rgb(' + b1 + ', ' + b2 + ', ' + b3 + ')'
	    });

	    setTimeout(function() {
	      fn.ss();
	    }, speed)

	  },
	  random: function(min, max) {
	    return Math.random() * (max - min);
	  }
	}
	$(document).ready(function() {
	  fn.ss();
	});

	let fn2 = {};
	fn2.d = $(document);
	fn2.w = $(window);
	fn2.w.on('mouseenter', function() {
	  $('[data-client="cursor"]').addClass('active');
	}).on('mouseout', function() {
	  $('[data-client="cursor"]').removeClass('active');
	});
	fn2.d.on('mousemove', function(event) {
	  console.log(event);
	  fn2.dH = fn2.d.outerHeight();
	  fn2.dW = fn2.d.outerWidth();

	  fn2.cH = event.clientY;
	  fn2.cW = event.clientX;

	  fn2.dH2 = fn2.cH / (fn2.dH / 100);
	  fn2.dW2 = fn2.cW / (fn2.dW / 100);

	  $('[data-client="cursor"]').css({
	    right: fn2.dH2 + '%',
	    bottom: fn2.dW2 + '%'
	  });

	});

  });
 
	var self = window.self;

	(function(self) {


	  var points = [],
	    numPoints = 1000,
	    i, canvas, context, width, height, bounce = -1.9,
	    particleSize = [];

	  canvas = document.getElementById("box_canvas1");
	  width = self.innerWidth;
	  height = self.innerHeight;
	  context = canvas.getContext("2d");

	  context.canvas.width = width;
	  context.canvas.height =...