Dot Field
An interactive dot-grid background that reacts to the cursor.
Dot Field is a canvas dot grid for hero and section backgrounds. Dots near the pointer swell and light up in the signal color, and a click sends a ripple across the field. It reads your theme tokens, stays sharp on retina screens and pauses when off screen.
Preview
The background answers back.
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/dot-field.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/dot-field.
Builds on: motion
Usage
import { DotField } from "@/components/ui/dot-field";
<DotField className="h-96">…hero content…</DotField>Motion
A canvas loop (paused off screen) reacts to the pointer and click ripples.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
DotField
| Prop | Type | Default | Description |
|---|---|---|---|
| gap | number | 22 | Grid spacing (px). |
| radius | number | 120 | Pointer influence radius. |
| ripple | boolean | true | Click ripples. |
Accessibility
- The canvas is aria-hidden; children render normally above it.
- With reduced motion or --cl-motion: 0 the effect stays still and the content remains fully usable.
FAQ
Also searched as: interactive background react · dot grid background · cursor effect background · canvas background animation · dot pattern