Dot gridPro
A dot field that bulges around the cursor like a lens and ripples from every click.
Live · keyboard ready
Interfaces with a pulse
Components that answer every move.
- A landing page hero that should feel alive without video.
- A background for an empty state, a sign in panel, or a launch countdown.
- A playful section divider people can poke at.
- Behind dense text or data; the moving dots compete with reading.
- Use a static CSS dot pattern when no interaction is wanted.
- Avoid stacking several on one screen; one reactive background is enough.
Installation
Pro source and install commands unlock with a Pro plan.
example.tsx
import { DotGrid } from "@/registry/components/dot-grid/dot-grid"; export function Hero() { return ( <DotGrid style={{ height: 480 }}> <h1>Interfaces with a pulse</h1> </DotGrid> );}DotGrid
A canvas field of dots that bulge away from the pointer like a lens, wobble back on a spring, and ripple outward from every click. Content placed inside sits on top and stays interactive.
PropTypeDefaultDescription
gapnumber22Distance between dots in px. Lower is denser.dotSizenumber1.4Dot radius in px at rest.radiusnumber150Lens radius around the pointer in px.strengthnumber16How far dots are pushed at the strongest point of the lens, in px.ripplebooleantrueClicks and taps send a ripple through the field.fadebooleantrueFades the field toward its edges.colorstring–Dot color at rest. Defaults to the strong border token.activeColorstring–Color dots take under the lens and in ripples. Defaults to the accent token.childrenReactNode–Content drawn over the field, such as a hero headline.classNamestring–Class on the root. Give it a height or let children size it.styleCSSProperties–Inline style on the root.- The canvas is aria-hidden and not focusable; the field is decoration and adds nothing to the reading order.
- Children render as normal DOM above the canvas, so links and buttons keep their semantics and pointer events.
- With reduced motion dots never move; the lens only tints dots near the pointer and clicks do not ripple.
- Each dot rides its own damped spring toward the lens and ripple offsets, so the field wobbles and settles instead of snapping.
- The lens peaks a third of the way out and fades to nothing at its rim, and it trails the pointer slightly and fades in and out.
- Ripples travel at about 620px per second, fade over 1.5s, and up to six can overlap.
- Dots under the lens and in a ripple grow and take the active color.
- The grid rebuilds on resize and centers itself in the box.
- On touch screens the lens appears only while a finger is down, and every tap ripples.
- Device pixel ratio is capped at 2.
- Dot state lives in typed arrays; resting dots draw in a single path fill.
- The loop stops when the pointer leaves and all dots settle, and pauses when the field is off screen.
- A 720 by 420 field at gap 22 is about 650 dots; gap 14 is about 1,600.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Choose it as a hero or section background that reacts to the visitor.
- Put the headline and actions inside as children; the field listens to the pointer across the whole root.
- Raise gap for large areas and low powered devices; 22 to 32 suits full width heroes.
- Pass color and activeColor to match a brand; any CSS color works, including var() values resolved on the root.
The full library index for assistants is at /llms.txt.