Filings

A hero, a divider, a 404 or a call-to-action backdrop that behaves like the physics-class demonstration: the brand name is not drawn, it is what the iron does in the field of a word-shaped magnet, and the visitor can slide a magnet under the sheet and watch the field redraw itself.

Copy the filings folder from its package next to your page, link its stylesheet and construct it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="filings/filings.css">
<div id="filings" style="width: min(92vw, 1100px); aspect-ratio: 1100 / 420; min-height: 260px; border-radius: 6px; overflow: hidden; background: #e6dfd0; box-shadow: 0 1px 2px rgb(40 30 10 / 0.25), 0 14px 40px -18px rgb(40 30 10 / 0.45)"></div>

<script type="module">
  import Filings from './filings/filings.mjs';

  const filings = new Filings(document.getElementById('filings'), {
    text: 'FIELD',
    form: 'filled',
    density: 150,
  });

  // filings.update({ … });   change any option in place
  // filings.destroy();        and take it away again
</script>

new Filings(element, options)

Builds it inside the element with these options.

update(opts = {})

Change options in place.

shake(amount = 1)

Tap the whole sheet: the paper lets go for a moment and the field wins.

tap(nx, ny, amount = 1)

Tap one spot, given as fractions of the sheet.

power(level)

Switch the word's magnet on by level (0 off … 1 full) and loosen the paper a little so the iron can follow: at 0.3 the word is a rumour in the scatter, at 1 it is written.

replay()

Sprinkle fresh filings and run the opening sweep again.

magnetAt(nx, ny, { pressed = false, turn } = {})

Put the hand magnet under the sheet at fractions of it (null takes it away).

state

destroy()

Stops it and cleans up after it.

1. ScatteredBefore the opening sweep: a seeded, reproducible sprinkle of filings at random angles on a warm sheet.
2. Opening sweepOnce, when the sheet first comes into view: a magnet is lowered in beyond one edge, crosses in about 2.6 s and is lifted away; the word switches on behind it and the iron leaves a moat round it and piles onto its strokes.
3. Formed and asleepEvery filing held by the paper's static friction; the loop has stopped and the canvas is not repainted. The arrangement stays exactly where it is.
4. Filled or outline lettersThe word's magnet sits at a depth measured in its own stroke widths. Filled (the default): the field peaks along every stroke and the iron fills the letters with standing slivers. Outline: a shallow magnet, the iron bristles along the edges and the middles stay scattered.
5. Magnet hoveringThe pointer is a bar magnet a little below the sheet: filings within reach swing onto its field lines; close up its pull is gentle, so the word is not dragged apart.
6. Magnet pressedMouse down, or a touch held still for 220 ms: the magnet is against the paper, stronger and closer, and drags iron into tufts at its poles. The wheel turns it while it is held.
7. Lifted awayWhen the magnet leaves, a gentle tap lets the word take back the iron still within its reach, and the sheet settles and sleeps.
8. Shakenshake() or the preview's button: the paper lets go for a moment, every filing jostles, and the field wins. The word re-forms however disturbed it was.
9. Fixed polesThe dipole or quadrupole preset: the classic arcs from north to south, tufts standing at the poles, the field-free cross of the quadrupole.
10. Off screen or hiddenThe loop pauses; a tab returning with a long frame gap advances one clamped 1/30 s frame.
11. Reduced motionNo sweep and no loop: the sheet is run to rest off screen, bounded in steps and milliseconds, and the formed word is painted once on the first paint.
12. Phone and resizeEverything is sized by the sheet, so a phone shows the same sheet smaller: fine iron (about 4.4 px long on a 342 px sheet), the word in proportion. A resize keeps the arrangement: the old sheet stays at its size, never stretched, then the iron is carried to the new size with the word and a light tap re-forms it in view.
13. Without WebGL2The paper and every filing are two WebGL2 draws; where there is no WebGL2, or the context is lost, a 2D canvas takes over and repaints only the tiles that changed. It looks the same.

Made of: Magnetic dipole field, Slab field convolution, Stroke width magnet depth, Axial torque alignment, Static friction with ageing, Gradient migration, Spatial hash neighbours, Sprite atlas shading, Instanced sprite draw, Dirty tile fallback, Sheet relative scale, Arrangement preserving resize, Sleeping loop, Seeded scatter, Text magnet.

Original. Taken from the classroom demonstration of iron filings over a magnet, not from a catalogue reference, so references is honestly empty. WebGL2 with a Canvas 2D fallback; the paper's formation, fibres and grain and every filing sprite are generated at run time, and the word is set in the page's own fonts, so no image or font ships. Round 2: filled letters by default (the word's magnet depth follows its stroke width), everything scaled by the sheet, resize keeps the arrangement, one instanced draw per frame, five presets.

• 08.1Iron HeroA magnetics company’s opening, set like a physics monograph.
• 08.2Field 404A 404 on a sheet of lost steel filings.
• 08.3Attract CTAA newsletter band whose button is a magnet.