# Giant wordmark reveal footer > **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 closing footer of a small design studio's site ("Halden", Patan, Kathmandu). Above it sits the tail of the page: a "Next case" row. The footer itself is calm and dark: an email call to action, a ticking local clock with an "in the studio / replies tomorrow" status, four sitemap columns and a legal row. Its signature is the wordmark `halden.` set so large it spans the full content width, cropped by the bottom edge of the page, with each letter rising out of the floor as the footer scrolls into view. The period is the single lavender accent. It should feel like the credits at the end of a film: quiet, then one big confident gesture. ## Reference behaviour 1. On load the page jumps (no animation) to the very bottom. The first frame shows the last ~100px of page content ("Next case · Northfold Bank, a rebrand in 14 weeks") and the full footer with the wordmark fully risen. 2. The wordmark is fitted to the footer's content width on load, after `document.fonts.ready`, and on resize: measure the word at 200px and scale the font size to `footerWidth − 80px`. At 1280 wide this lands at ~360px. 3. Scroll position drives a footer progress value `--p` from 0 (footer top at the viewport bottom) to 1 (footer fully in view, or one viewport of it in view if the footer is taller). 4. Each letter `i` (0–6) has its own progress `q = clamp(0, p × 1.5 − i × 0.07, 1)` and is translated down by `(1 − q) × 100%` of its own height. Letters therefore rise left to right with a stagger; the period arrives last. 5. A CSS transition of 520ms expo-out on `transform` smooths the scroll-driven values so the rise reads as motion, not scrubbing. 6. Hovering a letter turns it lavender (`--accent`) over 160ms. 7. Clicking **Replay reveal** jumps the page so only 80px of the footer is in view (letters sink out of sight), waits 420ms, then smooth-scrolls to the bottom, re-running the rise. 8. The clock shows Asia/Kathmandu time as `HH:MM:SS` updated every 1000ms; seconds are dimmed. The status text reads "in the studio now" between 10:00 and 18:00, "morning, opening at 10:00" between 06:00 and 10:00, otherwise "evening, replies tomorrow". A 7px lavender dot pulses (opacity 1 → 0.25 → 1, 2s). 9. Hovering the email draws a 2px lavender underline from left to right (background-size 0 → 100%, 400ms expo-out). 10. Hovering a sitemap link brightens it to `--ink` and grows a 14px lavender dash in front of it (width and right margin animate 0 → 14px / 8px over 240ms), pushing the label right. 11. Hovering the "Next case" row fills it with `--panel` and nudges the arrow 6px right. ## Structure ``` 1280 × 800 (scrolled to bottom; document ≈ 1060px tall) ┌──────────────────────────────────────────────────────────────────────┐ │ NEXT CASE Northfold Bank, a rebrand in 14 weeks Identity · → │ 104 (end of page) ├──────────────────────────────────────────────────────────────────────┤ │ NEW BUSINESS, BOOKED THROUGH Q1 2027 21:15:49 │ │ hello@halden.studio ● ● Patan · GMT+5:45 · status │ ~120 ├──────────────────────────────────────────────────────────────────────┤ │ STUDIO WORK SERVICES ELSEWHERE Halden is an… │ │ About Northfold Identity Are.na (address, │ ~170 │ Team Ondo Health Product design Read.cv hours) │ │ Careers² Saltmarsh Design systems Instagram │ │ Journal All 38 cases Motion Newsletter │ │ © 2026 Halden Studio · Privacy · Imprint (Replay reveal) │ 30 │ ████ █ ███ █ ████ ████ ███ │ │ halden. (≈360px type, box height 0.7em, cropped by page bottom) │ ~250 └──────────────────────────────────────────────────────────────────────┘ side padding 40px · grid 4 × 1fr + 1.3fr, gap 32px ``` - `
`: closing `

` (64px) and an `