TITLE: Glitch Lab — a poster rendered by a broken signal path
PROMPT: Build a single self-contained HTML page (no external assets, no libraries, all CSS in one inline <style>, all JS in one inline <script> at the end of body) called "Glitch Lab". Concept: a chromatic-aberration laboratory built around a fully procedural printed poster — type and geometry only, no photographs — that the visitor can deliberately break. Palette: #0c0c0f base, #ff2d78 split red, #00e5ff cyan, #39ff88 green, #f2f2f2 type. Layout: a two-column grid, min-height 100dvh, left column is a portrait poster stage with aspect-ratio 4/5 (height min(76dvh,880px) on desktop, width-driven on mobile), right column is a control panel, and a full-width mono readout strip spans both columns at the bottom. The poster is injected as an HTML string into several absolutely stacked layers: a base layer holding coloured geometry (a 3.4% wide #39ff88 bar on the left edge, a large outlined #ff2d78 circle with an inner ring top-right, a #00e5ff quarter-disc bottom-left, a radial-gradient dot matrix bottom-right, a hairline rule and two mono caption lines), plus three ghost layers that contain only the two display words and carry a per-layer --ink custom property (#ff2d78, #39ff88, #00e5ff) with mix-blend-mode:screen so the three tints recombine to white when aligned and fringe into chroma when offset. Type: display in Impact / "Arial Narrow" / system-ui at calc(var(--pw) * .196) where --pw is the stage width in px set from getBoundingClientRect, with a solid "GLITCH" and an outlined "LAB" (-webkit-text-stroke in the layer ink); panel labels in ui-monospace uppercase, 9-10px, 0.2-0.32em tracking. Motion: continuous subtle jitter is done entirely in CSS with four steps(1,end) keyframe sets whose translate values are built from calc(var(--sx,0px) + Npx) so the JS-set RGB split offset rides inside the animation and no per-frame transform writes are needed. Glitch systems: (1) RGB split — three ghosts offset by --sx/--sy scaled from a 0-30 slider; (2) scanline tear — up to eight horizontal slice windows are rebuilt on parameter change, each an overflow-hidden band holding a full copy of the poster markup offset by -top and translated horizontally, giving genuine torn transport bands; (3) block displacement / datamosh — a DPR-scaled canvas over the stage that each frame erases itself with destination-out and then, in 'lighter' mode, copies random blocks of itself onto new positions and stamps palette-coloured blocks, producing a real mosh smear with decay; (4) noise — a 128x160 canvas filled once with sparse white alpha grain, CSS-scaled with image-rendering:pixelated and screen-blended, opacity driven by a custom property; (5) a multiply-blended repeating-linear-gradient scanline overlay and a radial vignette. Interaction: four sliders (rgb split 0-30, tear 0-100, blocks 0-100, noise 0-60) update the live readout; two toggle buttons (scanlines, grain) with aria-pressed; a large pulsing "Break it" button randomises every parameter to violent values, applies a 0.92s skew/translate burst keyframe to the stage and then settles the parameters back to their previous values with a 680ms lerp in the rAF loop; keys 1-4 load four presets (clean, vhs, mosh, melt); clicking the poster toggles a frame lock that pauses all animations, boosts split/tear and shows a red "frame locked" badge. All state is declared above boot, the canvas is sized with devicePixelRatio and setTransform, entrance reveals never use opacity 0->1, prefers-reduced-motion disables the jitter and pulse animations, and everything lives in one IIFE with zero console errors.
DESCRIPTION: A punk-Swiss poster on a dark stage, deliberately routed through a broken signal path. The poster itself is composed of a huge solid "GLITCH", an outlined "LAB", a green edge bar, a pink outline circle, a cyan quarter-disc and a dot matrix — printed flat, then split into red, green and cyan ghost layers that fringe and shimmer with a stepped jitter. The right-hand panel is a laboratory console: four fault sliders, two toggles, and a big red button that tears the image apart for a second before it snaps back. The bottom strip prints every live parameter like an instrument readout. It should feel like a design-studio toy that turns a clean poster into a broadcast failure.
TECHNIQUES: Chromatic aberration by three screen-blended tinted copies with per-layer --ink and JS-driven --sx/--sy offsets; CSS steps(1,end) jitter keyframes that consume var() offsets so no per-frame JS style writes are needed; clip-window tear bands each holding a full poster copy offset by -top; self-referential canvas datamosh (destination-out decay + 'lighter' block copies + palette stamps) on a DPR-scaled, setTransform-managed canvas; procedural grain canvas with image-rendering:pixelated and screen blend; custom-property-driven opacity for the grain; multiply scanline gradient; radial vignette; burst skew/translate keyframe; parameter settling lerp inside the rAF loop; Impact display type sized from a JS-measured --pw pixel variable so copies at any container size stay identical.
INTERACTION: Drag the four sliders — rgb split (0-30), tear (0-100), blocks (0-100) and noise (0-60) — and the poster re-glitches live while the readout strip and slider numbers update. Click "scanlines" or "grain" to toggle those overlays (both default on). Click the big red "Break it" button to fire a violent 0.9-second burst: every parameter jumps to a random extreme, the whole stage shakes and skews, the datamosh canvas floods with displaced blocks, then the values settle smoothly back to where they were. Press keys 1-4 to load the clean, VHS, mosh and melt presets. Click the poster itself to freeze the current frame — all animations pause, the split and tear are boosted, and a red "frame locked" badge appears; click again to release. Resizing re-measures the stage, re-sets --pw/--ph and rebuilds the tear slices and canvas resolution.