Dot Grid
hotA matrix of spring-loaded dots that bulge away from (or toward) the pointer and wobble back into place. Clicking sends a shockwave rolling through the grid.
canvasspringspointerclick5 files · 414 locdeps: clsx, tailwind-merge
Installation
With the shadcn CLI, pointing at this platform’s registry:
npx shadcn@latest add https://opusui.131199999.xyz/r/dot-grid.jsonOr offline, straight from your opus55 checkout (copies every file it needs):
node ../tailwind_component/opus55/scripts/add.mjs dot-gridUsage
import { DotGrid } from "@/components/opus/backgrounds/dot-grid";
<DotGrid className="absolute inset-0" />API
| Prop | Type | Default | Description |
|---|---|---|---|
| color / activeColor | string | — | Resting and excited dot colours. |
| gap / size | number | 26 / 1.6 | Grid pitch and dot radius (px). |
| radius | number | 140 | Pointer influence radius (px). |
| mode | "push" | "pull" | "push" | Direction of the pointer force. |
| stiffness | number | 0.08 | Spring stiffness — lower is jelly. |
| shockwave | boolean | true | Click sends a ring through the grid. |
| interactive | boolean | true | React to the pointer (tracked on window). |
| className | string | — | Wrapper classes — `absolute inset-0` to fill a relative parent. |
| children | ReactNode | — | Optional content rendered above the canvas. |
Notes
- Canvas 2D with a device-pixel-ratio aware backing store (capped at 2×).
- The animation loop stops off-screen and in hidden tabs; resize re-seeds the scene.
prefers-reduced-motion: reducedraws a single static frame.