TITLE: SALT & EMBER — braised short ribs, an editorial recipe
PROMPT: Compose 'SALT & EMBER', an editorial recipe experience for braised short ribs: full-viewport chapters (mise en place, sear, braise, rest, plate) with dramatic overhead food art built from layered radial-gradient plates and animated SVG steam wisps, ingredients as elegant typographic tables, timer callouts, and chef's notes in italic margins. Palette: char, ember orange, cream, sage garnish. Interactions: a sticky progress ring with step ticks; each step's timer is tappable (countdown with a soft chime, WebAudio gesture-gated); scroll-triggered staggered reveals; a servings stepper scales all quantities with smooth number morphs; a PRINT view reformats to a clean single page. Delicious typography, zero photos needed.
DESCRIPTION: A five-movement editorial braise set in char, ember orange, cream, and sage. The masthead carries a ledger-style ingredients table with dashed rules; five full-viewport chapters (MISE EN PLACE → SEAR → BRAISE → REST → PLATE) alternate typographic columns with dramatic overhead "food art" — plates built purely from layered radial-gradient discs (rim shadow, inner well) with per-step radial-gradient food pieces and SVG steam wisps that draw themselves on reveal. Chef's notes sit in italic sage margins, every step has a tappable timer callout, and a sticky progress ring with step ticks orbits in the corner. A servings stepper rescales the whole ledger with smooth cubic number morphs, and PRINT view flattens everything to a clean single page.
TECHNIQUES: Data-driven DOM generation (steps and ingredients from JS models); layered radial-gradient plate composition with box-shadow depth and staggered reveal delays; stroke-dasharray/dashoffset SVG steam draw-on; IntersectionObserver-triggered staggered reveals; SVG progress ring (dashoffset arc + generated step tick marks) updated on passive scroll; cubic-eased requestAnimationFrame number morphing for quantity scaling with per-row state; gesture-gated WebAudio two-note chime (880/1320 Hz sine, linear attack, exponential decay) behind a chime toggle; print-mode class restructuring the layout without a second page; prefers-reduced-motion disables reveals, steam animation, and morphs.
INTERACTION: Scroll advances staggered chapter reveals and the sticky progress ring with step ticks. Tap any step's TIMER to run a real countdown (running/done states, soft chime when it ends if chime is on). The servings stepper (−/+, 1–12) smoothly morphs every ingredient quantity. PRINT view reformats the piece into a clean single page and back.