Text Animations
Reflow
Text whose words keep their identity when the line breaks move. Narrow the measure and the sentence travels instead of re-wrapping.
Install
Props
What It Demonstrates
- Layout animation
- When an element's size or position changes, it animates to the new spot instead of snapping.
- Continuity transition
- A change that keeps the user oriented by visually connecting before and after. For example, making the same rectangle bigger and smaller.
- Spatial consistency
- Animating so an element keeps its identity and position across states, so users never lose track of where things went.
- Enter / Exit
- The animation an element plays when it's added to or removed from the screen.
- Stagger
- Animate several items one after another with a small delay between each, creating a cascade.
Related Components
Letters Pull
A per-letter pull-up reveal. Letters rise, sharpen from a blur, and fade in with a stagger.
Redact
Copy that arrives fully classified under solid bars, then declassifies word by word. Each bar clears its own word and leaves an amethyst edge behind as the only evidence it was ever there.
Scramble Text
Ciphered glyphs boiling out of noise and resolving into words. A decode cascade that settles character by character, a hover that re-scrambles on demand, or a continuous low glitch that keeps the type restless, each freshly-resolved letter flashing accent before it cools to ink.
Lumen
Copy that lights up as you read it. Words ahead sit dim and unfocused, and stay lit once you pass them.
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.
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.