Shimmer Text
Animate a gold-to-ivory highlight across a short line of display text.
- Dependencies
- No extra packages
- Size
- 97 lines
- Controls
- 8 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/shimmer-text.json1 · Dependencies
None beyond React and Tailwind.
2 · Copy the source
components/onycx/shimmer-text.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the shimmer-text.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Liquid gold, poured slowly." | The words to gild. |
| as | "h1" | "h2" | "p" | "span" | "h2" | Rendered element. |
| base / highlight / deep | string | "#c9a96a" / "#f2e3c6" / "#b56a22" | Gradient stops at 0% and 60%, 45%, and 100%. |
| duration | number | 6 | Seconds per loop (minimum 0.5). |
| size | "wordmark" | "sm" | "md" | "lg" | "xl" | "lg" | wordmark is 18px at .32em tracking; sm–xl are clamp(2.5rem,6vw,4rem), clamp(3rem,9vw,7rem), clamp(3.4rem,10vw,9rem) and clamp(4rem,18vw,20rem). |
| serif | boolean | true | Serif display face (var(--font-serif-accent)); off uses the page font at weight 500. |
| tracking | number | — | Letter-spacing in em; defaults to the size's tracking (−.02 to −.04, .32 for wordmark). |