# Page transition curtain > **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 A marketing site shell for a fjord-side hotel ("Halden") with four pages: Rooms, Dining, Spa, Journal. Clicking a nav link does not cut to the new page: two deep-green panels slide in from the left and right edges and meet in the centre (450ms), the content underneath is swapped while covered, the panels retract (450ms), and the new page's title arrives one letter at a time, each rising out of a clipped line box with a 28ms stagger and expo-out easing. The lede, the "Explore" link and the fact list follow on their own delays. The panels' meeting edges carry a 1px copper hairline so the seam reads as a deliberate line, not a glitch. The detail worth copying is the timing structure: one clock for the curtain, one for the letters, and an instant (non-animated) reset hidden behind the closed curtain. ## Reference behaviour 1. Initial state: header (80px) with the "HALDEN" wordmark, four nav links ("Rooms" current, with a 1px copper underline), and an outlined "Book a stay" pill on the right. Main shows "01 — 04", the title "Rooms" at 132px, a two-sentence lede, an "Explore" link with an arrow, and on the right an "At a glance" list of three facts. On first paint the title letters, lede, link and facts play their entrance (no curtain on first load). 2. Hover a nav link: colour goes `--ink-2` → `--ink` over 160ms. Hover the current link: nothing changes. The underline is a `::after` scaled from `scaleX(0)` to `scaleX(1)` from the left over 240ms and only shown on the current link. 3. Click a different nav link (t = 0): `aria-current` moves immediately to the clicked link and its underline grows. The two panels (each 50% of the viewport wide, full height, `--panel` fill) translate from `translateX(∓100.5%)` to `0` over 450ms with `cubic-bezier(.2,.7,.2,1)`. Their inner edges have a 1px `--accent` border, so at t = 450 a single copper line runs down the centre. 4. t = 490ms: content is replaced. The title's `.in` class is removed (instantly hiding the letters — no transition), text is swapped, index number updates ("02 — 04"), then `.in` is re-added after a forced reflow. The panels start retracting (450ms, same easing). 5. Letters: each `` starts at `translateY(110%)` inside an `overflow: hidden` span and moves to `0` over 600ms with `cubic-bezier(.16,1,.3,1)`, delay `120ms + i × 28ms`. "Rooms" (5 letters) finishes at 490 + 120 + 112 + 600 = 1322ms after the click. One letter per title is italic and copper (Rooms: R; Dining: i; Spa: S; Journal: r — the 1st, 2nd, 1st and 4th characters). 6. Lede: opacity 0 → 1 and `translateY(8px)` → 0, 400ms, delay 320ms after the swap. "Explore" link: same, delay 420ms. Fact rows: opacity/translateY(6px), 360ms, delay `360ms + i × 60ms`. 7. Clicks during a transition (940ms window from click) are ignored; clicking the current page's link does nothing. 8. Hover the "Explore" link: its arrow translates 4px right over 160ms. Hover "Book a stay": fills copper with dark text. 9. With `prefers-reduced-motion: reduce`: panels move in 1ms (the page is covered for the 490ms swap window, so it reads as a cut), letters and blocks appear with no stagger or translate. ## Structure ``` 1280 × 800 ┌──────────────────────────────────────────────────────────────────────┐ │ HALDEN Rooms Dining Spa Journal ( Book a stay )│ header 80 ├──────────────────────────────────────────────────────────────────────┤ │ 01 — 04 │ AT A GLANCE │ pad 56/48 │ │ ───────────── │ │ R o o m s ← 132px, letters clipped │ From NOK 2,400 │ aside 320 │ │ ───────────── │ │ Forty-two rooms on three floors, each facing… │ Check-in 15:00 │ gap 64 │ (lede, max 560px) │ ───────────── │ │ │ Sea view 38 of 42 │ │ See all rooms → │ │ │ │ │ Halden, Hardangerfjord · 60.06° N │ foot at 48,40 └──────────────────────────────────────────────────────────────────────┘ [ left panel 640 wide ]|[ right panel 640 wide ] ← curtain, fixed, z 10 ``` - `

` — flex, 48px side padding, 1px bottom hairline. `.brand` serif 22px uppercase. `