# Moodboard canvas > **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 brand moodboard for an invented bakery identity project ("Tidewater / Spring identity"), laid out on a 2200 × 1400px dotted board that is larger than the window. The user drags the empty board to pan and uses a floating toolbar (or Ctrl + scroll, or + / − / 0) to zoom. Pinned on the board: a five-colour palette card, two type specimens, four taped "photographs" drawn in CSS gradients, a wordmark sketch, packaging mock-ups, sticky notes in handwriting, orange marker arrows and one comment pin. Every item sits at a slight rotation and lifts toward the viewer on hover. The detail worth copying is that the board is a real native scroll container scaled with a sizer element, so panning, trackpads and keyboard scrolling all work without a custom physics engine. ## Reference behaviour 1. Initial state at 1280 × 800: zoom 100%, the board scrolled to (200, 100) so the type card, palette, wordmark, harbour photo, kelp photo and two notes fill the frame; the "packaging" row peeks in at the bottom edge, inviting a pan. 2. Initial state below 760px wide: zoom 50%, scrolled to (112, 30), so the left two-thirds of the board (type, colour, wordmark, packaging) fits a phone. 3. Pointer-down on empty board (not on an item): cursor becomes `grabbing`; moving the pointer scrolls the board 1:1 in the opposite direction; pointer-up restores `grab`. 4. Hover or keyboard-focus any item: it rises 6px, scales to 1.015, its rotation relaxes to 40% of its resting angle, and its shadow deepens; it renders above neighbours (`z-index:5`). 5. Click "+" in the toolbar: zoom steps to the next value in `[33, 50, 67, 80, 100, 125, 150, 200]%`, animated over 220ms with a cubic ease-out, centred on the middle of the window. "−" steps down. The percentage label updates every frame. 6. Click the percentage label: zoom returns to 100% around the window centre. 7. Click the fit button (four corners icon): zoom and scroll so the content bounds (230, 160)–(1820, 1190) fit the window with 16px side gutters and room for the header and toolbar, never above 100%. 8. Ctrl or Cmd + wheel: continuous zoom around the pointer position, `z × e^(−deltaY/300)`, clamped 33%–200%. Plain wheel scrolls (pans) natively. 9. Keyboard: `+`/`=` zooms in, `-` zooms out, `0` resets to 100%. Arrow keys scroll the board when it has focus (native behaviour of the scroll container). 10. Tool buttons (Select, Hand, Note, Arrow) are a single-choice group: clicking one sets `aria-pressed="true"` on it and false on the rest. Hand is pressed on load. Only the visual state changes in this demo. ## Structure ``` 1280 × 800 (fixed chrome floats over a full-window scroll container) ┌─────────────────────────────────────────────────────────────────────────────┐ │ ┌ header 16,16 ──────────────────────────────────┐ [Share board]│ │ │ Tidewater / Spring identity · meta · avatars ×3 │ 40h, r10 │ │ └─────────────────────────────────────────────────┘ │ │ type colour the harbour, not a café │ │ ┌──────┐ ┌───────────────────────┐ ┌─────────┐ ┌──────┐ │ │ │ Aa │ │ ▓ ▓ ▓ ▓ ▓ 5 chips │ │ harbour │ │crumb │ ← photos │ │ │ │ └───────────────────────┘ │ photo │ └──────┘ │ │ └──────┘ ┌──────────────┐ └─────────┘ ↖ note │ │ ┌──────┐ │ TIDEWATER │ note ↗ ┌───────┐ │ │ │price │ └──────────────┘ │ kelp │ │ │ └──────┘ └───────┘ │ │ packaging ┌ toolbar, centred, bottom 20 ─────────────┐ │ │ │ ▸ ✋ ▢ ↗ │ − 100% + ⤢ │ │ └─────────────────────────────────────────────────────────────────────────────┘ board (world) 2200 × 1400, dot grid 24px, scaled from its top-left corner ``` - `
` fixed at 16/16: `

` with project name and a dimmer "/ board name" span, a meta line, an avatar stack (`aria-label="3 people on this board"`). - `