Animated Grid Pattern

1"use client";
2 
3import {
4  forwardRef,
5  useCallback,
6  useEffect,
7  useId,
8  useMemo,
9  useRef,
10  useState,
11  type ComponentPropsWithoutRef,
12} from "react";
13 
14// @interlace/animated-grid-pattern v1.1.0 — Interlace design system.
15// Docs, props and live preview: https://ds.interlace.tools/c/animated-grid-pattern
16// What changed since: https://ds.interlace.tools/c/animated-grid-pattern#history
17// Generated banner — keep it, the upgrade diff reads this version.
18 
19/**
20 * @interlace/ui — AnimatedGridPattern (decorative background primitive)
21 *
22 * A tiled SVG grid where a handful of cells softly pulse in and out, then
23 * teleport to a new random cell on each cycle — a "breathing" graph-paper
24 * backdrop for heroes and section bands. Re-authored from the MagicUI
25 * pattern to the Interlace component floor.
26 *
27 * | Rule | Concept                          | Where in this file                                                                 |
28 * | ---- | -------------------------------- | ---------------------------------------------------------------------------------- |
29 * | R4   | Extends native el + JSDoc        | `ComponentPropsWithoutRef<"svg">`; every public prop documented with `@default`    |
30 * | R5   | `data-testid` typed, no default  | `"data-testid"?: string` — consumer supplies the selector                          |
31 * | R6   | `data-slot` on the root          | `data-slot="animated-grid-pattern"` on the `<svg>`                                 |
32 * | R7   | className merged + ...rest + ref | `cn(...)`, `{...props}`, `ref` forwarded to the root `<svg>`                        |
33 * | R8   | Booleans no `isXxx`              | No boolean props; numeric/string knobs only                                        |
34 * | R18  | Tailwind only                    | No inline `style`; geometry is SVG attributes, color is a Tailwind class           |
35 * | R19  | Tokens only — no raw color       | Color via `currentColor` (default class `text-muted-foreground/20`); no hex     |
36 * | R23  | CLS=0                            | `absolute inset-0 pointer-events-none` decorative chrome — reserves no flow space  |
37 * | R25  | Perf — `'use client'` justified  | Reads `ResizeObserver` + `useReducedMotion`; gated to interactive use only         |
38 * | R26  | A11y                            | `aria-hidden` — purely decorative, never announced; zero axe suppressions          |
39 *
40 * ## API parity
41 *
42// … truncated