Cursor Wave Field

HTML

CSS

JS

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let w, h;
function resize() {
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
}
resize();
window.addEventListener("resize", resize);
const spacing = 28;
const dots = [];
let mouse = { x: -9999, y: -9999 };
for (let y = 0; y < h; y += spacing) {
  for (let x = 0; x < w; x += spacing) {
    dots.push({
      x,
      y,
      ox: x,
      oy: y
    });
  }
}
document.addEventListener("mousemove", e => {
  mouse.x = e.clientX;
  mouse.y = e.clientY;
});
document.addEventListener("mouseleave", () => {
  mouse.x = mouse.y = -9999;
});
function draw() {
  ctx.clearRect(0, 0, w, h);
  dots.forEach(dot => {
    const dx = mouse.x - dot.x;
    const dy = mouse.y - dot.y;
    const dist = Math.sqrt(dx * dx + dy * dy);
    const force = Math.max(0, 120 - dist) / 120;
    dot.x = dot.ox - dx * force * 0.25;
    dot.y = dot.oy - dy * force * 0.25;
    ctx.beginPath();
    ctx.arc(dot.x, dot.y, 2, 0, Math.PI * 2);
    ctx.fillStyle = `rgba(140,150,255,${0.3 + force})`;
    ctx.fill();
  });
  requestAnimationFrame(draw);
}
draw();

Ad #1

Ad #2