PROMPT

Build a single standalone HTML5 page for a fictional terrazzo maker, "Casa Sabbia, Terrazzo atelier, est. 1962". It is a warm, tactile sample catalogue in which every stone surface is real CSS. The terrazzo is built from many radial-gradient "chips" generated by JavaScript, with no images.

Palette: a warm sand page (#e9dcc6), bone cards (#f7f1e6), clay #c46a4a and terracotta #b5543a accents, charcoal ink #2e2823, muted brown text #7b6e60, and hairlines rgba(46,40,35,.14). Each slab has its own base and four aggregate colours.

Typography: Didot / "Bodoni 72" / "Bodoni MT" / Georgia for the logo, the giant hero line, section heading and sample names. "Avenir Next" / "Gill Sans" / "Helvetica Neue" for body and UI, with uppercase tracked pill labels. ui-monospace for product codes and the pour tag.

Terrazzo engine: a seeded mulberry32 RNG makes about 100 radial-gradient layers per surface:
- 16 large chips, each an ellipse (W × H px at x%, y%, colour 0 to 94% then transparent 100% for a crisp edge) plus an offset second lobe in the same colour, so outlines look broken and irregular
- 34 medium chips
- 36 tiny specks
- two tiled micro-speck layers (background-size 11×13 and 17×15) for fine sand texture
- the slab base colour as the final layer

A scale factor enlarges chips for the hero slab and for a faint fixed full-page backdrop in low-contrast sand tones. The pour animation reveals layers five per frame with requestAnimationFrame, so chips appear to scatter onto the slab.

Layout: the header has the serif logo and a dark pill "Sample box" counter with a clay badge that springs (scale bump) when it changes. The two-column hero has an eyebrow "Collection Nº 7, Poured in Ravenna Vecchia", the headline "Stone, poured slowly." (italic terracotta "slowly.") and a lede about lime, sand, marble, brick and river-glass chips honed for three days. On the right is a large 5:4 slab with an asymmetric radius (28px with a 120px bottom-left sweep), a deep warm drop shadow and an inset rim. A tilted bone "tag" sticker shows the blend name and pour number. Two pills sit on the slab: "Change blend" cycles through the nine blends and "Pour again" reseeds. Next comes "The sample library" with tone filter pills (All, Warm, Neutral, Cool, Bold, using aria-pressed). The grid of nine bone cards has three columns on desktop, with every middle-column card dropped 40px for a staggered rhythm. It auto-fills at minmax(250px, 1fr) on smaller screens.

Each card has a 4:3 terrazzo slab, a hover-revealed circular ↻ reshuffle button that spins, the serif name and mono code (CS-014 and so on), four pebble-shaped aggregate swatches, the finish and price per m², and a "Request sample" toggle. The toggle turns clay with "In your box ✓" and updates the header counter. The blends are Siena Dusk, Olive Grove, Rosa Marina, Basalt Salt, Saffron Bloom, Lagoon Chip, Cotto Rust, Ivory Quarry and Pomegranate. The footer carries the atelier address and lead time.

Motion: a polished sheen (a 115-degree white gradient band) sweeps across a slab on hover, cards lift and tilt -0.4 degrees with eased shadows, buttons have spring easing, and filtering re-staggers visible cards with a rise-in animation (55 ms steps). With prefers-reduced-motion, pours render instantly and sheen, lift and entrance animations are removed.

Responsive: below 820px the hero stacks and the tag moves inside the slab. At 375px the grid is a single column and nothing overflows horizontally.

Title: Casa Sabbia Terrazzo

Description: A warm, editorial product catalogue for an invented terrazzo atelier. Every stone surface is generated live from about a hundred seeded radial-gradient chips. A large hero slab can be "poured" again or switched to a new blend, and chips scatter on in an animated reveal. Below it, a staggered library of nine sample cards in sand, clay, olive, saffron and lagoon tones can be filtered by tone, reshuffled one at a time and added to a sample box. Didot headlines, Avenir body text, polished sheens and springy micro-interactions give it a crafted, premium feel.

Visual techniques:
- Procedural terrazzo from stacked radial-gradient ellipses with hard colour stops and a seeded PRNG
- Two-lobe chips for irregular aggregate silhouettes, plus tiled micro-speck layers
- Progressive per-frame layer reveal for a "pouring" animation
- Hover light sheen via a translating gradient pseudo-element
- Asymmetric border radius, inset rims and warm layered shadows
- Staggered three-column grid offset and filter-driven staggered entrance animations
- Spring-eased buttons, a spinning reshuffle control and a bumping counter badge
- Low-contrast terrazzo backdrop for the whole page
- prefers-reduced-motion support

Interaction model: In the hero, "Pour again" scatters a fresh arrangement of chips onto the big slab and "Change blend" switches to the next of nine aggregate recipes, updating the tag's name and pour number. Tone filter pills show warm, neutral, cool or bold samples, and the visible cards re-enter with a stagger. Hovering a card lifts it, sweeps a sheen across its slab and reveals a ↻ button that reshuffles that sample's chips. "Request sample" toggles the sample into the box and the header counter updates with a springy bump. Every control is a keyboard-focusable button with a visible focus ring.