Letters drop in one after another, land with a real bounce and wobble upright. Sweep the cursor through them to knock them into the air.
Customize
Usage
import { GravityText } from "@/components/motionkit/gravity-text";
<GravityText text="Gravity" className="text-8xl font-bold" />Motion
The exact curves this component runs, plotted with Motion's own maths.
Drop and bounce
Scrolls into view
Righting the tilt
Each landing
Playful headlines for consumer apps, games, kids' brands and creative studios, 404 pages and launch moments that should make people smile.
Each letter is an inline block with a tiny physics body: a height above its resting place, a speed and a tilt. When the heading scrolls into view they're released one after another; gravity pulls them down, the baseline acts as the floor, and each landing reverses the speed and keeps only the bounce fraction. A damped spring rights the tilt. Moving the pointer through settled letters flicks them up, harder the faster you move, and the loop stops itself once everything is still. Transforms are written directly, so React never re-renders mid-flight.
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | The heading. |
| gravity | number | 2600 | Pixels per second squared. |
| bounce | number | 0.42 | Bounce kept after each landing, 0 to 1. |
| interactive | boolean | true | Let the pointer knock letters up. |
| as | ElementType | "h2" | The element to render. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Only the motion package, beside React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/gravity-text. It saves the file to components/motionkit and installs its dependencies.
Gravity Text is part of MotionKit Plus (£12 / $15 / €14 a month or £96 / $120 / €112 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, the letters sit in place and the pointer leaves them alone.
Wave Text
Letters lift and settle one after another, like a wave running through the word: on hover, or as a gentle loop.
Morphing Text
Rotates through a list of words, letters rising in and drifting out.
Rolling Text
On hover, each letter rolls over on a little 3D cube to reveal a fresh copy, one after another. Made for links and buttons.
Customize
Usage
import { GravityText } from "@/components/motionkit/gravity-text";
<GravityText text="Gravity" className="text-8xl font-bold" />Motion
The exact curves this component runs, plotted with Motion's own maths.
Drop and bounce
Scrolls into view
Righting the tilt
Each landing
The live preview is free to explore. Plus unlocks the source for Gravity Text and every other premium component.