Ballpit

Interactive balls with custom colors and physics

Pumki UI

Ballpit Demo

Interactive balls with custom colors and physics

import Ballpit from '@/components/pumki-ui/animations/ballpit.tsx';

1<Ballpit />

Prop	Type	Default	Description
`className`	`string`	`""`	Custom CSS classes for the canvas element.
`followCursor`	`boolean`	`true`	If true, the largest ball follows the mouse or touch position.
`count`	`number`	`200`	Number of balls in the simulation.
`colors`	`number[]`	`[0, 0, 0]`	Array of colors for the balls (as numbers).
`ambientColor`	`number`	`0xffffff`	Ambient light color.
`ambientIntensity`	`number`	`1`	Ambient light intensity.
`lightIntensity`	`number`	`200`	Point light intensity.
`minSize`	`number`	`0.5`	Minimum ball size.
`maxSize`	`number`	`1`	Maximum ball size.
`size0`	`number`	`1`	Size of the largest ball (the one that follows the cursor).
`gravity`	`number`	`0.5`	Gravity strength.
`friction`	`number`	`0.9975`	Friction factor for ball movement.
`wallBounce`	`number`	`0.95`	Bounciness when balls hit the wall.
`maxVelocity`	`number`	`0.15`	Maximum velocity for balls.
`maxX`	`number`	`5`	Horizontal boundary for ball movement.
`maxY`	`number`	`5`	Vertical boundary for ball movement.
`maxZ`	`number`	`2`	Depth boundary for ball movement.