Text Animations
Long Shadow
Text that casts a long shadow sweeping like a sundial through the hours.
Install
bun add motion clsx tailwind-mergeThen copy 2 files into your project:
- components/registry/long-shadow/long-shadow.tsx
- lib/utils.ts
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| shadowLength | number | 24 | Reach of the cast shadow (layer count). |
| sweepSpeed | number | 0.5 | How fast the sun arcs; 0 holds a fixed shadow. |
| angleStart | number | 20 | Sundial start angle. |
| angleSweep | number | 140 | Total arc the sun sweeps. |
| pingPong | boolean | true | Arc back and forth (off = full rotation). |
| fade | number | 0.6 | How much the shadow dissolves along its length. |
| skew | number | 0 | Italic lean of the cast shadow. |
| shadowColor | string (hex) | "#2a1a3a" | Color of the long shadow. |
What It Demonstrates
- 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.
- Linear
- Constant speed. Avoid for UI; reserve for spinners or marquees.
Related Components
Marquee Text
A marquee that scrolls only when its text overflows the container.
Specter
Spectral RGB-split echoes drift off the letters and dissolve into the dark.
Teletype
A line of type arriving one character at a time, at a rate that varies and with a beat at every mark.
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.
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.
Neon
A neon sign, with everything that is wrong with a neon sign. Tubes strike one at a time rather than together, each settling at its own moment inside the ignition; the steady state carries a mains hum; and every so often one tube gives up for a third of a second and comes back. The glow is baked once per letter into a sprite, so a frame is a handful of draws no matter how wide the word — and the word itself never stops being a real, selectable text node underneath.