Three balls of different colors bounce out of phase, squashing on impact above a soft ground shadow.
Lobby · Ranked duo
npx shadcn@latest add https://hyperblur.dev/r/loader-bouncing-balls.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-bouncing-balls.tsx.
import { LoaderBouncingBalls } from "@/components/hyperblur/loader-bouncing-balls"
<LoaderBouncingBalls size={48} label="Finding players" />| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 44 | Height of the bounce area in pixels. Ball size is about a quarter of it. |
| color | string | "#2f7bff" | Color of the first ball. |
| accent | string | "#7fb3ff" | Color of the second ball. |
| tint | string | "#ff6b9a" | Color of the third ball. |
| speed | number | 0.9 | Seconds for one bounce. |
| label | string | Visible caption under the loader. Without it, Loading is announced to screen readers only. |