TITLE: Clay Set — Nine Puffy Icons in One File
PROMPT: Build one self-contained HTML page: a claymorphism icon-set showcase on a soft paper background. Palette #f6f4ef background, #ffd9c0 clay peach, #c9e4ff clay blue, #d9f2d0 clay mint, #3b3a4a ink. The body is a warm off-white with a 22px radial dot grid. A centred page (max-width 1120px) holds a header row: a pill tag "Set 04 / Clay" with inset white and ink shadows, an 800-weight display headline "Clay Set" at clamp(32px,7vw,80px) with -.05em tracking, a Georgia italic subtitle "nine puffy icons, pressed in code", and a matte/glossy segmented switch whose buttons sit in a recessed inset track and lift to a white pill with aria-pressed state. Below is a 3x3 grid (2 columns under 820px, 1 column under 520px) of soft cards: #fffdfa, 28px radius, 1px hairline, centred content, and a hover/focus-within lift of translateY(-6px) with a long soft shadow. Each card contains a focusable button wrapping a clay shape — a 32%-radius square with a radial white highlight over its pastel colour and four stacked box-shadows (inset top white, inset bottom ink, two outer drops) for extrusion — holding one inline SVG icon stroked in ink with 2px round-cap strokes: spark, bell, cloud, leaf, drop, moon, star, bolt, heart, each with a Georgia italic name and a monospace spec line. Every clay shape idle-breathes on a 5.4s scale loop with staggered negative delays, and cards pop in with a transform-only keyframe staggered 50ms apart by nth-child. Clicking or activating a button restarts a 0.62s springy squish keyframe (scale 1.15/.83 -> .9/1.12 -> 1.04/.97 -> 1) that also animates the inset shadow to read as compression, and the class is removed on animationend. The Glossy button toggles a body class that scales a small blurred specular pseudo-element in from 0 and deepens the extrusion shadows. Footer carries two monospace notes. One IIFE, no external assets, no http substring, system fonts only, prefers-reduced-motion removes every animation and disables the squish.
DESCRIPTION: A design-system page where the icons are the product. Nine pastel clay squares sit in a tidy 3x3 field of soft cards, each with a hairline border and a whisper of a shadow so the grid feels pressed rather than drawn. The icons breathe almost imperceptibly; press one and it squashes like real clay and springs back with an overshoot. A matte/glossy switch changes the whole set's lighting in one move, swapping flat soft extrusion for a wet specular highlight and deeper contact shadows.
TECHNIQUES: claymorphism built from stacked multi-layer box-shadows (inset top highlight, inset bottom ink, two outer drops) plus a radial-gradient highlight; a scale-only ::after specular that animates in for the glossy finish; springy multi-stop squish keyframes that animate transform and box-shadow together with animationend cleanup; staggered transform-only pop-in via nth-child animation-delay with backwards fill so hover transforms still work afterwards; staggered negative-delay breathing loops; inline SVG icons stroked with 2px round caps; segmented switch with aria-pressed and inset track shadows; focus-within mirroring the hover state; reduced-motion media query and a JS guard that skips the squish entirely.
INTERACTION: Hover a card to lift it and bring its spec line to full strength and full ink colour; focus the icon button with the keyboard to get exactly the same lift and emphasis, plus a visible focus ring. Click or press Enter/Space on an icon to squish it — the clay compresses, overshoots and springs back. Press Matte or Glossy to switch the whole set's finish, which slides a soft specular highlight onto every clay shape and deepens the shadows. With prefers-reduced-motion the pop-in, breathing and squish are all disabled, leaving the complete static set visible.