127 Components
Elastic Wave Text
TextPlucked-string kinetic typography that propagates a damped transverse wave across every character on hover or click.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/elastic-wave-text.json"
Props
TypeScript props supported by <ElasticWaveText />.
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Harmonic Transverse Wave" | Headline string rendered along the transverse wave. |
| amplitude | number | -14 | Peak vertical wave crest displacement in pixels. |
| stiffness | number | 420 | Spring stiffness coefficient for glyph oscillation. |
| damping | number | 14 | Damping coefficient controlling wave crest decay. |
Key Features
- Phase-delayed vertical oscillation that ripples sequentially from the first glyph to the last.
- Secondary harmonic rebound (-0.45x crest) before settling at baseline.
- Screen-reader safe sr-only canonical string paired with aria-hidden visual glyphs.
Keyboard & Accessibility
- Exposes a single uninterrupted sr-only string for assistive technologies.
- Operable as a focusable button via Enter or Space keys.
- Suppresses transverse wave displacement when prefers-reduced-motion is active.