Waves

A grid of points is rebuilt on resize and drawn as continuous vertical lines on a 2D canvas. Each point gets a base offset from Perlin noise, plus a second offset driven by a damped spring: the pointer injects velocity along its direction of travel, and tension pulls every point back to rest. Everything runs on the CPU in one pass per frame, with the canvas scale capped by a pixel budget.

const move = noise.perlin2(
  (point.x + time * speedX) * 0.002,
  (point.y + time * speedY) * 0.0015
) * 12;
point.wave.x = Math.cos(move) * ampX;
point.wave.y = Math.sin(move) * ampY;

const dx = point.x - mouse.sx;
const dy = point.y - mouse.sy;
const distance = Math.hypot(dx, dy);
const influence = Math.max(175, mouse.vs);

if (distance < influence) {
  const strength = 1 - distance / influence;
  const force = Math.cos(distance * 0.001) * strength;
  point.cursor.vx += Math.cos(mouse.a) * force * influence * mouse.vs * 0.00065;
  point.cursor.vy += Math.sin(mouse.a) * force * influence * mouse.vs * 0.00065;
}

// spring back to rest, then integrate
point.cursor.vx += (0 - point.cursor.x) * tension;
point.cursor.vy += (0 - point.cursor.y) * tension;
point.cursor.vx *= friction;
point.cursor.vy *= friction;
point.cursor.x += point.cursor.vx * 2;
point.cursor.y += point.cursor.vy * 2;