Introducing v3 — a new editor, faster engine, and more.

See what's new

Documentation

Documentation Components

MagneticFilings

Thousands of tiny iron filings scattered on paper that swing to align with a magnetic field around the cursor, tracing out the field lines — a dipole whose axis follows the cursor's motion draws the classic two-lobed swirl, and every sweep of the magnet sends a glowing wave of filings flipping and settling

Props

colorAstring
Default:#be1ef9
Color of filings resting quietly, aligned and still
colorBstring
Default:#6326ff
Color filings flash toward as they swing and settle — a wave of it follows the moving magnet
colorSpace"linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"
Default:oklab
Color space for the rest→excited color ramp
shape"arrow" | "streak" | "dot" | "square" | "glow"
Default:dot
How each filing is drawn — a slim streak or arrow reads as a compass needle, a box as a chunky filing, a dot or soft glow for a finer grain
countnumber
Default:8000
Number of iron filings
sizenumber
Default:1
Size of each filing
restOrientation"random" | "horizontal" | "vertical"
Default:random
Which way filings point where the field can't reach them — randomly, all horizontal, or all vertical
fieldType"dipole" | "radial"
Default:dipole
The magnetic field the filings reveal — a dipole (bar-magnet lobes that follow the cursor's motion) or a radial monopole (spokes out from the cursor)
strengthnumber
Default:1.7
How strongly the magnet grips the filings — higher snaps more of them into sharp alignment
reachnumber
Default:0.6
How far the magnet's influence spreads (in screen heights) — larger reveals more of the field at once
responsenumber
Default:0.5
How briskly filings swing and settle — low is loose and floppy with a long wobble, high snaps into place quickly

Usage

<Shader>
  <MagneticFilings />
</Shader>
Previous
Liquify
Next
Marble