Ballast
A physics ballpit background in sea-glass celadon: frosted spheres pour in from a corner and drift under low gravity like objects underwater, jostling softly while the pointer stirs gentle currents. Instanced rigid bodies, DPR-clamped, offscreen-paused, reduced-motion-safe.
r3fpro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/ballastManual — install dependencies, then copy the source
npm install three @react-three/fiber @react-three/rapier @react-three/postprocessingProps
| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | 30 | How many sea-glass spheres drift in the tank (plus one oversized "keystone" sphere that anchors the composition). Rendered as a single instanced draw call. |
| colors | string[] | a tight celadon-to-glaucous sea-glass ramp so the pit reads as one material in many sizes, not a rainbow ballpit | Palette of hex colors, assigned per sphere. |
| gravity | number | 1 | Gravity multiplier. 1 = the default dreamy underwater sink; push toward 3 for a snappier pit, toward 0.3 for near-weightless drift. |
| drift | number | 1 | Strength of the ambient current that keeps the spheres slowly circulating (0 lets them settle completely). |
| intensity | number | 1 | Master brightness for lights and highlight bloom. |
| interactive | boolean | true | Enable pointer stirring — the cursor is an invisible paddle with gentle force. Automatically disabled on touch / coarse-pointer devices. |
| paused | boolean | false | Freeze the simulation with the spheres in a settled, aesthetic pile. Also forced on when the user prefers reduced motion. |
| className | string | Extra classes for the wrapper. Positioned absolute inset-0 -z-10. |
Honors prefers-reduced-motion with a designed static fallback, pauses offscreen and on hidden tabs, and passes className through.