Flow Field

1/* Deepak Kumar E — https://craft.iam-deepak.space */2 3import { useEffect, useRef } from "react";4 5/**6 * Particles drifting through a noise field, trailing ink behind them.7 *8 * Two decisions make this cheap enough to sit behind real content:9 *10 * The field is sampled from a coarse grid computed once at mount, not11 * evaluated per particle per frame. Angles vary slowly across space, so a12 * 24px lattice is visually identical to per-pixel sampling and turns a few13 * thousand noise evaluations per frame into a couple of array lookups.14 *15 * Trails come from painting a translucent rectangle over the canvas each16 * frame instead of clearing it. The fade is free — the GPU composites it —17 * and it means each particle draws one short line rather than the browser18 * retaining a path history.19 *20 * The seed is fixed, so every visitor and every build gets the same21 * composition. A background that reshuffles on reload is a liability in22 * screenshots and visual regression tests.23 */24 25/** Deterministic PRNG — mulberry32. Same seed, same picture, every time. */26function rng(seed: number) {27  return () => {28    seed |= 0;29    seed = (seed + 0x6d2b79f5) | 0;30    let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);31    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;32    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;33  };34}35 36/** Value noise: cheap, smooth, and plenty for steering a flow field. */37function makeNoise(random: () => number) {38  const size = 256;39  const table = Array.from({ length: size }, () => random());40  const smooth = (t: number) => t * t * (3 - 2 * t);41 42  return (x: number, y: number) => {43    const xi = Math.floor(x);44    const yi = Math.floor(y);45    const xf = smooth(x - xi);46    const yf = smooth(y - yi);47 48    const at = (a: number, b: number) =>49      table[(((a & 255) + ((b & 255) << 4)) | 0) % size];50 51    const top = at(xi, yi) + xf * (at(xi + 1, yi) - at(xi, yi));52    const bottom =53      at(xi, yi + 1) + xf * (at(xi + 1, yi + 1) - at(xi, yi + 1));54    return top + yf * (bottom - top);55  };56}57 58export interface FlowFieldProps {59  /** How many particles. The main cost knob — see the note on the page. */60  count?: number;61  color?: string;62  background?: string;63  /** Pixels travelled per frame. */64  speed?: number;65  /** Higher swirls tighter; lower drifts in long sweeps. */66  turbulence?: number;67  /** Trail persistence, 0–1. Near 1 leaves long smoke; low clears fast. */68  trail?: number;69  /** Changes the composition without changing anything else. */70  seed?: number;71  still?: boolean;72  className?: string;73}74 75export function FlowField({76  count = 900,77  color = "#c3f53c",78  background = "#0a0b0e",79  speed = 0.9,80  turbulence = 1,81  trail = 0.92,82  seed = 7,83  still = false,84  className = "",85}: FlowFieldProps) {86  const ref = useRef<HTMLCanvasElement>(null);87 88  useEffect(() => {89    const canvas = ref.current;90    if (!canvas) return;91    const ctx = canvas.getContext("2d", { alpha: false });92    if (!ctx) return;93 94    const random = rng(seed);95    const noise = makeNoise(random);96 97    const reduced =98      still ||99      (typeof matchMedia === "function" &&100        matchMedia("(prefers-reduced-motion: reduce)").matches);101 102    // Capped at 2×: trails are soft, so the third device pixel buys nothing103    // and triples fill cost on phones.104    const dpr = Math.min(devicePixelRatio || 1, 2);105    let width = 0;106    let height = 0;107 108    const CELL = 24;109    let field: Float32Array = new Float32Array(0);110    let cols = 0;111 112    const buildField = () => {113      cols = Math.ceil(width / CELL) + 1;114      const rows = Math.ceil(height / CELL) + 1;115      field = new Float32Array(cols * rows);116      for (let y = 0; y < rows; y += 1) {117        for (let x = 0; x < cols; x += 1) {118          const n = noise((x * turbulence) / 6, (y * turbulence) / 6);119          field[y * cols + x] = n * Math.PI * 4;120        }121      }122    };123 124    const particles = Array.from({ length: count }, () => ({125      x: random(),126      y: random(),127      life: random() * 200,128    }));129 130    const resize = () => {131      const w = Math.floor(canvas.clientWidth * dpr);132      const h = Math.floor(canvas.clientHeight * dpr);133      // Ignore a zero measurement rather than committing a 0×0 buffer — see134      // the same guard in MeshGradient. A stuck zero-size canvas is the135      // "blank until you reload" failure.136      if (!w || !h) return false;137      if (w === width && h === height) return false;138      width = w;139      height = h;140      canvas.width = w;141      canvas.height = h;142      buildField();143      ctx.fillStyle = background;144      ctx.fillRect(0, 0, width, height);145      return true;146    };147 148    resize();149 150    const step = () => {151      // Fade rather than clear: this IS the trail.152      ctx.fillStyle = background;153      ctx.globalAlpha = 1 - trail;154      ctx.fillRect(0, 0, width, height);155 156      ctx.globalAlpha = 0.75;157      ctx.strokeStyle = color;158      ctx.lineWidth = dpr;159      ctx.beginPath();160 161      for (const p of particles) {162        const px = p.x * width;163        const py = p.y * height;164        const cx = Math.min(cols - 1, Math.max(0, Math.floor(px / (CELL * dpr))));165        const cy = Math.max(0, Math.floor(py / (CELL * dpr)));166        const angle = field[cy * cols + cx] ?? 0;167 168        const nx = px + Math.cos(angle) * speed * dpr;169        const ny = py + Math.sin(angle) * speed * dpr;170 171        ctx.moveTo(px, py);172        ctx.lineTo(nx, ny);173 174        p.x = nx / width;175        p.y = ny / height;176        p.life -= 1;177 178        // Recycled rather than removed, so the array length never changes179        // and the loop stays monomorphic.180        if (p.life <= 0 || p.x < 0 || p.x > 1 || p.y < 0 || p.y > 1) {181          p.x = random();182          p.y = random();183          p.life = 120 + random() * 160;184        }185      }186 187      // One stroke for every particle, not one per particle: batching the188      // path is the difference between a few hundred draw calls and one.189      ctx.stroke();190      ctx.globalAlpha = 1;191    };192 193    let frame = 0;194    const loop = () => {195      resize();196      step();197      frame = requestAnimationFrame(loop);198    };199 200    if (reduced) {201      // Settled composition rather than a blank panel: the same simulation,202      // fast-forwarded once, then left alone.203      for (let i = 0; i < 220; i += 1) step();204    } else {205      frame = requestAnimationFrame(loop);206    }207 208    const observer = new ResizeObserver(() => {209      if (!reduced) return;210      if (resize()) for (let i = 0; i < 220; i += 1) step();211    });212    observer.observe(canvas);213 214    return () => {215      cancelAnimationFrame(frame);216      observer.disconnect();217    };218  }, [count, color, background, speed, turbulence, trail, seed, still]);219 220  return (221    <canvas ref={ref} aria-hidden className={`block h-full w-full ${className}`} />222  );223}224