Magnetic Filings

Magnetic Filings is a WebGL cursor effect for Framer. It fills any frame with a grid of tiny iron filings that drift in a slow noise flow, then snap into a magnetic field around the cursor: they lengthen, light up and line along the field lines as the pointer moves. Pick a dipole, attract or orbit field, click to send a pulse ring through the grid, and let it drift on its own when nobody is moving the mouse. The background can be transparent, so it sits behind any hero, card or section.

Customizations

• Field: mode (Dipole, Attract, Orbit), radius, strength, inertia (how far the field lags behind the cursor)

• Filings: shape (Needle or Line), spacing, rest length, active length, thickness

• Colors: background (transparent works), filing color, active color, glow; accepts hex, rgb/rgba and color tokens

• Motion: trigger (Cursor + Idle Drift, Cursor Only, Ambient, Scroll), idle delay, flow speed, click pulse on or off, pulse power

• Reduced motion: Respect (no ambient animation or pulses, the field still follows the cursor) or Ignore

• Performance: pauses when off screen or in a background tab, caps pixel density, and shows a styled SVG version on the Framer canvas and in static renders

Use cases

• Interactive hero backgrounds for portfolios, studios and product launches

• Science, engineering, energy and hardware landing pages

• Cursor playgrounds and "move your mouse" moments on About or 404 pages

• Ambient section backgrounds that keep moving with no cursor at all

• Scroll-driven feature sections where the field travels as the page scrolls