MOTION / Web Animations API · CSS · TypeScript
Text Reveal Studio
Compare character and word reveals using explicit timing and easing controls.
LIVE SURFACE / 01
Change the timing. Read the motion.
STUDIO / TEXT-REVEAL
The canvas is ready
when you are.
Nothing runs in the background. Open the preview to start the experiment.
Loading the local experiment runtime…
FIELD NOTES / TEXT MOTION
Use motion to clarify what arrives.
How it works
Each letter or word becomes a visual wrapper. The Web Animations API interpolates opacity and vertical position; each unit receives a delay based on its index and the stagger value. A separate coherent text equivalent stays available to assistive technology.
When to use it
A short heading or one-time status transition can benefit from a paced reveal. Avoid animating long passages or content people need to scan repeatedly.
Access and motion
Visual fragments are hidden from assistive technology; one unbroken text equivalent is exposed. The system reduced-motion preference sets the initial control value. The control then overrides system changes, and static text remains visible without animation.
Performance and cleanup
Opacity and transform avoid layout on each frame. Character splitting is capped at 120 characters. Changes restart active playback from the beginning, preserve pause, and leave idle previews idle. Prior animations are cancelled; closing removes the frame and host listener.
SOURCE / LICENSE
Original implementation · MIT · no external assets