All components
Blur Text
TypographyReveals text word-by-word with a blur-to-sharp transition.
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/blur-text.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge2. Copy the component source into
components/library/blur-text.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | - | Text to reveal. |
Accessibility
- The wrapper carries an aria-label; words are aria-hidden.
- Triggers once in view, so it never replays while reading.
- Blur is a filter, so no layout work is involved.
Dependencies
motionclsxtailwind-merge