Magnetic Dots Background

What This Is

A canvas-based animated background where:

• Dots sit on an angled grid and drift with a sinusoidal flow field
• The mouse exerts magnetic attraction — dots pull toward the cursor
• Clicking sends expanding ripple waves outward from the click point
• Multiple ripples can exist simultaneously and interact
• Dark mode: white dots. Light mode: semi-transparent gray dots
• Responds to window resize automatically

This is the aesthetic: minimal, achromatic, motion-heavy surface beneath sparse editorial content. The motion does the talking.

Source Project

Reference: /Users/michael/work/laniameda/portfolio-websites/magnetic-dots/ Stack: Next.js 16, Tailwind CSS v4, shadcn/ui, React 19