All components
Gsap Text Reveal
TypographyReveals text character-by-character with a GSAP stagger.
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/gsap-text-reveal.jsonOr install manually
1. Install dependencies
pnpm add gsap clsx tailwind-merge2. Copy the component source into
components/library/gsap-text-reveal.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | - | Text to reveal. |
Accessibility
- The wrapper carries an aria-label; characters are aria-hidden.
- gsap.context scopes the animation and reverts it on unmount.
- Loops with a pause, so it never becomes a constant distraction.
Dependencies
gsapclsxtailwind-merge