Springy Text
Words fall into place with individual spring physics on scroll enter, drop away downward on exit.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/springy-text.json▸ Or install manually
- Install dependencies:
pnpm add motion - Copy the source from the Code tab above.
- Place it at
components/mellow/springy-text.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | The text to animate. |
| as | "h1" | "h2" | "h3" | "h4" | "p" | "h2" | Element type used for the wrapper. |
| wordClassName | string | — | Class name applied to each word wrapper. |
| letterClassName | string | — | Class name applied to each letter wrapper. |
| staggerDelay | number | 15 | Stagger delay between letters in milliseconds. |
| enterFrom | "top" | "bottom" | "top" | Direction letters enter from. |
| exitTo | "bottom" | "top" | "bottom" | Direction letters exit to. |
| once | boolean | false | If true, entrance animation only runs once. |
| threshold | number | 0.3 | Viewport threshold for triggering in-view animation. |
| className | string | — | Additional CSS classes applied to the wrapper element. |