Iron Filings

A grid of short lines drawn on a canvas. Each one turns to face the pointer and shortens with distance, so the field reads like filings around a magnet. It is about 200 lines of plain JavaScript, sized to its container and redrawn on resize, with nothing else behind it.

It runs only while it is on screen: an IntersectionObserver stops the loop when the section scrolls out, and the field eases back to rest when the pointer leaves. Density, line length, colour and stiffness are constructor options. On a touch screen it drifts slowly on its own rather than chasing a finger.

Meant as a hero background or a section divider on a studio, developer or product page, sitting behind text rather than in front of it. It is the wrong choice if the page already does heavy canvas work, or if you need the motion to respond to specific elements — it knows about the pointer and nothing else. Under prefers-reduced-motion it draws one static frame and never starts the loop.