All components
Word Reveal
AnimationReveals a sentence one word at a time as it enters.
Builttobecopied,pasted,andowned.
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/word-reveal.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge2. Copy the component source into
components/library/word-reveal.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | - | Sentence to reveal. |
| stagger | number | 0.06 | Seconds between each word. |
| className | string | - | Classes applied to the wrapper. |
Accessibility
- Renders real text, so screen readers announce the sentence normally.
- Honours prefers-reduced-motion by skipping the entrance offset.
Dependencies
motionclsxtailwind-merge