A grid of dots that sends a wave out from wherever you click. Distance does the choreography.
pnpm dlx shadcn@latest add @latheui/ripple-gridPart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Ripple Grid is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
Also accepts native button attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | number | 9 | Dots across. |
| rows | number | 7 | Dots down. |
| color | string | "var(--chart-4)" | Color of the dots. Any CSS color. |
| dotSize | number | 11 | Size of each dot, in pixels. |
| spacing | number | 28 | Distance between dot centers, in pixels. |
| autoPlay | boolean | true | Send one wave out from the middle as the grid mounts. |
| label | string | "Send a ripple" | Accessible name of the grid's button. |
Clicks from code have no position, so they start in the middle.
const ref = React.useRef<HTMLButtonElement>(null)
React.useEffect(() => {
const timer = setInterval(() => ref.current?.click(), 3000)
return () => clearInterval(timer)
}, [])
<RippleGrid ref={ref} />