# Gravity Text

> 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.

Category: Text · MotionKit Plus · Updated 2026-10-26 · Live demo: https://www.motionkitui.com/components/gravity-text

## When to use it

Playful headlines for consumer apps, games, kids' brands and creative studios, 404 pages and launch moments that should make people smile.

## How it works

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.

## Installation

Part of MotionKit Plus (https://www.motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/gravity-text` after adding their registry token from https://www.motionkitui.com/account.

## Props

| 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. |

## Accessibility

- **Keyboard: Not applicable.** A heading, nothing to focus.
- **Screen readers: Pass.** The heading has the whole word as its label, so it's read once, not letter by letter.
- **Reduced motion: Pass.** With reduced motion on, the letters sit in place and the pointer leaves them alone.
- **Colour contrast: Pass.** Settled letters measure 17:1 in ivory.