Field 404

Turn a dead end into a small experiment: the missing page is admitted plainly, the way home is one click away, and the visitor who lingers is rewarded with a field that comes up under their hand and a number written in iron.

Copy the field-404 folder and the filings folder from its package next to your page, link the stylesheets and mount 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">
<link rel="stylesheet" href="field-404/field-404.css">
<div id="field-404"></div>

<script type="module">
  import Filings from './filings/filings.mjs';
  import { mount } from './field-404/field-404.mjs';

  const field404 = mount(document.getElementById('field-404'), {
    site: 'Coilhouse',
    code: 'Error 404 · Pattern not found',
    title: 'This page lost its pattern.',
  }, { Filings });

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

mount(element, options, { Filings })

Builds the block inside the element and returns its handle. Hand it the Filings it is built with.

handle.update(next = {})

Change options in place.

handle.level

The pattern's progress, 0…1.

handle.sheet

handle.root

handle.destroy()

Stops it and cleans up after it.

1. LostOn arrival the iron is an even scatter, the magnet is off, the readout reads 0.00 T and asks the visitor to move across the sheet.
2. FindingThe level rises with the pointer's travel (two section widths find it) and, from two seconds on screen, slowly on its own; it only ever rises, in twenty-fifths; the iron swings and drifts toward the number; the pointer is a magnet too.
3. Find it for meA text button runs the same climb in about a second and a half and taps the middle of the sheet.
4. Found404 stands in iron; the readout shows the full field, the note says the found line, the status dot turns pale, the button and the timer go, the sheet sleeps.
5. PaletteNight: steel filings on black with a vermilion mark. Brass: brass filings on warm black.
6. Tablet and phoneUnder 900px the sheet becomes a band of its own under the masthead with the number centred in it, the readout becomes its caption, and the copy and the ways out follow on solid ground; under 560px the masthead stacks and the home button goes full width.
7. Reduced motionFound on the first paint; nothing moves, no timer, no button. Every word is present.
8. Off screenThe timer and the sheet pause.

Made of: Pattern found by movement, Field strength readout, Polite threshold announcements, Scrim framing, Layout aware word placement, Container query recomposition.

Original composition, deliberately unlike Pin 404 (a light page and a framed board): here the sheet is the whole dark ground and the number is found, not pressed. Coilhouse and its copy are invented. Faces: Young Serif and Red Hat Mono (SIL OFL 1.1) as WOFF2, licences beside them.

• 08FilingsIron filings on paper, magnets underneath.

More blocks on the same object:

• 08.1Iron HeroA magnetics company’s opening, set like a physics monograph.
• 08.3Attract CTAA newsletter band whose button is a magnet.