Interactive Dot Grid

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

Refund Policy:

Due to the digital nature of my products, all sales are final, and refunds will not be issued. Please review all product details carefully before purchasing. If you have any questions or need clarification, feel free to reach out before completing your order.

🛠️ Support

If you have any issues, feel free to reach out:
📧 Email: mehrajdesign@gmail.com