Animated Gradient Text

1import { ComponentPropsWithoutRef } from "react"
2 
3 
4 
5// @interlace/animated-gradient-text v1.1.0 — Interlace design system.
6// Docs, props and live preview: https://ds.interlace.tools/c/animated-gradient-text
7// What changed since: https://ds.interlace.tools/c/animated-gradient-text#history
8// Generated banner — keep it, the upgrade diff reads this version.
9 
10/**
11 * @interlace/ui — AnimatedGradientText
12 *
13 * Gradient-filled text: a `bg-clip-text text-transparent` span whose
14 * three-stop linear gradient slides horizontally on a loop. Built for a short
15 * eyebrow, badge or headline fragment — never a paragraph, since the text has
16 * no solid fill to fall back to.
17 *
18 * Our reimplementation of the Magic UI component of the same name. It is a
19 * single span plus one keyframe, so the whole effect lives in three places:
20 * this file, `--animate-gradient` in `styles/tokens.css`, and the `gradient`
21 * keyframe next to it.
22 *
23 * ## Anatomy
24 *
25 *   AnimatedGradientText             (span — .animate-gradient)
26 *     └─ children                    (painted through the clipped gradient)
27 *
28 * ## Motion
29 *
30 * Pure CSS, and covered twice. `.animate-gradient` is named in the
31 * `prefers-reduced-motion: reduce` block in `styles/tokens.css`, which sets
32 * `animation: none !important`, and it is also caught by the
33 * `animation-duration: 0.01ms` wildcard in `styles/preflight.css`. There is no
34 * `useReducedMotion` call here and none is needed. Under `reduce` the gradient
35 * stops moving but still paints, so the text stays readable.
36 *
37 * ## `speed` changes distance, not duration
38 *
39 * The animation is a fixed `8s linear infinite`. `speed` sets
40 * `--bg-size: speed × 300%`, and the keyframe animates
41 * `background-position` to `var(--bg-size)`, so a larger `speed` moves the
42 * gradient further in the same eight seconds — which reads as faster.
43 *
44 * ## The gradient IS the text, so both stops are text-grade tokens
45 *
46 * `colorFrom` / `colorTo` default to `var(--primary)` → `var(--primary-active)`.
47 * The span is `bg-clip-text text-transparent`: there is no solid fill
48 * underneath, so the gradient stops are the glyph colour and SC 1.4.3's 4.5:1
49 * binds on every one of them. Both defaults are measured body-text tokens in
50 * both schemes — 8.80:1 and 13.76:1 on light, 11.79:1 and 14.68:1 on dark
51 * (`styles/interlace-theme.css`). A `--chart-*` token would NOT be admissible
52 * here even though it is on the token system, because those are tuned to the
53// … truncated