# Parallax cursor 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 The online room of a museum exhibition ("Weather Studies", Hall 4 of the fictional Varde Art Hall): eight small gouaches by an invented painter, Agnes Ruoho, hung salon style on a warm plaster wall. Each work is a framed, matted SVG made of three paint layers. Moving the pointer shifts the frames a few pixels at their own depth and shifts the paint layers inside each frame further, so every picture gains a little depth behind its glass, and the frame shadows lean away from the pointer as if the light moved. Scrolling adds a slow vertical drift at the same depths. Selecting a work opens a focus mode: the wall dims to 94% plaster, the work grows from its place on the wall to full height with a FLIP, and a wall-label panel gives the title, medium, size and a curator's line, with previous and next. The feeling is a quiet room; nothing moves faster than 900ms. ## Reference behaviour 1. Initial frame (1280×800): a 64px top bar ("VARDE ART HALL" tracked caps left; Collection, Hall 4 (current, red), Visit, Tickets right) over a 1px rule. Below, a 360px intro column (kicker "Hall 4 · Until 1 March 2027", the 84px title "Weather Studies", two short paragraphs, a ruled credit line, and the hint "Move to look closer. Select a work to stand in front of it.") and a salon of six framed works with labels to its right. 2. Pointer moves (mouse or pen, not touch): `--mx` and `--my` are set from −1 to 1 across the viewport. Each `.work` translates by `(mx, my) × d` px with its own depth `d` (5–14); each paint layer `` inside the art translates by `(mx, my) × z` px with `z` 2, 6–8 and 12–14 for back, middle and front. Both transitions run 900ms expo-out, so motion trails the pointer softly. 3. Frame shadows: `box-shadow: (mx × −8px) (16px + my × −6px) 28px rgba(46,32,20,.22)`, so the shadow falls opposite the pointer. 4. Pointer leaves the document: everything eases back to centre. 5. Scroll: each work also drifts `scrollY × d × −0.004px` vertically (capped at scrollY 1600), so deeper works rise slightly faster; it is barely perceptible and only adds weight. 6. Hover a frame: lifts 4px over 320ms; cursor is `zoom-in`. 7. Click or press Enter on a frame: focus mode opens. The scrim fades in over 320ms; the large frame animates from the clicked frame's rect to its own (translate + scale from top-left, 560ms `cubic-bezier(.16,1,.3,1)`). Focus moves to Close. In focus mode the paint layers move at 2.2× depth. 8. In focus mode: Right/Left arrows or the 44px round buttons step through all eight works (wrapping); the counter reads "2 of 8". Esc, the Close pill, or a click on the scrim closes; the big frame FLIPs back to the current work's place on the wall and focus returns to that frame. Tab is trapped inside the dialog. 9. Further down, a second band on a slightly darker wall ("The harbour years, 1968 to 1971") hangs two more works in a `1fr 1.25fr` row and a closing note. ## Structure ``` 1280 × 800 ┌──────────────────────────────────────────────────────────────────────┐ │ VARDE ART HALL Collection Hall 4 Visit Tickets │ 64 ├──────────────────────────────────────────────────────────────────────┤ │ HALL 4 · UNTIL … ┌────────────┐ ┌──────┐ ┌────┐ │ │ Weather │ Low cloud │ │Birch │ │Hern│ 144w │ │ Studies 84px │ 360w │ │224w │ └────┘ │ │ ¶ ¶ (max 300) └────────────┘ │ │ label │ │ ─ credit line ─ label └──────┘ ┌────┐ │ │ ⌖ hint ┌─────────┐ ┌──────┐ │Loft│ 152w │ │ │Rapeseed │ │Harbr │ └────┘ │ │ 360 col · gap 32 │ 296w │ │220w │ │ │ └─────────┘ └──────┘ salon 792 × 620 │ └──────────────────────────────────────────────────────────────────────┘ ``` Salon positions (left, top, width of the outer frame): Low cloud 0, 28, 360 · Three birches 392, 0, 224 · Night heron 648, 44, 144 · Rapeseed 44, 372, 296 · Harbour 380, 392, 220 · Net loft window 640, 330, 152. - `

` with a brand span and `