Canvas and WebGL

// src/components/fx/use-canvas-2d.ts
"use client";
import { useEffect, useRef } from "react";

export type Draw2D = (ctx: CanvasRenderingContext2D, timeMs: number, size: { w: number; h: number }) => void;

/** Viewport- or element-sized 2D canvas loop: DPR + fps capped, paused offscreen/hidden, static under reduced motion. */
export function useCanvas2D(draw: Draw2D, { fps = 30, maxDpr = 1.5 } = {}) {
  const ref = useRef<HTMLCanvasElement>(null);
  const drawRef = useRef(draw);
  useEffect(() => { drawRef.current = draw; });                  // latest draw without restarting the loop

  useEffect(() => {
    const canvas = ref.current;
    const ctx = canvas?.getContext("2d");
    if (!canvas || !ctx) return;
    const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;
    const size = { w: 0, h: 0 };
    const interval = 1000 / fps;
    let raf = 0, last = 0, visible = true;

    const paint = (t: number) => drawRef.current(ctx, t, size);
    const resize = () => {
      const dpr = Math.min(window.devicePixelRatio || 1, maxDpr);
      const rect = canvas.getBoundingClientRect();              // measured on resize only
      size.w = rect.width; size.h = rect.height;
      canvas.width = Math.round(rect.width * dpr);
      canvas.height = Math.round(rect.height * dpr);
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      paint(last);
    };
    const loop = (t: number) => {
      raf = requestAnimationFrame(loop);
      if (t - last < interval) return;
      last = t;
      paint(t);
    };
    const start = () => { if (!raf && visible && !document.hidden && !reduced) raf = requestAnimationFrame(loop); };
    const stop = () => { cancelAnimationFrame(raf); raf = 0; };
    const onVisibility = () => (document.hidden ? stop() : start());

    const ro = new ResizeObserver(resize);
    const io = new IntersectionObserver(([entry]) => { visible = !!entry?.isIntersecting; visible ? start() : stop(); });
    ro.observe(canvas);
    io.observe(canvas);
    document.addEventListener("visibilitychange", onVisibility);
    resize();
    start();

    return () => {
      stop();
      ro.disconnect();
      io.disconnect();
      document.removeEventListener("visibilitychange", onVisibility);
    };
  }, [fps, maxDpr]);

  return ref;
}

// src/components/fx/signal-field.tsx — usage
"use client";
import { useCanvas2D } from "./use-canvas-2d";
import { useTokenColor } from "./use-token-color";

const COUNT = 120;
const xs = new Float32Array(COUNT), ys = new Float32Array(COUNT);   // allocated once
for (let i = 0; i < COUNT; i++) { xs[i] = Math.random(); ys[i] = Math.random(); }

export function SignalField() {
  const brand = useTokenColor("--brand");
  const ref = useCanvas2D((ctx, t, { w, h }) => {
    ctx.clearRect(0, 0, w, h);
    ctx.fillStyle = brand.current;
    for (let i = 0; i < COUNT; i++) {
      const y = (ys[i]! * h + t * 0.01 * (1 + (i % 3))) % h;
      ctx.globalAlpha = 0.15 + (i % 5) * 0.08;
      ctx.fillRect(xs[i]! * w, y, 1.5, 1.5);
    }
  });
  return <canvas ref={ref} aria-hidden="true" className="pointer-events-none absolute inset-0 -z-10 size-full" />;
}
// Parent: const SignalField = dynamic(() => import("./signal-field").then(m => m.SignalField), { ssr: false });
// inside a `relative isolate` section with a bg fallback, e.g. bg-bg-subtle.

// src/components/fx/use-token-color.ts
"use client";
import { useEffect, useRef } from "react";

/** Resolves a CSS custom property (oklch, color-mix, var) to an rgb() string; updates on theme change. */
export function useTokenColor(name: `--${string}`) {
  const value = useRef("rgb(128 128 128)");
  useEffect(() => {
    const probe = document.createElement("canvas").getContext("2d")!;
    const read = () => {
      const raw = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
      probe.clearRect(0, 0, 1, 1);
      probe.fillStyle = raw;                                    // the browser parses oklch()
      probe.fillRect(0, 0, 1, 1);
      const [r, g, b] = probe.getImageData(0, 0, 1, 1).data;
      value.current = `rgb(${r} ${g} ${b})`;
    };
    read();
    const mo = new MutationObserver(read);                        // .dark / data-theme toggles
    mo.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "data-theme"] });
    return () => mo.disconnect();
  }, [name]);
  return value;                                                   // read .current inside the draw loop
}

<section className="relative isolate overflow-clip">
  {/* 1. CSS fallback: always present, matches the effect's average color */}
  <div aria-hidden="true" className="absolute inset-0 -z-20 bg-[radial-gradient(80%_60%_at_50%_0%,color-mix(in_oklch,var(--brand)_10%,var(--bg)),var(--bg))]" />
  {/* 2. The effect, loaded after paint, hidden under reduced data */}
  <SignalField />
  {/* 3. Content, fully readable over both */}
  <Container className="relative">…</Container>
</section>