# Editorial landing hero > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The above-the-fold hero of a quarterly design magazine called *Marrow*. Warm paper background, a 56px hairline top nav, a small uppercase issue index, a two-line 104px Fraunces headline in weight 300 whose words rise one by one out of a clipped baseline, a 19px manifesto paragraph and exactly one outlined pill CTA. A footer hairline draws itself in from the left. The feeling is print: unhurried, low-contrast lines, one oxblood accent on a single italic word. The detail worth copying is the word-by-word rise, clipped per word so descenders never peek out early. ## Reference behaviour 1. First frame (t = 0): nav, index line and empty headline area are visible. Headline words are hidden below their own clip boxes; manifesto and CTA are at opacity 0; the footer rule has `scaleX(0)`. 2. t = 120ms: word 1 ("Make") starts rising from `translateY(112%)` to `0` over 760ms with expo-out easing. Each following word starts 70ms after the previous one (10 words, last starts at 120 + 9×70 = 750ms). 3. t = 400ms: footer hairline begins scaling from 0 to 1 over 900ms, origin left. 4. t = 1010ms: the manifesto + CTA row fades from 0 to 1 over 700ms. 5. By ~1.9s the page is fully settled. Nothing loops. 6. Hover a nav link: colour goes from `--ink-2` to `--ink` (160ms) and a 1px underline scales in from the left (240ms). 7. Hover the CTA: fills `--ink`, text becomes `--paper`, the arrow icon translates 4px right over 240ms. Active (mousedown) fills `--accent` instead. 8. Click anywhere on the main area that is not a link or button, or click the 32px round replay button bottom-right: the whole reveal replays from step 1. 9. With `prefers-reduced-motion: reduce` every element is in its final position from the first frame; replay does nothing visible. ## Structure ``` 1280 × 800 ┌────────────────────────────────────────────────────────────────────────┐ │ Marrow (italic) Issues Essays Interviews Print About Subscribe │ 56 nav, 1px rule below ├────────────────────────────────────────────────────────────────────────┤ │ ISSUE NO. 014 — AUTUMN 2026 — ON SLOWNESS │ 40px top pad, 12px caps │ │ │ Make things that outlast │ h1 104px / 0.98 │ the feed they were posted to. │ ("outlast" italic oxblood) │ │ 34px gap │ Marrow is a quarterly on design ... ( Read the issue → ) │ manifesto 520px max · CTA 52px │ │ ├── hairline draws left→right ───────────────────────────────────────────┤ │ Published 21 Sept 2026 Edited by I. Halvorsen & T. Marsh 2,400 copies · 96 pp │ 12px, 3 cols └────────────────────────────────────────────────────────────────────────┘ 56px side gutters replay ◯ 32px at right:16 bottom:14 ``` - `