All components
Wavy Text
TypographyEach letter bobs up and down in a continuous wave.
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/wavy-text.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge2. Copy the component source into
components/library/wavy-text.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | - | Text to animate. |
Accessibility
- The wrapper carries an aria-label, and letters are aria-hidden.
- Screen readers get the whole phrase, not a letter at a time.
- Motion is transform-only, so it never triggers layout.
Dependencies
motionclsxtailwind-merge