text
Word Stagger
Preset of Split Text Reveal: `by="word"`. No additional behaviour.
- text
Named word preset; use Split Text Reveal when the split mode is part of the decision. Open Split Text Reveal
Live preview
Quick usage
import { WordStagger } from "@pinky-ui/effects";
<WordStagger />Install
Add @pinky-ui/effects as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.
npm install @pinky-ui/effectspnpm add @pinky-ui/effectsyarn add @pinky-ui/effectsnpx pinky-ui add word-staggerPrefer to run the whole repository locally instead?
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run devAccessibility
- Motion never carries the only meaning; the underlying content remains in the DOM.
- Pair pointer effects with an equivalent focus or keyboard state where the target is interactive.
Reduced motion
The effect resolves to a static readable state when motion is reduced.
When to use
- As a restrained enhancement to meaningful content.
When not to use
- When the content or control would be unclear without motion.
Skill
Purpose
WordStagger is a named preset, not a separate implementation: it is exactly <SplitTextReveal {...props} by="word" /> and accepts every SplitTextReveal prop except by. Reach for it when you want the word-level rhythm without restating the option; reach for SplitTextReveal directly when the split mode is itself a decision, or when you need by="line". There is no behaviour here that SplitTextReveal does not have.
It gives editorial text a readable rhythm without the fragility of character splitting.
Use it for one short statement at a section boundary. Do not use it for long copy, rapidly changing text or text that must be scanned as a compact label. Keep the default stagger and trigger once in view.
Words remain final, selectable content in the DOM, and reduced motion is immediate. Do not use the effect to communicate a required sequence; the sentence must make sense before animation.