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

  • colorA

    Color of filings resting quietly, aligned and still

    Type
    string
    Default
    #be1ef9

  • colorB

    Color filings flash toward as they swing and settle — a wave of it follows the moving magnet

    Type
    string
    Default
    #6326ff

  • colorSpace

    Color space for the rest→excited color ramp

    Type
    "linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"
    Default
    oklab

  • shape

    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

    Type
    "arrow" | "streak" | "dot" | "square" | "glow"
    Default
    dot

  • count

    Number of iron filings

    Type
    number
    Default
    8000

  • size

    Size of each filing

    Type
    number
    Default
    1

  • restOrientation

    Which way filings point where the field can't reach them — randomly, all horizontal, or all vertical

    Type
    "random" | "horizontal" | "vertical"
    Default
    random

  • fieldType

    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)

    Type
    "dipole" | "radial"
    Default
    dipole

  • strength

    How strongly the magnet grips the filings — higher snaps more of them into sharp alignment

    Type
    number
    Default
    1.7

  • reach

    How far the magnet's influence spreads (in screen heights) — larger reveals more of the field at once

    Type
    number
    Default
    0.6

  • response

    How briskly filings swing and settle — low is loose and floppy with a long wobble, high snaps into place quickly

    Type
    number
    Default
    0.5

Usage

<Shader>
  <MagneticFilings />
</Shader>