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

Block · With a Pass · https://tactileui.dev/blocks/iron-hero

> The code and styling for this block 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

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

## States

1. **Arriving**: The copy settles in.
2. **At rest**: The name stands in filled strokes of iron with a bare moat round it; the sheet is asleep and costs nothing.
3. **Pointer over the plate**: A 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 sheet**: A text button under the plate loosens the paper and the name re-forms.
5. **Palette**: Monograph: bone paper, dark iron, red and blue pole marks. Nocturne: black paper, steel iron.
6. **Tablet**: 
7. **Phone**: 
8. **Resize**: The sheet keeps its iron: carried with the word to the new size, never stretched, re-formed in view.
9. **Reduced motion**: The name is formed on the first paint and nothing moves; no copy entrance; the tap button is hidden. Every word is present.
10. **Off screen**: The sheet's loop pauses; the block runs nothing of its own.

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