Dot Grid
A dot-matrix background that leans away from the cursor, glows near it and ripples on every click.
Overview
A quiet grid of dots that comes alive under your hand. Dots inside the cursor’s radius are pushed outward and warm to the accent colour. Each is on its own spring, so the field settles smoothly when the pointer leaves. Clicks and taps send a ripple ring across the grid.
It costs nothing at rest. The animation loop only runs while something is moving and stops completely when the grid has settled. It is one canvas, DPR-aware and resize-aware, and with reduced motion it stays as a static grid.
Use it behind hero copy, empty states and sign-in screens where a little responsiveness makes the page feel alive.
When to use
- Hero areas and empty states that need atmosphere behind real content.
When not to use
- Behind long-form text, where motion competes with reading.
Installation
pnpm dlx shadcn@latest add https://sundaeui.dev/r/dot-grid.jsonnpx shadcn@latest add https://sundaeui.dev/r/dot-grid.jsonyarn dlx shadcn@latest add https://sundaeui.dev/r/dot-grid.jsonbunx --bun shadcn@latest add https://sundaeui.dev/r/dot-grid.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy dot-grid.tsx into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { DotGrid } from '@/components/sundae/dot-grid'
<DotGrid className="min-h-[60vh]" activeColor="#ea580c" gap={22}>
<Hero />
</DotGrid>Props
| Prop | Type | Default |
|---|---|---|
gapSpacing in px. | number | 22 |
dotColor / activeColorResting and active colours. | string | — |
radiusCursor influence radius. | number | 140 |
pushPush strength. | number | 14 |
rippleRipple on click or tap. | boolean | true |
autoplayA virtual pointer drifts on a figure-eight, for idle heroes and previews. | boolean | — |
childrenContent above the grid. | ReactNode | — |
Accessibility
- The canvas is aria-hidden decoration.
- No motion runs for reduced-motion users.
Customization
- Lower gap for a denser matrix. Raise radius for broader, softer reactions.
FAQ
- Is Dot Grid free?
- Dot Grid is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Dot Grid?
- Run npx shadcn@latest add https://sundaeui.dev/r/dot-grid.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Dot Grid support keyboard and screen readers?
- The canvas is aria-hidden decoration. No motion runs for reduced-motion users.
- Does Dot Grid respect reduced motion?
- Yes. With prefers-reduced-motion set, decorative motion is removed and state changes are instant.
More like this
All backgrounds →Ink Field
Backgrounds · Organic- Pro
Contour Field
Backgrounds · Editorial - Pro
Silk Shader
Backgrounds · Expressive Pulse KPI
Data · UnderstatedFold Accordion
Components · Understated- Pro
Bento Features
Sections · Understated