Ballpit
Glossy balls piled up under gravity, bouncing off each other and the frame. Move the pointer through them to shove them around. Canvas 2D with simple physics.
import { Ballpit } from "pleate/effects/ballpit";Behind a title
Move the pointer over the frame.
Jump in
Props
- colors
CSS colors, tokens included. Missing entries use the default.
string[]default [accent, accent +120°, fg, accent -120°]- speed
Playback speed multiplier.
numberdefault 1- scale
Pattern size; above 1 is bigger.
numberdefault 1- count
Number of balls.
numberdefault 60- gravity
Gravity in px/s². Zero lets them float.
numberdefault 900- bounce
Bounciness, 0 to 1.
numberdefault 0.6- interactive
React to the pointer over the parent element.
booleandefault true
Accessibility
- Decorative: the canvas is aria-hidden and ignores pointer events, so content above it stays clickable.
- Fills its parent: give it absolute inset-0 inside a positioned element, with the text on top.
- Pauses off screen and in hidden tabs. Without WebGL2 it renders nothing, so keep a background color on the parent.
- Reduced motion draws one still frame with the pile already settled.