Shader Atlas
한국어
⌖ Interactive

Magnetic Filings

자기장 철가루

Iron-filing-like marks align around the pointer and reveal the field’s shape.

Also known as: MagneticFilingsiron filingsmagnetic field visualization

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

React
// Renders only in browsers with WebGPU.
import { Shader, MagneticFilings } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <MagneticFilings />
    </Shader>
  )
}
Vue
<!-- Renders only in browsers with WebGPU. -->
<script setup lang="ts">
import { Shader, MagneticFilings } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <MagneticFilings/>
  </Shader>
</template>
Svelte
<!-- Renders only in browsers with WebGPU. -->
<script>
  import { Shader, MagneticFilings } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <MagneticFilings />
</Shader>
Solid
// Renders only in browsers with WebGPU.
import { Shader, MagneticFilings } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <MagneticFilings />
    </Shader>
  )
}
JavaScript
// Renders only in browsers with WebGPU.
// expects <canvas id="canvas" style="width:100%;height:320px"></canvas> on the page
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'MagneticFilings',
    }
  ]
}, { disableTelemetry: true })

Props · MagneticFilings

Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).

NameValueDefaultRange / optionsDescription
colorARest Color#be1ef9—Color of filings resting quietly, aligned and still
colorBExcited Color#6326ff—Color filings flash toward as they swing and settle — a wave of it follows the moving magnet
colorSpaceColor Spaceoklablinear · oklch · oklab · hsl · hsv · lchColor space for the rest→excited color ramp
shapeShapedotarrow · streak · dot · square · glowHow 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
countCount8000500 – 12000 (step 500)Number of iron filings
sizeSize10.5 – 3 (step 0.05)Size of each filing
restOrientationRest Orientationrandomrandom · horizontal · verticalWhich way filings point where the field can't reach them — randomly, all horizontal, or all vertical
fieldTypeField Typedipoledipole · radialThe 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)
strengthStrength1.70 – 3 (step 0.01)How strongly the magnet grips the filings — higher snaps more of them into sharp alignment
reachReach0.60.1 – 1 (step 0.01)How far the magnet's influence spreads (in screen heights) — larger reveals more of the field at once
responseResponse0.50 – 1 (step 0.01)How briskly filings swing and settle — low is loose and floppy with a long wobble, high snaps into place quickly

Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Boids보이드 군집

Small agents flock, split, and merge while approaching or avoiding the pointer.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Particle Flow파티클 플로

Small particles drift like dust, following cursor-stirred currents and eddies.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Floating Particles부유 입자

Drifting, twinkling motes — thousands of real simulated particles floating in a shared heading with per-particle wander and variance, and a cursor that stirs the field with a gust that settles back into the drift.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Reaction Diffusion반응-확산

Coral-like patterns grow across the layer and bloom where the pointer drags.

Small iron-filing-like marks turn to align with a magnetic field around the pointer. It resembles iron filings forming curved lines when a magnet moves beneath a sheet of paper.

`count` sets the number of filings (default 8000, range 500–12000), `shape` chooses their appearance (default `dot`), and `fieldType` chooses the field pattern (default `dipole`). `strength` controls how firmly they align (default 1.7, range 0–3); `reach` controls how far the field spreads (default 0.6, range 0.1–1).

This generator draws on its own and needs no input image. A plain background keeps the field lines visible; dense filings can compete with small text and thin lines, so keep them in decorative areas.

When to use

Use it for a magnetic-field hero, pointer-responsive science content, or decoration that shows particle direction. Avoid it behind dense text or thin chart lines.

Open as page ↗