JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<canvas id="stage"></canvas>

SCSS

body{
  overflow: hidden;
}

Babel + JSX

/**
 * Canvas 2D - Gooey Panels
 */


console.clear();

let stage = document.getElementById('stage');
let c = stage.getContext('2d');

let resizeStage = () => {

	stage.width = window.innerWidth;
	stage.height = window.innerHeight;
  from_x = target_x = current_x = Math.ceil(stage.width / 2);
  from_y = target_y = current_y = Math.ceil(stage.height / 2);
  
};

let fillBg = () => {

  c.fillStyle = '#9DB4AB';
  c.fillRect(0, 0, stage.width, stage.height);
  
};

let m = {x: 0, y: 0, lx: 0, ly: 0};
let trackMouse = (e) => {

  m.x = e.offsetX;
  m.y = e.offsetY;

};
stage.addEventListener('mousemove', trackMouse);

let current_x = null,
		current_y = null,
		target_x = null,
    target_y = null,
    from_x = null,
    from_y = null,
    duration = 1000,
    ease_start = 0,
    ease_elapsed = 0;
    
let render = () => {

	fillBg();
  
  let delta_x = 0;
  let delta_y = 0;
  
  let x_coord = Math.ceil(stage.width / 2);
  let y_coord = Math.ceil(stage.height / 2);
	current_x = current_x || x_coord;
	current_y = current_y || y_coord;
  target_x = target_x || x_coord;
  target_y = target_y || y_coord;
	from_x = from_x || x_coord;
	from_y = from_y || y_coord;
    
  let x_difference = current_x - x_coord;
  let real_x = x_coord + (x_difference / 2);
  
  ease_elapsed = Math.min(Date.now() - ease_start, duration);
  
  if(
  	(
    	(m.lx > x_coord && m.x < x_coord) ||
    	(m.lx < x_coord && m.x > x_coord)
    )
    //&& ease_elapsed > duration * 0.5
  ){
  
    delta_x = m.x - m.lx;
    delta_y = m.y - m.ly;
    current_x = x_coord - (delta_x * 3);
    current_y = stage.height - m.y;//y_coord - (delta_y * 2);
    target_x = x_coord;// + (delta_x);
    target_y = y_coord;
    from_x = current_x;
    from_y = current_y;
    ease_start = Date.now();
    
 	}
  
  current_x = bounceEasing(ease_elapsed, from_x, target_x - from_x, duration);
  current_y = bounceEasing(ease_elapsed, from_y, target_y - from_y, duration);
  
  //console.log(ease_elapsed, from_x, target_x,...