Gravity Letters React component
Brush a letter and it falls: letters drop with real gravity, bounce on the floor, then climb back to spell the word again.
About the Gravity Letters component
Gravity Letters lets people knock a heading apart. Brush past a letter and it falls with real gravity, spins off in the direction you pushed, bounces on the floor and rests for a moment before climbing back.
Everything returns to its place, so the word always comes back to being readable, and the space the letters fall into is reserved so nothing else on the page moves.
When to use it
Use it on playful pages like portfolios, 404 screens and event sites, where people have time to fiddle.
Skip it in serious interfaces, and for text people need to read straight away.
Installation
Add the Gravity Letters component to your project with the shadcn CLI. It lands in components/gravity-letters.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/gravity-lettersProps
<GravityLetters /> accepts 4 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| text | string | "Mind the drop" |
| drop How far below the text the letters can fall, in px. | number | 200 |
| reach How close the pointer has to come to knock a letter loose, in px. | number | 44 |
| rest Milliseconds a letter rests before it climbs back. | number | 1300 |
- textstringDefault: "Mind the drop"
- drop
How far below the text the letters can fall, in px.
numberDefault: 200 - reach
How close the pointer has to come to knock a letter loose, in px.
numberDefault: 44 - rest
Milliseconds a letter rests before it climbs back.
numberDefault: 1300
Gravity Letters FAQ
- How far do letters fall?
- drop sets it, in pixels, and the space is reserved below the text.
- How long until they come back?
- rest sets how long they stay on the floor, in milliseconds.
- Does it work on touch screens?
- No. Letters are knocked by the mouse, so on touch the text simply stays put.
- What about reduced motion?
- The letters stay where they are.
