Proximity Grid

A block of dots that feels your cursor: inside the influence radius they bloom into rounded squares, brighten, and get magnetically pulled toward the pointer with a smooth eased falloff. Flip the magnet negative and the grid repels instead.

Feels like

Hover/Magnet/Spring

Built with

React 19Tailwind v4

Steal it

npx shadcn@latest add https://1iad.com/r/proximity-grid

One self-contained file. Paste the prompt into your AI agent and it does the rest.

Good to know

No config. Nothing to set up beyond Tailwind.
Respects prefers-reduced-motion out of the box.
Sound and haptics only fire after a user gesture.

Credits

Built in public by Sunny JoshiMIT licensed. Free to steal.

Back

Proximity Grid

A block of dots that feels your cursor: inside the influence radius they bloom into rounded squares, brighten, and get magnetically pulled toward the pointer with a smooth eased falloff. Flip the magnet negative and the grid repels instead. Install: npx shadcn@latest add https://1iad.com/r/proximity-grid

Live tuner

Proximity

How the grid feels the cursor. Flip Magnet negative to repel.

Columns13

Rows9

Influence170px

Magnet12px

Scale5×

Radius30%

Resting0.5

Spacing36px

Proximity Grid005