Background Gradient Animation

1"use client";
2 
3import {
4  forwardRef,
5  useEffect,
6  useId,
7  useRef,
8  type ComponentPropsWithoutRef,
9  type CSSProperties,
10  type ReactNode,
11} from "react";
12 
13// @interlace/background-gradient-animation v1.2.0 — Interlace design system.
14// Docs, props and live preview: https://ds.interlace.tools/c/background-gradient-animation
15// What changed since: https://ds.interlace.tools/c/background-gradient-animation#history
16// Generated banner — keep it, the upgrade diff reads this version.
17 
18/**
19 * @interlace/ui — BackgroundGradientAnimation
20 *
21 * The "lava lamp" surface: five radial-gradient blobs orbiting behind an SVG
22 * goo filter and a 40px blur, over a two-stop gradient backdrop, plus a sixth
23 * blob that eases toward the pointer.
24 *
25 * Every colour is a prop that falls back to an `--interlace-*` token, so the
26 * default look is on-brand and no literal ships in source.
27 *
28 * ## Provenance
29 *
30 * Our reimplementation of the Aceternity UI component of the same name. What
31 * is ours: the whole token fallback chain (upstream shipped colour literals);
32 * self-scoping — the original mutated `document.body.style`, this one writes
33 * its CSS variables to its own root so several instances can coexist; and a
34 * pointer loop that actually schedules frames, replacing upstream's
35 * stale-closure nested `setState` that never re-ran.
36 *
37 * ## Anatomy
38 *
39 *   div                              (data-slot="background-gradient-animation",
40 *                                     isolate, backdrop linear-gradient)
41 *     ├─ svg.hidden                  (data-slot="gradient-filter" — feGaussianBlur
42 *     │                               → feColorMatrix → feBlend, the goo)
43 *     ├─ div aria-hidden             (data-slot="gradient-blobs", filter:url(#<gooId>))
44 *     │   ├─ div.animate-first … .animate-fifth
45 *     │   └─ div                     (data-slot="gradient-pointer" — only when active)
46 *     └─ div.z-10                    (data-slot="gradient-content" — your children)
47 *
48 * ## Motion — two kinds, gated two ways
49 *
50 * The five orbits are CSS keyframes (`--animate-first`…`--animate-fifth` in
51 * `styles/tokens.css`). They are named in that file's
52 * `prefers-reduced-motion: reduce` block (`animation: none !important`) and
53 * also caught by the wildcard in `styles/preflight.css`, so they need no JS.
54 * The blobs stay on screen, parked.
55 *
56 * The pointer blob is a `requestAnimationFrame` loop writing
57// … truncated