Reduced motion for text effects
What reduced motion means for type, and how Textlab handles it.
People turn on reduced motion for vestibular disorders, migraines, focus, or simply preference. For text, the rule is simple: show the final, readable state immediately.
What every component does
- Reveals render the plain text with no transform, blur, clip or mask.
- Counters and typewriters show the value or phrase directly.
- Ambient loops render a single still frame.
- Canvas and WebGL effects fall back to the real text.
Before JavaScript loads
Server-rendered reveals start hidden so they can animate in. The token stylesheet shows them instantly when the OS asks for reduced motion, and shows them anyway after 2.4 seconds if scripts are slow.
Overriding
tsx
<ScrambleText text="Preview" reducedMotion="always" />reducedMotion accepts user (the default), always and never. Use never only for motion that carries meaning and is safe, like a progress indicator.