Where text effects belong
Animated text is powerful precisely because it's unusual, which makes restraint the whole skill. One animated headline in a hero section reads as craft; animated text throughout a page reads as a template. These effects belong on headlines, hero statements and single focal words — never on body copy, which people need to actually read.
The gradient-flow and neon effects suit brand moments and landing pages. Typewriter fits terminal aesthetics and developer-facing products. Glitch works for cyberpunk and gaming contexts and looks out of place almost everywhere else.
The techniques behind them
Gradient text works by painting a gradient as the element's background, clipping it to the glyph shapes with background-clip: text, and making the text itself transparent. Animating background-position across an oversized gradient produces the flow.
Typewriter combines two tricks: a steps() timing function animating width so characters appear discretely rather than sliding, and a blinking border-right acting as the caret. Because it depends on character count, the ch width and step count must both match your text.
Letter effects like the wave need each character in its own element with a staggered delay — the one case here where a little JavaScript to split the text is worth it.
Accessibility rules for animated text
Three constraints matter. Text that moves or flashes must be avoidable — WCAG requires a way to pause or stop anything that animates for more than five seconds, which is why looping text effects should be reserved for short headlines and paused under prefers-reduced-motion.
Flashing is a genuine safety issue: nothing should flash more than three times per second, as faster rates can trigger photosensitive seizures. The neon flicker here stays well under that threshold deliberately.
Finally, keep the text as real text. Effects that split characters into spans should preserve the readable string for screen readers, and gradient text needs a fallback colour so it isn't invisible where background-clip is unsupported.