Flow Field

1"use client";
2 
3import * as React from "react";
4 
5export type FlowFieldProps = React.HTMLAttributes<HTMLDivElement> & {
6  /** Number of particles tracing the field. */
7  particleCount?: number;
8  /** Field scale — smaller means broader, smoother currents. */
9  noiseScale?: number;
10  /** Flow speed multiplier. `1` is the calm default. */
11  speed?: number;
12  /**
13   * Trail color, any CSS color string. Defaults to the `--color-primary`
14   * token, re-resolved on theme change.
15   */
16  color?: string;
17  /**
18   * Trail fade per frame, `0`–`1`. Lower leaves longer, silkier trails;
19   * higher keeps the field crisp.
20   */
21  fade?: number;
22};
23 
24function rgbTriple(input: string): [number, number, number] {
25  if (typeof document === "undefined") return [0, 0, 0];
26  try {
27    const c = document.createElement("canvas");
28    c.width = 1;
29    c.height = 1;
30    const ctx = c.getContext("2d", { willReadFrequently: true });
31    if (!ctx) return [0, 0, 0];
32    ctx.fillStyle = input;
33    ctx.fillRect(0, 0, 1, 1);
34    const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
35    return [r, g, b];
36  } catch {
37    return [0, 0, 0];
38  }
39}
40 
41// Compact 2D value noise (hash + smooth interpolation) for the flow angles.
42function hash(x: number, y: number): number {
43  const s = Math.sin(x * 127.1 + y * 311.7) * 43758.5453;
44  return s - Math.floor(s);
45}
46function valueNoise(x: number, y: number): number {
47  const ix = Math.floor(x);
48  const iy = Math.floor(y);
49  const fx = x - ix;
50  const fy = y - iy;
51  const ux = fx * fx * (3 - 2 * fx);
52  const uy = fy * fy * (3 - 2 * fy);
53  const a = hash(ix, iy);
54  const b = hash(ix + 1, iy);
55  const c = hash(ix, iy + 1);
56  const d = hash(ix + 1, iy + 1);
57  return a + (b - a) * ux + (c - a) * uy + (a - b - c + d) * ux * uy;
58}
59 
60type Particle = { x: number; y: number };
61 
62/**
63 * A field of particles streaming along an evolving noise vector field, leaving
64 * silky fading trails. Paints its own themed background. Drop it as the first
65 * child of a `relative` container; your content sits above it.
66 */
67const FlowField = React.forwardRef<HTMLDivElement, FlowFieldProps>(
68  (
69    {
70      className,
71      style,
72      particleCount = 900,
73      noiseScale = 0.0016,
74      speed = 1,
75      color,
76      fade = 0.06,
77      ...props
78    },
79    ref,
80  ) => {
81    const containerRef = React.useRef<HTMLDivElement>(null);
82    const canvasRef = React.useRef<HTMLCanvasElement>(null);
83    const fgRef = React.useRef<[number, number, number]>([0, 0, 0]);
84// … truncated