How to build a water ripple hero background with Canvas 2D Canvas 2D で作る水面の波紋ヒーロー背景

.water-hero {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  height: clamp(280px, 45vw, 380px);
  background: #03131f;
  cursor: crosshair;
  touch-action: none;           /* don't scroll while dragging on the surface */
}
.water-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;                 /* small buffer stretched by CSS */
  display: block;
}
.water-overlay {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: clamp(20px, 5vw, 44px);
  pointer-events: none;         /* let pointer events reach the canvas */
  color: #f2fbff;
}

import { useEffect, useRef } from "react";
import "./M-016.css";

export default function WaterRippleHero({
  simWidth = 360,
  damping = 0.96,
  dropStrength = 220,
  refraction = 1.2,
  specular = 1.2,
  moveRadius = 2,
  clickRadius = 6,
  rainInterval = 900,
  children,
}) {
  const heroRef = useRef(null);
  const canvasRef = useRef(null);
  // Live parameter values, so prop changes don't restart the simulation
  const opts = useRef({});
  opts.current = { damping, dropStrength, refraction, specular, moveRadius, clickRadius, rainInterval };

  useEffect(() => {
    const hero = heroRef.current;
    const canvas = canvasRef.current;
    if (!hero || !canvas) return;
    const ctx = canvas.getContext("2d", { alpha: false });

    let w = 0, h = 0;
    let prev = null, curr = null;
    let srcData = null, outData = null;
    let rafId = null, lastRain = 0, running = false;

    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

    function buildSource() {
      const off = document.createElement("canvas");
      off.width = w;
      off.height = h;
      const c = off.getContext("2d");

      const g = c.createLinearGradient(0, 0, 0, h);
      g.addColorStop(0, "#0a3a5c");
      g.addColorStop(0.55, "#06263f");
      g.addColorStop(1, "#03131f");
      c.fillStyle = g;
      c.fillRect(0, 0, w, h);

      const orbs = [
        [0.22, 0.28, 0.42, "rgba(56, 189, 248, 0.55)"],
        [0.74, 0.22, 0.34, "rgba(45, 212, 191, 0.45)"],
        [0.52, 0.86, 0.46, "rgba(14, 116, 144, 0.55)"],
        [0.92, 0.72, 0.3, "rgba(129, 230, 255, 0.35)"],
      ];
      for (const [ox, oy, orad, color] of orbs) {
        const r = orad * w;
        const rg = c.createRadialGradient(ox * w, oy * h, 0, ox * w, oy * h, r);
        rg.addColorStop(0, color);
        rg.addColorStop(1, "rgba(0,0,0,0)");
        c.fillStyle = rg;
        c.fillRect(0, 0, w, h);
      }

      c.globalAlpha = 0.05;
      c.fillStyle = "#d9f6ff";
      for (let y = 0; y < h; y += 4) c.fillRect(0, y, w, 1);
      c.globalAlpha = 1;

      srcData = c.getImageData(0, 0, w, h);
      outData = ctx.createImageData(w, h);
      // Border pixels are never rewritten by draw(), so seed them from the source
      outData.data.set(srcData.data);
    }

    function resize() {
      const rect = hero.getBoundingClientRect();
      if (!rect.width || !rect.height) return;
      const nextH = Math.max(2, Math.round((simWidth * rect.height) / rect.width));
      if (srcData && w === simWidth && h === nextH) return;
      w = simWidth;
      h = nextH;
      canvas.width = w;
      canvas.height = h;
      prev = new Float32Array(w * h);
      curr = new Float32Array(w * h);
      buildSource();
    }

    function drop(cx, cy, radius, strength) {
      const r2 = radius * radius;
      for (let y = -radius; y <= radius; y++) {
        for (let x = -radius; x <= radius; x++) {
          const d2 = x * x + y * y;
          if (d2 > r2) continue;
          const px = cx + x, py = cy + y;
          if (px < 1 || py < 1 || px > w - 2 || py > h - 2) continue;
          // Cosine falloff: a hard-edged disc reads as a white speck, not a drop
          const falloff = 0.5 + 0.5 * Math.cos((Math.PI * Math.sqrt(d2)) / radius);
          prev[py * w + px] -= strength * falloff;
        }
      }
    }

    function step() {
      const d = opts.current.damping;
      for (let y = 1; y < h - 1; y++) {
        let i = y * w + 1;
        for (let x = 1; x < w - 1; x++, i++) {
          curr[i] = ((prev[i - 1] + prev[i + 1] + prev[i - w] + prev[i + w]) * 0.5 - curr[i]) * d;
        }
      }
      const t = prev;
      prev = curr;
      curr = t;
    }

    function draw() {
      const { refraction: rf, specular: sp } = opts.current;
      const src = srcData.data, out = outData.data;
      for (let y = 1; y < h - 1; y++) {
        let i = y * w + 1;
        for (let x = 1; x < w - 1; x++, i++) {
          const xo = prev[i - 1] - prev[i + 1];
          const yo = prev[i - w] - prev[i + w];

          let sx = x + xo * rf;
          let sy = y + yo * rf;
          sx = sx < 0 ? 0 : sx > w - 1 ? w - 1 : sx;
          sy = sy < 0 ? 0 : sy > h - 1 ? h - 1 : sy;

          const si = ((sy | 0) * w + (sx | 0)) * 4;
          const p = i * 4;
          const lit = (xo + yo) * sp;

          const r = src[si] + lit;
          const g = src[si + 1] + lit;
          const b = src[si + 2] + lit;
          out[p]     = r < 0 ? 0 : r > 255 ? 255 : r;
          out[p + 1] = g < 0 ? 0 : g > 255 ? 255 : g;
          out[p + 2] = b < 0 ? 0 : b > 255 ? 255 : b;
          out[p + 3] = 255;
        }
      }
      ctx.putImageData(outData, 0, 0);
    }

    function frame(now) {
      rafId = requestAnimationFrame(frame);
      // The hero can be measured as zero-sized before layout settles
      if (!srcData) return;
      const { rainInterval: ri, dropStrength: ds } = opts.current;
      if (!reduceMotion && ri > 0 && now - lastRain > ri) {
        lastRain = now;
        drop(2 + ((Math.random() * (w - 4)) | 0), 2 + ((Math.random() * (h - 4)) | 0), 3, ds * 0.7);
      }
      step();
      draw();
    }

    const start = () => {
      if (!running) {
        running = true;
        rafId = requestAnimationFrame(frame);
      }
    };
    const stop = () => {
      if (running) {
        running = false;
        cancelAnimationFrame(rafId);
      }
    };

    function toSim(e) {
      const rect = hero.getBoundingClientRect();
      return [
        (((e.clientX - rect.left) / rect.width) * w) | 0,
        (((e.clientY - rect.top) / rect.height) * h) | 0,
      ];
    }
    const onMove = (e) => {
      const [x, y] = toSim(e);
      drop(x, y, opts.current.moveRadius, opts.current.dropStrength * 0.35);
    };
    const onDown = (e) => {
      const [x, y] = toSim(e);
      drop(x, y, opts.current.clickRadius, opts.current.dropStrength);
    };
    const onVisibility = () => (document.hidden ? stop() : start());

    resize();
    hero.addEventListener("pointermove", onMove);
    hero.addEventListener("pointerdown", onDown);
    document.addEventListener("visibilitychange", onVisibility);

    // ResizeObserver, not window resize: the hero is often measured before the
    // surrounding layout has settled, which would leave the aspect ratio wrong.
    const ro = new ResizeObserver(() => resize());
    ro.observe(hero);

    const io = new IntersectionObserver(
      ([entry]) => (entry.isIntersecting ? start() : stop()),
      { threshold: 0 }
    );
    io.observe(hero);

    return () => {
      stop();
      io.disconnect();
      ro.disconnect();
      hero.removeEventListener("pointermove", onMove);
      hero.removeEventListener("pointerdown", onDown);
      document.removeEventListener("visibilitychange", onVisibility);
    };
  }, [simWidth]);

  return (
    <div className="water-hero" ref={heroRef}>
      <canvas className="water-canvas" ref={canvasRef} aria-hidden="true" />
      <div className="water-overlay">{children}</div>
    </div>
  );
}

.water-hero {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  height: clamp(280px, 45vw, 380px);
  background: #03131f;
  cursor: crosshair;
  /* Prevent scroll hijack while dragging on touch devices */
  touch-action: none;
}

.water-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.water-overlay {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: clamp(20px, 5vw, 44px);
  /* Let pointer events reach the canvas underneath */
  pointer-events: none;
  color: #f2fbff;
}

.water-overlay h3 {
  margin: 0;
  font-size: clamp(24px, 4.2vw, 38px);
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 2px 18px rgba(0, 20, 35, 0.6);
}

.water-overlay p {
  margin: 0;
  max-width: 34em;
  font-size: clamp(13px, 1.6vw, 15px);
  line-height: 1.75;
  color: rgba(226, 247, 255, 0.78);
  text-shadow: 0 1px 12px rgba(0, 20, 35, 0.6);
}