LetterDrop

Letters that fall in from above and land with a small bounce.

Drop it like it's hot

bash
npx shadcn@latest add https://www.rad-ui.com/r/letter-drop.json

React
import LetterDrop from "@/components/fx/letter-drop"

<LetterDrop as="h2" text="Drop it like it's hot" />

The text is read once from a visually hidden copy; the falling letters are aria-hidden.
Words never break mid-word while animating.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) shows the text in place.

Prop	Type	Default	Description
text	string	—	The text.
as	'p' \| 'span' \| 'div' \| 'h1' \| 'h2' \| 'h3' \| 'h4'	'span'	Element to render.
stagger	number	45	Milliseconds between letters.