# Sticky split scroll story > **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 long-form feature ("Aster Observatory · One night on Skarvfjell") split in two: the left half is four chapters of text, each a full viewport tall, with a numbered rail that tracks progress; the right half is a `position: sticky` illustration of the sky over the observatory — gradient layers, a sun/moon disc, a ridge line, a small dome — that crossfades and moves as each chapter crosses the middle of the viewport. The page's accent colour (kickers, italic phrases, rail marker, disc) shifts with the chapter: ochre at dusk, blue-grey at midnight, apricot at dawn, sage at noon. The mechanism worth copying is that all visual state hangs off one attribute, `data-ch` on ``, set by an IntersectionObserver with a 45 % inset root margin. ## Reference behaviour 1. Initial state (`data-ch="1"`): rail marker on "01", kicker "Chapter one · Dusk" in ochre, headline with an italic ochre phrase, two paragraphs, three serif figures. Right: dusk gradient (violet to copper to ochre), a 180px ochre disc low-right behind the ridge, dome slit tilted −40°, HUD reads "19:42 local" and "Dusk · Sun setting". 2. Scroll until chapter two's box overlaps the middle 10 % band of the viewport: `data-ch` becomes 2. The dusk layer fades out and the midnight layer fades in (800ms); nine stars fade to 90 %; the disc travels to the upper-left, shrinks to 45 % and turns bone-white (1000ms expo-out); the dome slit rotates to −70°; the accent turns blue-grey; the HUD updates to "00:10 · Midnight · Moon in the west". 3. Chapter three: dawn gradient, stars fade out, disc returns low-centre at 80 % in apricot with a wider glow, slit −20°, HUD "04:20 · Dawn · Field low in the east". 4. Chapter four: daylight gradient, small pale disc high-right at 60 %, slit 0°, HUD "12:00 · Noon · Dome closed", accent sage. 5. Scrolling back up reverses every step; transitions run in both directions. 6. Click a rail number: the page scrolls smoothly to that chapter and the state is set immediately (so the visual leads the scroll). 7. The rail (01–04) is sticky at the top-left; the active number is in the current accent with a 2px left bar. ## Structure ``` 1280 × 800 (page scrolls; total height ≈ 4 × 100vh + intro) ┌──────────────────────────────────┬─────────────────────────────────────┐ │ 01│ ASTER OBSERVATORY · ONE NIGHT…│ │ │ 02│ │ gradient layer (active chapter) │ │ 03│ CHAPTER ONE · DUSK │ stars (ch 2) │ │ 04│ The dome opens at 19:42. │ ● disc │ │ │ paragraph (44ch) │ ▲▲ ridge ▲▲ ◠ dome │ │ │ paragraph │ ────────────────────────────────── │ │ │ 19:42 −3.4 °C 61 % │ 19:42 LOCAL DUSK · SUN… │ │ │ (next chapter below, 100vh) │ (sticky, 100vh) │ └──────────────────────────────────┴─────────────────────────────────────┘ left column: padding 0 72px 0 96px; rail at left −60px, top 44px right column: 1px left hairline; HUD at 32px insets, 28px from bottom ``` - `` → `.wrap` (`grid-template-columns: 1fr 1fr; min-height: 100%`). - `.text`: `.rail` (`position: sticky; top: 0; height: 0`) containing an `
    ` of four anchor links; `.intro` line; four `
    ` each with `.k` kicker, `

    ` with ``, two `

    `, and `.fig` (three figures with `` captions). - `