JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js"></script>
<canvas></canvas>

SCSS

html {
  cursor: none;
  overflow: hidden;
  background: #2E235B;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
}

Babel + JSX

/**
 * Spring & LERP point-line animation
 */

const lerp = (from, to, scale) => ((1 - scale) * from) + (scale * to);

const random = (from, to) => from + ((to - from) * Math.random());

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

const updateSize = () => {
  canvas.width = ctx.width = window.innerWidth;
  canvas.height = ctx.height = window.innerHeight;
};
updateSize();
window.addEventListener('resize', updateSize);

const mouse = {
  x: window.innerWidth * 0.5,
  y: window.innerHeight * 0.5,
};

const pointline = (color, count = 100) => {
  const points = [];
  for (let i = 0; i < count; i++ ) {
    points.push({
      x: window.innerWidth * 0.5,
      y: window.innerHeight * 0.5,
      s: 0,
    });
  }

  // Physics & render variables
  const friction = random(0.65, 0.95);
  const spring = random(0.025, 0.1);
  const lerpScale = random(0.8, 0.9);
  const pointSizeScale = random(0.4, 0.8);
  // const shadowScale = random(0.001, 0.01);
  const velocity = {
    x: 0,
    y: 0,
  };
  const offset = {
    x: random(-1, 1) * 0.2,
    y: random(-1, 1) * 0.2,
  };

  const updatePoints = () => {
    // Update first point only for others to LERP into
    // Update velocity
    velocity.x += (mouse.x + offset.x - points[0].x) * spring;
    velocity.y += (mouse.y + offset.y - points[0].y) * spring;

    // Apply friction
    velocity.x *= friction;
    velocity.y *= friction;

    // Update position with velocity
    const prev = {
      x: points[0].x,
      y: points[0].y,
    };
    points[0].x += velocity.x;
    points[0].y += velocity.y;
    points[0].s = Math.max(Math.abs(prev.x - points[0].x), Math.abs(prev.y - points[0].y));

    // LERP remaining points to preceding point
    for (let i = 1; i < points.length; i++) {
      const prev = {
        x: points[i].x,
        y: points[i].y,
      };
      points[i].x = lerp(prev.x, points[i - 1].x, lerpScale);
      points[i].y = lerp(prev.y, points[i - 1].y, lerpScale);

 ...