The GravityTextSwap component drops characters into place under a gravity-like fall, so one word gives way to the next instead of simply being replaced.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/gravity-text-swap.jsonEverything Gravity Text Swap accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| textArray | string[] | No default | Array of strings to animate between |
| duration | number | 0.5 | Duration of each word's animation (in seconds) |
| pauseDuration | number | 2 | Duration to pause on each word before transitioning (in seconds) |
| className | string | '' | Additional CSS classes for styling |