Streaming text animation: chunk timing and fade
Stream a chunk of 1 to 3 words every 55 to 110 ms, and fade each word in over 200 ms. 15 to 25 words a second. A word fades in 0.2 to 0.3 s, tinted, and settles to ink in about 0.5 s. The text never moves and its layout is reserved.
Demo
Stream
The page seeks every frame, so the same input draws the same film.
Built from the measured numbers below. If your system asks for reduced motion, nothing plays and the final state shows.
Duration
- Duration
- 55 to 110 ms a chunk of 1 to 3 words, fade 200 ms, tint 500 ms
Code
import { UI } from '../../core/motion/presets.js';
// UI.stream: gapMs [55, 110], fadeMs 200, tintMs 500Measured source
Measured on ChatGPT and Vercel Analytics clips at 30 fps, read off frames, plus or minus 33 ms. The numbers live in UI, imported from core/motion/presets.js.
| Preset | Value | Measured |
|---|---|---|
| Stream | 55 to 110 ms a chunk of 1 to 3 words, fade 200 ms, tint 500 ms | 15 to 25 words a second. A word fades in 0.2 to 0.3 s, tinted, and settles to ink in about 0.5 s. |