# Sticky scroll feature steps > **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 features section for a kitchen-garden planner ("Loam"). Four long steps live in the left column; a 600px garden-plot card sticks in the right column and restyles itself as each step crosses the middle of the viewport. Step one is empty dashed beds and a sun disc; two fills them with companion crops; three stamps checkmarks and a Mar–Oct calendar; four drops kilogram tallies and a 12-bar sparkline. The feeling is paper, soil and serif: warm `#F4EFE6`, terracotta `#C65D3B` on one word of the 76px headline. The detail worth copying is that the sticky card is one DOM figure whose `data-step` drives every visual — no four stacked mockups, no image swaps. ## Reference behaviour 1. Initial state: step 1 is `.on` (opacity 1, numeral filled `--ink`). Steps 2–4 sit at opacity 0.38. The figure `data-step="1"`: six dashed empty beds, a 6.20 m ruler, a butter sun in the top-left, bed 2 (courgette slot) highlighted with a terracotta border and two 9px corner handles. Footer legend: 6 beds / 7 h 40 m sun / loam pH 6.8 / last frost 12 May. 2. Scrolling until a step's block intersects a band from 45% from the top to 50% from the bottom (`rootMargin: -45% 0px -50% 0px`) calls `set(n)`. The matching numeral gets `aria-current="step"`. 3. Clicking a numeral `scrollIntoView({ block: 'center' })` and sets that step immediately. 4. **Step 2:** dashed borders become solid fills using each bed's `--c`; crop names and row textures fade in; sun and ruler hide; legend becomes crop families (legumes, cucurbits, nightshades, roots). 5. **Step 3:** 22px ink check discs appear on the first three beds; beds 4–6 scale to 0.97 and hide their ticks. Footer is a 12-column calendar (Mar–Oct) with Sow / Thin / Feed / Harvest bars and a "Today · 2 Jun" hairline at 41% of the plot width. 6. **Step 4:** kilogram figures (9.2, 11.6, 7.8, 4.1, 3.9, 1.8) scale in at the top-right of each bed; row texture drops to 0.35 opacity; footer shows **38.4 kg** and a 12-bar sparkline that grows from `scaleY(0)` with 30ms stagger. Bars 9–12 are terracotta; 1–8 sage. 7. Morphs use 560ms `--ease` on colour/opacity and `--ease-out` on transform. Last step is 86vh tall so it can reach the observer band; others 62vh. 8. Reduced motion: `scroll-behavior: auto`; all transitions 1ms. IntersectionObserver still updates `data-step`. ## Structure ``` 1280 × 800, .wrap grid 1fr 600px, gap 72px, pad 0 72px, max-width 1440 ┌────────────────────────────────┬──────────────────────────────────────┐ │ pad-top 64 │ .aside → .sticky top 48, h 704 │ │ — HOW LOAM WORKS │ ┌ viz card, r 18, pad 22 24 ────────┐│ │ From bare soil to a │ │ Back garden Plot · 6.2×4.0 m ││ │ full basket. (76px, em terra) │ │ faces SSW ││ │ lede 17px, max 430 │ │ ┌ plot 336h, 3×2 beds, 34×18 gap ┐││ │ │ │ │ sun │││ │ ① STEP ONE · MAP │ │ │ [beans] [courgette] [tomatoes] │││ │ Draw your plot… (62vh) │ │ │ [kale] [carrots] [beetroot] │││ │ 6.2 × 4.0 m | 7 h 40 m │ │ │ ruler 6.20 m │││ │ ② STEP TWO · CHOOSE (62vh) │ │ └─────────────────────────────────┘││ │ ③ STEP THREE · TEND (62vh) │ │ foot 176h — one .panel visible ││ │ ④ STEP FOUR · HARVEST (86vh) │ └────────────────────────────────────┘│ └────────────────────────────────┴──────────────────────────────────────┘ timeline: 1px --line-2 at x=19; 40px numeral at left 0, top 40 ``` - `.wrap` — CSS grid. `.copy` left; `.aside` right. - Eyebrow: 12/600 +0.16em uppercase terracotta, 24×1px rule `::before`. - `

` 76px Young Serif; `full basket.` terracotta, `font-style:normal`. - `
    ` — four `
  1. `. Each: `