Ballpit
A pit of colorful balls under gravity that scatter away from the cursor.
canvasphysicsinteractive
Styled with ONONC's design tokens — shadcn add installs them for you.
Customize
Balls
Balls40
Ball size18px
Physics
Gravity1
Bounce0.75
Cursor force1
Appearance
Color 1
Color 2
Color 3
Gloss0.7
Props
| Prop | Type | Default | Description |
|---|---|---|---|
count | number | 40 | Number of balls (capped at 80). |
gravity | number | 1 | Downward gravity strength (0 = weightless). |
bounce | number | 0.75 | Bounciness of walls + collisions (0 = dead, 1 = elastic). |
size | number | 18 | Base ball radius in px. |
pointerForce | number | 1 | How hard the cursor shoves nearby balls. |
colors | string[] | brand spectrum | Ball colors as r,g,b. |
gloss | number | 0.7 | Glossy top-lit shading strength (0–1). |
children | ReactNode | — | Content layered above the canvas. |
className | string | — | Extra classes for the wrapper. |