TITLE: Cover Maker — an editorial press you can compose live

PROMPT: Build a single self-contained HTML page that is a working magazine cover compositor. Two-column app grid (340px control rail + stage) on desktop, single column below 880px. The rail is #f2f0eb paper with a Georgia 900 wordmark "CoverMaker" (Maker in italic #e63946), a monospace tracked kicker, two labelled text inputs for headline and deck, a 4-up palette swatch grid, three layout chips, an issue input, a black PRINT button and a ghost RESET button, and a monospace hint block pinned to the bottom. The stage centres a 3:4 cover: height min(76dvh,660px), aspect-ratio 3/4, container-type inline-size so all cover type scales in cqw units, deep soft box-shadow, and a transform-only entrance. Inside the cover: a full-bleed canvas "photograph" drawn procedurally from the active palette — six large radial gradient blobs in accent, second, ink and light, thirteen rotated overlay light bands, a top/bottom ink split gradient, 1500 grain dots and a radial vignette — plus a scrim gradient, a CMYK flash layer, a scan-line layer, an editable Georgia 900 masthead "APERTURE", a kicker, a Georgia 900 uppercase headline, a monospace deck, three draggable cover lines with red grip dots, a div-based barcode with monospace digits, and issue/price metadata. Three layout variants swap grid-template-areas and the photo inset: classic (full-bleed photo, headline bottom-left), split (photo top 54 percent, headline on paper below), stack (headline at top, photo band in the middle). Palettes: signal #f2f0eb/#111111/#e63946/#457b9d, cobalt, mono and ember — switching sets five CSS custom properties that transition on colour, and cross-fades the canvas photo by interpolating between two RGB colour sets in a rAF loop and redrawing. Layout switching re-composes with transform-only shuffle keyframes. PRINT runs a 950ms sequence: a white scan line sweeps the cover, a stepped CMYK flash cycles cyan/magenta/yellow at low alpha with multiply blending, every type layer gets offset cyan and magenta text-shadows in four steps, and the whole cover jitters one pixel like a press. Cover lines drag via pointer capture on their grip handles (transform translate, clamped), and all cover text is contenteditable. Reset restores every default. Respect prefers-reduced-motion by disabling all keyframes.

DESCRIPTION: A miniature editorial design tool. The left rail reads like a risograph studio's control panel — monospace labels, hairline rules, square buttons, a swatch grid that previews each palette as a split chip. On the right, a real cover hangs in the middle of the stage: a grainy gradient photograph, an enormous condensed serif masthead, an uppercase Georgia headline that rewrites itself as you type, three ruled cover lines you can physically shove around, and a generated barcode. Changing palette reprints the whole cover in a new colourway; changing layout shuffles it into a different editorial grid; PRINT sends it through the press with a CMYK misregistration slap.

TECHNIQUES: procedural canvas photography (layered radial gradients, rotated overlay bands, film grain, vignette) with eased RGB interpolation for palette cross-fades; CSS container queries with cqw-based type scale so the cover is resolution-independent; grid-template-areas layout variants; live input binding; pointer-capture dragging with clamping; seeded div-based barcode generated from the issue string; contenteditable inline text; stepped CMYK text-shadow misregistration keyframes with multiply-blend flash and scan sweep; transform-only entrance and shuffle animations; reduced-motion media query.

INTERACTION: Type in the headline or deck fields and the cover updates on every keystroke; edit the masthead and cover lines directly on the cover; click a palette chip to reprint the colourway with a cross-fading procedural photo; click a layout chip to re-compose the grid with a shuffle; drag the red grip on any cover line to reposition it (clamped); change the issue number to regenerate the barcode and issue stamps; click PRINT for the CMYK misregistration pulse; click RESET to restore every default.