# Filings

Iron filings on paper, magnets underneath. Thousands of slivers swing into a real field and write a hidden word in iron, lit from one lamp. Your pointer is one more magnet.

Object · With a Pass · https://tactileui.dev/objects/filings

> The code and styling for this object come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

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

## Usage notes

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.

## Options

| Option | Type | Description |
| - | - | - |
| text | text | The magnet under the sheet, written in iron. Empty leaves only the magnets. |
| form | enum | Filled: the word’s magnet sits deeper and the iron fills each stroke. Outline: a shallow magnet, and the iron draws the edges. |
| density | number | More iron, a bolder word. |
| length | number | Filings, magnets and the count all scale with the sheet, so a phone shows the same sheet, smaller. |
| strength | number | Every magnet under the sheet: the word, the poles, the one you hold. |
| orientation | number | Where north points: 0 is up, clockwise. Turns the fixed poles and the magnet you hold (hold it down and use the wheel to turn it). |
| friction | number | How firmly the paper holds the iron. High: only strong fields move it. Low: it follows everything. |
| poles | enum | A bar magnet or four alternating poles under the sheet, beside the word. |
| finish | enum | Auto casts the sheet and its iron in the page’s finish: a pale sheet with dark iron on a light one, a dark anodised sheet with bright iron on a dark one (without the kit’s tokens, bone on a light page and ink on a dark one). Or pin one: bone, ink, graphite or brass. |
| light | number | 0 is from above, clockwise. |
| seed | number | The scatter. The same seed sprinkles the same sheet. |
| intro | boolean | A magnet crosses once when the sheet first comes into view and leaves the word formed. |

## Methods

- update
- shake
- tap
- power
- replay
- magnetAt
- state
- destroy

## States

1. **Scattered**: Before the opening sweep: a seeded, reproducible sprinkle of filings at random angles on a warm sheet.
2. **Opening sweep**: Once, when the sheet first comes into view.
3. **Formed and asleep**: Every 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 letters**: The 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 hovering**: The 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 pressed**: The wheel turns it while it is held.
7. **Lifted away**: When the magnet leaves, a gentle tap lets the word take back the iron still within its reach, and the sheet settles and sleeps.
8. **Shaken**: shake() 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 poles**: The 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 hidden**: The loop pauses.
11. **Reduced motion**: No 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 resize**: Everything is sized by the sheet, so a phone shows the same sheet smaller. 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 WebGL2**: The 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.

## How it works

Original. 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.