Falling Text
Text animation where characters drop under gravity and bounce into place, with configurable gravity, bounce, and trigger.
Each character falls from above, bounces off the baseline according to a restitution coefficient, and settles into place once its energy runs out — a pure physics simulation that writes transforms frame by frame without triggering a React re-render.
npx shadcn@latest add https://webberui.com/r/falling-text.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<FallingText />
Installation
npx shadcn@latest add https://webberui.com/r/falling-text.jsonOr, once registries are configured in components.json, install it as @webberui/falling-text.
Usage
import { FallingText } from "@/components/ui/falling-text";
<FallingText text="Gravity wins." className="text-5xl font-bold" />Because the characters sit directly above their resting position before settling, put it inside a bounded container with enough height and overflow-hidden (for example h-[320px]) so nothing falls out of view.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | — | The text to animate |
by | "char" | "word" | "char" | Split unit |
trigger | "view" | "auto" | "hover" | "view" | When it is triggered: entering the viewport, playing on mount, or mouse enter |
gravity | number | 2200 | Gravitational acceleration (px/s²); larger falls faster |
bounce | number | 0.4 | Restitution coefficient on landing (0–1); larger bounces higher |
stagger | number | 0.05 | Interval between units starting to fall (seconds) |
fallHeight | number | 220 | Starting height: how many px above the resting position the fall begins |
rotate | boolean | true | Add a random tilt while falling, straightening out once settled |
once | boolean | true | Play only the first time it is triggered |
Accessibility
- When the user has "reduce motion" enabled at the system level, the text renders statically
- The complete string is exposed
sr-onlyfor assistive technology to announce, and the split units are markedaria-hidden