How to build an animated wave section divider with SVG SVG で作る波形アニメーションのセクション区切り

.wave-band {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  padding-bottom: clamp(70px, 12vw, 130px);  /* keep copy clear of the waves */
  background: linear-gradient(160deg, #0b4a6f 0%, #0a6c8f 45%, #0891b2 100%);
}
.wave-copy {
  position: relative;
  z-index: 1;
  padding: clamp(22px, 5vw, 44px);
  color: #fff;
  pointer-events: none;         /* let the section track the pointer */
}
.wave-svg {
  position: absolute;
  left: 0;
  bottom: -1px;                 /* hide the sub-pixel seam */
  width: 100%;
  height: clamp(80px, 14vw, 150px);
  display: block;
}
.wave-layer-1 { fill: rgba(165, 243, 252, 0.28); }
.wave-layer-2 { fill: rgba(103, 232, 249, 0.38); }
.wave-layer-3 { fill: #f4f9fc; }  /* same colour as .wave-next */
.wave-next    { background: #f4f9fc; }

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

const VB_W = 1200;
const VB_H = 200;

const LAYERS = [
  { base: 70, amp: 1.0, speed: 0.9, k1: 2.0, k2: 3.7, phase: 0 },
  { base: 100, amp: 0.8, speed: -0.7, k1: 2.6, k2: 4.3, phase: 1.7 },
  { base: 132, amp: 0.6, speed: 1.2, k1: 1.6, k2: 5.1, phase: 3.1 },
];

export default function WaveDivider({
  amplitude = 18,
  speed = 1,
  points = 40,
  swellWidth = 150,
  pointerSwell = true,
  children,
}) {
  const sectionRef = useRef(null);
  const pathRefs = useRef([]);
  // Live parameter values, so prop changes don't restart the loop
  const opts = useRef({});
  opts.current = { amplitude, speed, points, swellWidth, pointerSwell };

  useEffect(() => {
    const section = sectionRef.current;
    const paths = pathRefs.current;
    if (!section || paths.length !== LAYERS.length) return;

    let t = 0, last = 0, rafId = null, running = false;
    let hovering = false, pointerX = VB_W / 2;
    let swell = 0, swellX = VB_W / 2;
    let splashX = 0, splashAge = 99;

    function waveY(layer, u) {
      const { amplitude: amp, swellWidth: sw } = opts.current;
      const a = amp * layer.amp;
      const x = u * VB_W;
      let y =
        layer.base +
        (Math.sin(u * Math.PI * layer.k1 + t * layer.speed + layer.phase) * 0.65 +
          Math.sin(u * Math.PI * layer.k2 - t * layer.speed * 1.3 + layer.phase * 2) * 0.35) * a;

      const d = (x - swellX) / sw;
      y -= swell * Math.exp(-d * d) * a * 1.6;

      if (splashAge < 3) {
        const dist = Math.abs(x - splashX);
        const env = Math.exp(-dist / 320) * Math.max(0, 1 - splashAge / 3);
        y += Math.sin(dist / 60 - splashAge * 8) * env * a * 1.4;
      }
      return y;
    }

    function buildPath(layer) {
      const n = opts.current.points;
      const pts = [];
      for (let i = 0; i <= n; i++) {
        const u = i / n;
        pts.push([u * VB_W, waveY(layer, u)]);
      }
      let d = `M0,${VB_H} L0,${pts[0][1].toFixed(1)}`;
      for (let i = 1; i < pts.length - 1; i++) {
        const mx = (pts[i][0] + pts[i + 1][0]) / 2;
        const my = (pts[i][1] + pts[i + 1][1]) / 2;
        d += ` Q${pts[i][0].toFixed(1)},${pts[i][1].toFixed(1)} ${mx.toFixed(1)},${my.toFixed(1)}`;
      }
      d += ` L${VB_W},${pts[pts.length - 1][1].toFixed(1)} L${VB_W},${VB_H} Z`;
      return d;
    }

    const render = () => LAYERS.forEach((layer, i) => paths[i].setAttribute("d", buildPath(layer)));

    function frame(now) {
      rafId = requestAnimationFrame(frame);
      const dt = last ? Math.min((now - last) / 1000, 0.05) : 0;
      last = now;
      t += dt * opts.current.speed;
      splashAge += dt;
      const target = hovering && opts.current.pointerSwell ? 1 : 0;
      swell += (target - swell) * 0.06;
      swellX += (pointerX - swellX) * 0.12;
      render();
    }

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

    const toViewBox = (e) => {
      const rect = section.getBoundingClientRect();
      return ((e.clientX - rect.left) / rect.width) * VB_W;
    };
    const onMove = (e) => {
      hovering = true;
      pointerX = toViewBox(e);
    };
    const onLeave = () => {
      hovering = false;
    };
    const onDown = (e) => {
      splashX = toViewBox(e);
      splashAge = 0;
    };
    const onVisibility = () => (document.hidden ? stop() : start());

    render();
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return undefined;

    section.addEventListener("pointermove", onMove);
    section.addEventListener("pointerleave", onLeave);
    section.addEventListener("pointerdown", onDown);
    document.addEventListener("visibilitychange", onVisibility);

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

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

  return (
    <section className="wave-band" ref={sectionRef}>
      <div className="wave-copy">{children}</div>
      <svg
        className="wave-svg"
        viewBox={`0 0 ${VB_W} ${VB_H}`}
        preserveAspectRatio="none"
        aria-hidden="true"
        focusable="false"
      >
        {LAYERS.map((layer, i) => (
          <path
            key={i}
            className={`wave-layer-${i + 1}`}
            ref={(el) => (pathRefs.current[i] = el)}
          />
        ))}
      </svg>
    </section>
  );
}

.wave-band {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  padding-bottom: clamp(70px, 12vw, 130px);  /* keep copy clear of the waves */
  background: linear-gradient(160deg, #0b4a6f 0%, #0a6c8f 45%, #0891b2 100%);
}

.wave-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(22px, 5vw, 44px);
  color: #fff;
  /* Pointer events pass through so the section can track the pointer */
  pointer-events: none;
}

.wave-svg {
  position: absolute;
  left: 0;
  /* Hide the sub-pixel seam against the next section */
  bottom: -1px;
  width: 100%;
  height: clamp(80px, 14vw, 150px);
  display: block;
}

.wave-layer-1 {
  fill: rgba(165, 243, 252, 0.28);
}

.wave-layer-2 {
  fill: rgba(103, 232, 249, 0.38);
}

/* Must match the background of the section that follows */
.wave-layer-3 {
  fill: #f4f9fc;
}