Interactive Grid
betaA grid of cells behind content that lights up around the pointer and fades out behind it, with ripples on a press — and, if you like, now and then by itself.
- Effects & motion
- 2 files
- 1 npm package
- Accessibility notes
- Draws on a canvas
- See it in Backgrounds
Loading the example…
pnpm dlx @dowel-ui/cli add interactive-gridnpm packages installed: class-variance-authority.
import { InteractiveGrid } from "@/components/ui/interactive-grid";Default
Idle Dots
<InteractiveGrid>
| Prop | Type | Default |
|---|---|---|
accentLit cell colour. Default "primary". | string | "primary" |
cellDistance between cells, in CSS pixels. Default 28. | number | 28 |
cellSizeEach cell's size as a share of the pitch, 0.1–1. Default 0.18. | number | 0.18 |
colorResting cell colour: a token or any CSS colour. Default "border". | string | "border" |
decayHow quickly lit cells fade, 0–1. Default 0.9. | number | 0.9 |
fade | "none" | "edges" | "bottom" | "none" |
idleStart a ripple now and then by itself. Default false. | boolean | false |
interactiveRespond to the pointer and to presses. Default true. | boolean | true |
radiusHow far the pointer's light reaches, in CSS pixels. Default 140. | number | 140 |
shapeSquares or dots. Default "square". | "square" | "dot" | "square" |
Plus every attribute of <div>.
Pure decoration: the canvas is aria-hidden and ignores the pointer, which is tracked on the root without capturing events, so content inside keeps its roles, focus order and hit areas, and nothing depends on the effect. It draws only while something is moving and pauses off-screen and in hidden tabs. Under reduced motion the highlight follows the pointer directly with no trail, presses make no ripples, and idle ripples never start.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes