Reactive Dots

This interactive dot grid adds a subtle motion touch to any layout. Each dot anchors to its grid position but shifts smoothly when the cursor moves nearby. The effect uses velocity, damping, and smoothing for a natural response that feels organic without overwhelming the design. It supports circles, squares, and diamond shapes, plus a complete prefers reduced motion check for accessibility. Keyboard arrows can move a virtual cursor, keeping the experience interactive for all users.

The component renders fully in SVG, scales with any frame size, and auto recalculates the grid on resize. It works in both static and interactive rendering, making it reliable in production.

Key features

• Adjustable dot size and spacing

• Circle, square, or diamond shapes

• Smooth repulsion physics with velocity and damping

• Reduced motion detection for accessibility

• Keyboard navigation using arrow keys

• Fully responsive SVG grid

• Automatic grid recalculation on resize

• Background color control

• Clean performance with requestAnimationFrame

Best for

• Hero sections with soft motion

• Minimal landing pages that need subtle interaction

• Background textures behind headers or cards

• Portfolio visuals for tech or creative work

• Gradual interactive reveal effects

• Motion-enhanced UI elements without heavy animation

Where to use

• Framer landing pages

• SaaS hero headers

• Personal portfolio intros

• Interactive art sections

• Backgrounds that need motion without distraction