Text Animations
Inscribe
Text engraved stroke by stroke. Every character is a real SVG tspan with native kerning and selectable words, wearing the uniform-dash trick, because glyph outlines expose no pathLength and measuring their true perimeter has no API: the chisel simply travels each letter at its own apparent speed. When a stroke closes, its fill carves in after a beat, and the engraved finish darkens the fill and adds an inset relief so the word reads as cut into the panel rather than printed on it. The whole timeline runs on the animation-loop clock, so the bench pause freezes the chisel mid-stroke, and with no JavaScript at all the text simply sits there finished.
Install
Props
What It Demonstrates
- Line drawing
- An SVG path that draws itself in, like an invisible pen tracing it.
- Stagger
- Animate several items one after another with a small delay between each, creating a cascade.
- Fade in / Fade out
- Element appears or disappears by changing opacity.
- Delay
- Time before an animation starts.
- Duration
- How long an animation takes.
Related Components
Letters Pull
A per-letter pull-up reveal. Letters rise, sharpen from a blur, and fade in with a stagger.
Animated Number
Animated numeric transitions with flip, slide, fade, and bounce styles.
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.
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.
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.