Iron Hero
A magnetics company’s opening, set like a physics monograph. On the mounted plate below, the name is written in iron filings that swing after the pointer and settle back into the word.
Built with Filings
What it is for
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.
Everything you set here is what the Code and Prompt tabs give you.
Seats open in 11 days. Want one email that morning?
Datasheet
- Mechanism
- Name written in iron, Monograph plate framing, Pointer bar magnet, Container query recomposition, Arrival choreography, Palette from filings finish
- Stack
- Vanilla ES modules, CSS, WebGL2, Canvas 2D
- Needs
- Filings
- States
- 10 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- 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.
- At restThe name stands in filled strokes of iron with a bare moat round it; the sheet is asleep and costs nothing.
- 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.
- Tap the sheetA text button under the plate loosens the paper and the name re-forms.
- PaletteMonograph: bone paper, dark iron, red and blue pole marks. Nocturne: black paper, steel iron.
- 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.
- 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.
- ResizeThe sheet keeps its iron: carried with the word to the new size, never stretched, re-formed in view.
- Reduced motionThe name is formed on the first paint and nothing moves; no copy entrance; the tap button is hidden. Every word is present.
- Off screenThe sheet's loop pauses; the block runs nothing of its own.
Notes
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.
Anatomy
Name written in iron, Monograph plate framing, Pointer bar magnet, Container query recomposition, Arrival choreography, Palette from filings finish
Usage notes
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.
Options
| Option | Type | Description |
|---|---|---|
| brand | text | The wordmark in the masthead. |
| word | text | Written in filings on the plate. Four to seven letters read best. |
| eyebrow | text | Eyebrow |
| headline | text | Headline |
| accent | text | Headline, italic turn |
| lede | text | Paragraph |
| cta | text | Button |
| href | text | Button link |
| more | text | Second link |
| moreHref | text | Second link, address |
| nav | text | Comma-separated, up to five. |
| contact | text | Nav button |
| caption | text | |
| specs | text | Term: value, separated by semicolons; up to six. |
| palette | enum | Monograph: bone paper, dark iron. Nocturne: black paper, steel iron. |
| form | enum | Filled: the iron fills each stroke. Outline: it draws the edges. |
| density | number | |
| light | number | 0 is from above, clockwise. |
Methods
- update
- sheet
- root
- destroy
How it works
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.