# Photographer horizontal gallery > **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 full-page portfolio for photographer Yuki Halloran, series **Salt Year**. The viewport is a horizontal track: a 500px-wide intro, ten 500px-tall plates at three widths (720 / 560 / 380), and a 520px closer. Wheel, drag, arrow keys and a 10-tick scrubber all ease the track with a 9% lerp. The plate nearest the centre is opacity 1; others 0.5. Each plate is a CSS "photograph" (gradients, not files) with a 5% opposite parallax. A fractal-noise grain overlay at 12% overlay-blend sits on top. Gold `#C9A66B` is the only accent. The detail worth copying is treating vertical wheel delta as horizontal travel, so a mouse wheel "just works" on a sideways gallery. ## Reference behaviour 1. Initial state: intro in view. Title **Salt / Year** (second word padded 96px). Hint arrow nudges 8px every 2.4s. Index reads **01 / 10** and tick 01 is `aria-current`. While `x < 200` the first two figures also get `.on` so the open does not look dim. 2. Wheel: `preventDefault`, add `1.1 * (the larger of |deltaY| and |deltaX|)` to target `tx`, clamped `[0, max]`. `max = track.scrollWidth − view.clientWidth`. 3. Pointer drag: grabbing cursor, capture pointer, `tx = startTx − (clientX − startX) * 1.4`. 4. Each frame: `x += (tx − x) * (reduce ? 1 : 0.09)`. Stop the rAF when `|tx − x| < 0.3`. Apply `translate3d(-x, 0, 0)` on the track. 5. For each figure, compute the delta from plate centre to viewport centre. The nearest is current: pad the index to two digits, set `aria-current="true"` on that tick, `.on` on that figure (and on 0–1 while `x < 200`). Inner photo `i` parallax `translate3d((-d * 0.05)px, 0, 0)`. Fill bar width = `x / max * 100%`. 6. Tick buttons: `to(i)` sets `tx` so plate `i` is centred (`offsetLeft + width/2 − view.clientWidth/2`). 7. Keyboard when `.view` is focused: ArrowRight / ArrowLeft step one plate; Home `tx = 0`; End `tx = max`. 8. Resize remeasures `max` and reclamps. 9. `document.fonts.ready` remeasures so Bodoni metrics do not leave the track short. 10. Reduced motion: lerp factor 1 (snap), hint animation none, transitions 1ms. Parallax still updates (it is a position, not a loop). ## Structure ``` 1280 × 800 overflow hidden, bg #0E0D0B ┌ header 72, grid 1fr auto 1fr, pad 0 48 ─────────────────────────────────┐ │ Yuki Halloran SALT YEAR INTERIORS PORTRAITS INDEX [Enquiries]│ ├ view (inset 72 0 96 0), cursor grab, tabindex 0 ────────────────────────┤ │ track: flex, align centre, gap 72, pad 0 48, width max-content │ │ [intro 500] [720] [380] [560] [380] [380] [720] [560] [720] [380] [720] [outro 520] │ Salt Year 01 02 03 04 05 06 07 08 09 10 Fin. ├ footer 96, grid 200px 1fr 260px, pad 0 48 ────────────────────────────────┤ │ 01 / 10 [10 ticks on a 1px rule, gold fill] SCROLL · DRAG · ← → │ └ grain SVG, mix-blend overlay, opacity .12, pointer-events none ─────────┘ ``` - `

` — italic 22px name, `