Text Animations
Specter
Spectral RGB-split echoes drift off the letters and dissolve into the dark.
Install
bun add motion clsx tailwind-mergeThen copy 2 files into your project:
- components/registry/specter/specter.tsx
- lib/utils.ts
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| ghostCount | number | 3 | Number of spectral echoes. |
| drift | number | 24 | How far each ghost drifts before dissolving. |
| speed | number | 1 | Drift and dissolve cycle speed. |
| angle | number | 90 | Direction the ghosts drift toward. |
| stagger | number | 0.15 | Delay between successive emissions. |
| blur | number | 2 | Ghost softness as it dissolves. |
| splitColor1 | string (hex) | "#a855f7" | Amethyst chromatic ghost. |
| splitColor2 | string (hex) | "#22d3ee" | Cyan chromatic ghost. |
What It Demonstrates
- Follow-through
- Parts of an element keep moving and settle slightly after the main motion stops, adding weight.
- Blur
- A blur filter used to soften an element or mask tiny imperfections.
- Loop
- An animation that repeats, a set number of times or infinitely.
- Idle animation
- Subtle motion that plays while an element is just sitting there, waiting to be interacted with.
Related Components
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.
Morphing Text
A gooey blur-morph that cross-dissolves between a list of words.
Long Shadow
Text that casts a long shadow sweeping like a sundial through the hours.
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.
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.