Text Animations
Long Shadow
Text that casts a long shadow sweeping like a sundial through the hours.
Install
Props
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: 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, so it stays 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.