Text Animations
Metallic Text
Chrome poured into a headline — a metal ramp clipped to real glyphs, a specular travelling across them, and a tinted wake following a beat behind.
Install
bun add clsx tailwind-mergeThen copy 2 files into your project:
- components/registry/metallic-text/metallic-text.tsx
- lib/utils.ts
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| sweepSpeed | number | 3.2 | Time for the highlight to cross the line once. |
| sweepWidth | number | 0.28 | Width of the specular band as a share of the text box. Narrow reads as polished chrome, wide as brushed steel — the band is the light source, so its size is the softness of the reflection. |
| sweepAngle | number | 18 | Rake of the band off vertical. Stops short of ±90 on purpose: at a right angle the band lies parallel to its own travel and the sweep stops reading as movement at all. |
| contrast | number | 0.7 | Separation between the dark and light bands of the metal. This is what decides whether the text reads as chrome or as a grey gradient — the horizon between the two is the reflection of a ground plane. |
| specular | number | 0.85 | Brightness of the travelling highlight. |
| lag | number | 0.35 | How far the wake trails the highlight. At zero the two move as one gradient; raise it and the light gains weight, because the trailing edge is still arriving when the leading edge has gone. |
| sweep | "alternate" | "loop" | "alternate" | Whether the light returns the way it came or restarts from the same edge each pass. |
| grain | number | 0.12 | Brushed striations along the sweep axis. Directional rather than random — milled metal has a grain direction, and noise reads as dirt on the screen instead. |
| baseColor | string (hex) | "#8f94a3" | The metal. Also the fallback colour: where background-clip on text is unsupported the element renders as plain text in this colour rather than as an invisible headline. |
| highlightColor | string (hex) | "#ffffff" | The specular. |
| accentColor | string (hex) | "#a855f7" | Tint of the wake. |
What It Demonstrates
- Mask
- Hiding or revealing parts of an element using a shape or gradient — like clip-path, but with soft, fadeable edges.
- Compositing
- Letting the GPU move or fade an element on its own layer without redoing layout or paint.
- Follow-through
- Parts of an element keep moving and settle slightly after the main motion stops, adding weight.
- Idle animation
- Subtle motion that plays while an element is just sitting there, waiting to be interacted with.
- Loop
- An animation that repeats, a set number of times or infinitely.
Related Components
Specter
Spectral RGB-split echoes drift off the letters and dissolve into the dark.
Molten
Type that melts. Letters sag under their own weight, string out, and fuse into one surface where they touch — because the glyphs are a coverage field cut by a threshold rather than shapes being moved, so two stems raise the coverage between them past the cut and one outline closes over both. The word underneath is a real text node the whole time: selectable, searchable, and read correctly aloud while it runs.
Long Shadow
Text that casts a long shadow sweeping like a sundial through the hours.
Redact
Copy that arrives fully classified under solid bars, then declassifies word by word — each bar clearing its own word and leaving an amethyst edge behind as the only evidence it was ever there.
Split Flap
A Solari departure board. Every column walks the charset one flap at a time until it reaches its letter, so the word is never revealed — it is arrived at, with a real hinged half falling away as the next one seats behind it.
Teletype
A line of type arriving one character at a time, at a rate that varies and with a beat at every mark.