ComponentsPhysics
Letter drop
Letters fall, bounce and settle on the floor.
Installation
$ npx shadcn@latest add @textlab/letter-dropNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { LetterDrop } from "@/components/textlab/letter-drop/letter-drop";
<LetterDrop as="h2" text="Gravity" variant="pile" />Variants
droppiletossProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "drop" | "pile" | "toss" | "drop" | Fall straight and bounce, tumble and land askew, or also fling up on click or tap. |
| height | number | 2.2 | Fall height in em. |
| restitution | number | 0.45 | Bounciness, 0 to 0.9. |
| as | ElementType | "span" | Rendered element. |
| trigger | "mount" | "inView" | "manual" | "inView" | What starts the animation. manual follows `active`. |
| active | boolean | false | Drives trigger="manual". |
| once | boolean | true | In view: play once instead of on every entry. |
| stagger | number | 0.06 | Seconds between parts. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
When to use it
Reach for it
- Playful launches, games and kids' products.
- A single word that should land with weight.
Skip it
- Serious contexts.
- Long sentences; each letter is a body.
Accessibility and motion
Accessibility
- Letters are aria-hidden; the word is read once.
- Toss works with click and tap; it is a bonus, never needed to read the word.
Motion
- Real gravity with energy lost on every bounce.
- Pile letters spin as they fall and settle up to 8 degrees off true.
Reduced motion. The word sits on the baseline from the start.
Performance
- One frame loop that stops once every letter has settled.