Backgrounds
Background - Dot field
A canvas grid of dots that brighten, swell, and part around the cursor.
- Canvas
- Cursor proximity
- 60fps grid
Customize
Drag a slider and watch the preview respond live. Every control maps to a typed prop - what you tune is what you ship.
How the animation works
A regular grid of small dots is drawn on a canvas and repainted every frame. For each dot the component measures its distance to the cursor and brightens and enlarges the ones nearby, so a soft glowing pocket follows the pointer across the field. Drawing to canvas rather than DOM nodes keeps the grid smooth at 60fps even with hundreds of dots.
When to use it
- Behind an interactive hero where you want the background to react to the visitor
- On a developer-tool or technical product page that suits a precise grid motif
- As a section background that rewards mouse movement without distracting from content
Props you can tune
Every prop below is live in the studio above and ships typed with the component.
- 18-56px
gapDot spacing - 60-260px
radiusCursor reach
Related components
Using this block
Buy it, then copy components/blocks/bg-dot-field/index.tsx into your project. A single file - no new dependency beyond the Framer Motion + Tailwind you already have.