# Terrazzo background > **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 generated terrazzo floor as a full-frame background, shown behind the hero of "Casa Brecce", a small studio that hand-casts terrazzo tiles. One inline `` holds three `` layers of irregular polygon chips (fine flecks, medium chips, a few large shards) generated from a seeded PRNG, so batch 4182 always looks the same and "Reshuffle chips" pours a new batch. Chips reference five colour classes, not hex values, so switching between the Verona, Nero and Palma stones is a pure CSS variable swap that cross-fades in 420ms. Moving the pointer shifts the three layers by 3, 8 and 16px, so the floor gains a little depth. The copy sits on a cream "sample label" card with a hairline border, which is how a stone sample is actually labelled. ## Reference behaviour 1. Initial state: Verona stone (cream `#EFE6D8` with rust, ochre, sage, charcoal and white chips), batch 4182, label "Sample 012 · Verona". 2. The floor is static until the pointer moves. Pointer position maps to `(-1…1, -1…1)` from the viewport centre; each layer eases toward `offset × depth` (depths 3, 8, 16px) with factor 0.08 per frame, and the loop stops itself once the remaining distance is under 0.002. 3. "Reshuffle chips" picks a new seed in 1000–9999, updates the readout ("Batch 1806"), the label code ("Sample 061 · …", code = seed mod 97 + 1, three digits) and regenerates all chips. The new layers fade in from 0 with stagger 0 / 90 / 180ms over 420ms. Its icon rotates −120° while pressed. 4. Stone radios: Verona, Nero (charcoal `#2A2826` base with white, salmon, brass, slate chips), Palma (plaster pink `#F2C9B8` with bottle green, terracotta, cream, marigold). Background, chip fills, button colour and label name update; colours cross-fade 420ms. Chip geometry does not change. 5. "Pointer parallax" switch (`aria-pressed`, default on) disables the effect; turning it off eases layers back to 0. 6. Resizing regenerates the same seed for the new size after a 150ms debounce. 7. Hidden tab cancels any running parallax frame; it resumes on the next pointer move. 8. `prefers-reduced-motion: reduce`: parallax starts off (switch shows off and can be turned on), reshuffle swaps instantly with no fade, transitions drop to 1ms. ## Structure ``` 1280 × 800 svg.floor fixed, inset −24px (bleed for parallax) · .sheen · .page ┌──────────────────────────────────────────────────────────────────────┐ │ ┌ Casa Brecce ──────────────────────── Tiles Worktops The studio Trade ┐ │ nav card 56px, 24px/40px margins │ └─────────────────────────────────────────────────────────────────────┘ │ │ ┌ label card 600px ───────────────┐ ▲ ◆ ▪ · ▰ · ◣ · ▪ · │ │ │ SAMPLE 012 · VERONA PORTO, PT │ · ▪ ◆ · ▲ · · ◢ ▪ │ │ │─────────────────────────────────│ ▪ · ▲ ▪ · ◆ · · │ │ │ Floors poured │ · ◣ · ▪ · ▰ · ▪ · │ │ │ by hand, chipped │ │ │ │ by chance. 64px serif │ ┌ Mix Batch 4182 ┐ │ │ │ sub 17px, max 460px │ │ [↻ Reshuffle chips]│ │ │ │ [Order a sample box →] │ │ STONE [V][N][P] │ │ │ └─────────────────────────────────┘ │ Pointer parallax ●│ │ └────────────────────────────────────────────────────┴───────────────────┘─┘ page padding 40px; panel 264px, 40px from right and bottom ``` - `