TextGenerateEffect
Live playground
Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.
Edit JSX — preview updates livereact-live
import { TextGenerateEffect } from "@avala/design"; <TextGenerateEffect>TextGenerateEffect</TextGenerateEffect>
All variants
The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.
domain-animations-textgenerateeffect--defaultOpen in Storybook →
When to use
- Marketing-site hero headline that reveals on first paint.
- Above-the-fold tagline where the staggered reveal punctuates the message.
- One-shot decorative entry on landing surfaces.
When not to use
- Body copy / paragraph runs — the per-word stagger doesn't read well at length.
- Localized strings that may have wildly different word counts across locales — stagger timing won't translate evenly.
- Anything inside an interactive form or live data list.