Iron Hero

Open a science, engineering or hardware company's site with its name as a physical demonstration rather than a logo: the word is made by iron in a real field, the visitor plays with it before reading a word, and the headline, the pitch and the way in stay quiet and editorial around it.

Copy the iron-hero 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="iron-hero/iron-hero.css">
<div id="iron-hero"></div>

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

  const ironHero = mount(document.getElementById('iron-hero'), {
    brand: 'Lode',
    word: 'LODE',
    eyebrow: 'Precision magnetics · Glasgow · since 1998',
  }, { Filings });

  // ironHero.update({ … });   change any option in place
  // ironHero.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.sheet

handle.root

handle.destroy()

Stops it and cleans up after it.

1. ArrivingThe copy settles in; when the plate is a quarter visible a magnet sweeps under the sheet in 2.6 s and leaves the name written in iron.
2. At restThe name stands in filled strokes of iron with a bare moat round it; the sheet is asleep and costs nothing.
3. Pointer over the plateA bar magnet under the sheet swings the iron in its reach; pressed (or a touch held) it drags tufts; lifted, the name takes its iron back.
4. Tap the sheetA text button under the plate loosens the paper and the name re-forms.
5. PaletteMonograph: bone paper, dark iron, red and blue pole marks. Nocturne: black paper, steel iron.
6. TabletUnder 1000px the headline takes the full width with the lede under it and the plate goes taller; under 900px the nav drops to its own row.
7. PhoneUnder 640px the masthead wraps, the copy stacks, the button goes full width, the plate goes to 16/10.5 so the name stays large in fine iron, the figures go to two columns.
8. ResizeThe sheet keeps its iron: carried with the word to the new size, never stretched, re-formed in view.
9. Reduced motionThe name is formed on the first paint and nothing moves; no copy entrance; the tap button is hidden. Every word is present.
10. Off screenThe sheet's loop pauses; the block runs nothing of its own.

Made of: Name written in iron, Monograph plate framing, Pointer bar magnet, Container query recomposition, Arrival choreography, Palette from filings finish.

Original composition; Lode, its business and its copy are invented. The only imagery is Filings drawing the word in iron; the rulers, corner marks and the bar-magnet mark are CSS. Faces: IBM Plex Serif and IBM Plex Mono (SIL OFL 1.1) as WOFF2, licence beside them.

• 08FilingsIron filings on paper, magnets underneath.

More blocks on the same object:

• 08.2Field 404A 404 on a sheet of lost steel filings.
• 08.3Attract CTAA newsletter band whose button is a magnet.