Link-out heading
A post’s heading that is also the link to the live project.
States
-
Rest
nothing set
A heading on a hairline, the host as a label, a resting cell.
-
Hot
hover or :focus-visible
The cell fires and the rule develops out of it. Under a real pointer the heading also turns --state; that is CSS :hover, which a held state can’t show.
Anatomy
| Heading | the prose h2: Redaction 20 at 28px (34px in the large reading size) |
|---|---|
| Rule | a --border caption hairline 12px under the heading |
| Meta | the hostname as a label beneath the rule |
| Cell | the out glyph in an icon cell at the right: the fixed origin |
| Hot | the cell fires (280ms), the hairline develops out of it in 140ms, and the heading turns --state |
| Leaving | the rule retracts in 100ms |
| In the rail | the heading is markdown inside the component, so it keeps its id and appears in the TOC |
Timings are read from rule.ts at build time.
Decisions
-
No block
It replaced an outlined block with a solid ink arrow cell whose active state filled the whole block red (Oct 2026).
-
The cell is the origin
Hovering anywhere fires the cell and the hairline develops out of it toward the heading, so the move always starts at the same place.
-
One interaction, one flare
The cell fires; the rule only develops. Until Oct 2026 the rule fired its own flare beside the cell’s.