Browse components
Gravity
Drops any elements into a real physics box where they tumble, stack, and can be grabbed and thrown.
Installation
npx shadcn@latest add @glint-ui/gravityFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/gravity.json
Usage
import { Gravity } from "@/components/ui/gravity";
<Gravity className="h-96">
<span className="rounded-full bg-lime-300 px-5 py-2">React</span>
<span className="rounded-full bg-cyan-300 px-5 py-2">Physics</span>
</Gravity>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Each direct child becomes a physics body. |
| gravity | number | 1 | Downward gravity; negative floats things up. |
| bounce | number | 0.35 | Restitution, 0 = dead stop, 1 = superball. |
| friction | number | 0.2 | Surface friction between bodies. |
| startOnView | boolean | true | Wait until the container scrolls into view before dropping. |
| className | string | — | Extra classes for the root element. |