DeepSeek v4.1 100 HTML Files

Original prompt · 001-aurora-glass.txt

Build a single self-contained HTML page: a full-screen hero for a fictional aurora research observatory. Canvas-painted polar night sky (vertical gradient #03070f -> #050b1a -> #08152f -> #0e2a4d with a deep-blue horizon halo) plus ~200 twinkling stars. Four sine-warped aurora ribbons drift on requestAnimationFrame, each a closed path filled with a vertical linear gradient (transparent -> teal #5eead4 / violet #a78bfa / mint -> transparent) composited with globalCompositeOperation 'lighter', plus a soft bloom stroke pass and thin vertical curtain rays. Floating frosted glass hero panel: 26-64px padding, 16-26px radius, background linear-gradient(160deg, rgba(248,250,252,.12), rgba(248,250,252,.055), rgba(14,42,77,.20)), 1px rgba(248,250,252,.15) border, backdrop-filter blur(22px) saturate(150%) with an @supports solid fallback. Content: small-caps teal eyebrow "Aurora research observatory · 78.9°N" with a trailing gradient rule, ultra-light system-ui headline clamp(2.6rem,7vw,6rem) with a 220%-wide animated gradient background-clip:text sweep, a 46ch light-grey subline, and two pill CTAs (primary teal/violet tint, ghost) that lift -3px on hover with a teal glow bloom. Anchored bottom frosted 3-stat bar (Kp index 7.4, solar wind 612 km/s, dome temp -38 °C) with tabular-nums gradient numerals counting up on load via rAF ease-out-cubic. Fixed CSS grain overlay (three repeating-linear-gradients, mix-blend-mode overlay) and a vignette veil. Palette: #050b1a, #0e2a4d, #5eead4, #a78bfa, #f8fafc. System font stacks only, clamp() type, 100dvh shell, 360px-1920px responsive, prefers-reduced-motion renders one static frame and skips count-up.

Original prompt · 002-liquid-chrome-type.txt

Build a single self-contained HTML page: a typography laboratory where one giant word renders as liquid chrome on a black #0b0c10 ground. Centred full-bleed display word (MOLTEN / QUIET / CHROME / DRIFT) set in Impact / "Arial Narrow" / system-ui 900, clamp(3.3rem,15vw,13rem), line-height .86, letter-spacing -.028em. Every letter is its own span carrying two stacked backgrounds clipped to text: a 10-stop vertical metal gradient (#ffffff, #e8e8ec, #c9ccd4, #6d7280, #3b3f4a, #f6f7fa, #9aa0ad, #3b3f4a, #c9ccd4, #9aa0ad) plus a 300%-wide gold specular band (#f6d365 / #fff8dc) whose background-position animates across a 5.2s linear loop with a per-letter negative animation-delay so the glint travels letter to letter. Behind it: a masked blueprint grid of 1px repeating-linear-gradients, a studio radial light, and a faded scaleY(-1) blurred mirrored copy of the word with a linear-gradient mask. A fixed full-screen canvas paints gravity droplets that spawn from each letter on every word change and fade as they fall, drawn as radial-gradient chrome orbs with a white highlight. Layout: thin ui-monospace control rail top-left with four pill word-switcher buttons, tiny mono caption bottom-right, specimen meta top-right. Per-letter spring physics (ox/oy with velocity, damping 0.0004^dt) give the drop-in bounce, an idle sine bob, and a pointer-velocity ripple that falls off with distance from each letter centre. Palette #0b0c10, #e8e8ec, #9aa0ad, #3b3f4a, #f6d365. Geometry is read once per layout change, never per frame. prefers-reduced-motion stops the loop, freezes the sweep, and places letters at rest.

Original prompt · 003-brutalist-concrete-poster.txt

Build a single self-contained HTML page: a full-bleed canvas cyberpunk alley at night in the rain, drawn in ordered passes every requestAnimationFrame. Pass 1 sky: vertical gradient #06070d to a violet horizon haze, filled oversize so a decaying screen shake never reveals an edge. Pass 2 architecture: two bilinear-quad building walls (left corners 0,0 / W*0.36,0 / W*0.44,H*0.60 / 0,H*0.86; right mirrored) filled near-black with a seeded LCG PRNG generating grids of unlit and amber/cyan-lit window rectangles scaled by depth. Pass 3 asphalt: floor polygon between the wall bases filled with a #06070d-to-#0d0f18 gradient. Pass 4 neon: seven abstract glowing signage bars (magenta #ff2d78, cyan #00e5ff, amber #ffb020, violet #7c4dff) with per-sign flicker phases and additive radial halos, plus a far-end streetlight glow. Pass 5 reflection: for each sign a vertically mirrored, 7-strip wave-distorted copy on the floor (strip offsets driven by sin(clock*2.2 + strip + phase)) plus a long additive gradient smear, all clipped to the floor polygon with 'lighter'. Pass 6 puddle ripples: expanding perspective-squashed ellipse rings. Pass 7 rain: ~900 batched line streaks in two depth layers, angle from a gusting wind field, one beginPath/stroke per layer. Pass 8 fog: four drifting additive radial gradients. Pass 9 flash: a decaying white-cyan overlay plus two jagged bolt polylines on lightning. Mono HUD readout top-right (rain %, wind, neon status) refreshed at 4 Hz, wide-tracked ultra-light title lower-left, CSS scanline and vignette overlays. Click fires lightning, screen shake and WebAudio thunder (brown noise through a 420 Hz lowpass with exponential decay); holding pours harder rain; the pointer carries a light that brightens nearby reflections. prefers-reduced-motion renders one still frame and disables shake and flashes.

Original prompt · 004-neon-rain-alley.txt

Build a single self-contained HTML page: a full-bleed canvas cyberpunk alley at night in the rain, drawn in ordered passes every requestAnimationFrame. Pass 1 sky: vertical gradient #06070d to a violet horizon haze, filled oversize so a decaying screen shake never reveals an edge. Pass 2 architecture: two bilinear-quad building walls (left corners 0,0 / W*0.36,0 / W*0.44,H*0.60 / 0,H*0.86; right mirrored) filled near-black with a seeded LCG PRNG generating grids of unlit and amber/cyan-lit window rectangles scaled by depth. Pass 3 asphalt: floor polygon between the wall bases filled with a #0d0f1a-to-#05060b gradient plus faint receding kerb lines. Pass 4 neon: seven abstract glowing signage bars (magenta #ff2d78, cyan #00e5ff, amber #ffb020, violet #7c4dff) with per-sign flicker phases and additive radial halos, plus a far-end streetlight glow. Pass 5 reflection: for each sign a vertically mirrored, 7-strip wave-distorted copy on the floor (strip offsets from sin(clock*2.2 + strip + phase)) plus a long additive gradient smear, all clipped to the floor polygon with 'lighter'. Pass 6 puddle ripples: expanding perspective-squashed ellipse rings. Pass 7 rain: ~900 batched line streaks in two depth layers, angle from a gusting wind field, one beginPath/stroke per layer. Pass 8 fog: four drifting additive radial gradients. Pass 9 flash: decaying white-cyan overlay plus a jagged bolt polyline on lightning. Mono HUD readout top-right (rain %, wind, neon status, visibility bar) refreshed at 4 Hz, wide-tracked ultra-light title lower-left, CSS scanline and vignette overlays. Click fires lightning, screen shake and WebAudio thunder (brown noise through a 420 Hz lowpass with exponential decay); holding pours harder rain; the pointer carries a light that brightens nearby rain and reflections. Palette #06070d, #ff2d78, #00e5ff, #ffb020, #7c4dff. prefers-reduced-motion renders one still frame and disables shake and flashes.

Original prompt · 005-organic-blob-brand.txt

Build a single self-contained HTML page: a brand page for a fictional bio-design studio on a cream #f6f1e7 ground with a CSS paper texture (two fine repeating-linear-gradients plus soft terracotta and olive radial washes). Split layout: left column with a small tracked uppercase eyebrow with a terracotta dot, a Georgia italic wordmark "Morphos." at clamp(3.1rem,8.4vw,7rem) with a terracotta full stop, a serif lede, a four-row hairline service list (01 Grow / 02 Bend / 03 Bloom / 04 Cure with italic descriptors) and a mono meta footer; right column a 2x2 cluster of four huge organic clay blobs that reflows to one column under 560px. Each blob is a real button with aspect-ratio 1, a nine-value animated border-radius keyframe (58% 42% 47% 53% / 46% 54% 46% 54% cycling through four organic states over 15-21s with staggered negative delays), a radial-gradient clay body in olive #6b7f59, terracotta #e2725b, honey #f2c14e and espresso #2f2a26, dual inset shadows for clay depth, an outer contact shadow, and a slowly rotating conic-gradient sheen layer clipped by overflow:hidden. Behind the wordmark a morphing terracotta halo blob drifts. Hover or focus inflates a blob to 1.055, lifts its uppercase label 7px and dims its siblings to 0.42 opacity and 0.95 scale; pointer proximity pulls each blob toward the cursor with squared falloff via --px/--py custom properties on a rAF-throttled transform. Clicking a blob (or a service row) opens an inline detail panel using the grid-template-rows 0fr to 1fr technique with a serif italic heading, body copy and tag pills; Escape or Close collapses it. All state declared above boot, geometry cached once per layout change, prefers-reduced-motion disables morph, spin and pull.

Original prompt · 006-editorial-magazine-spread.txt

Build a single self-contained HTML page that renders a two-page luxury magazine spread called "THE QUIET ISSUE" as if it were printed on warm uncoated stock and photographed flat. Palette: paper #f4efe6, ink #1c1a17, oxblood #8c1c13, hairline rule #b9ac93, parchment #d9c9a3, with a darker desk tone #e6dfd2 behind the sheet. Layout: a centered sheet with a soft drop shadow; inside it a CSS grid of two equal pages separated by a full-height gutter made from a multi-stop linear-gradient plus a 1px hairline; the whole thing collapses to a single column under 820px and the gutter rotates to a horizontal shadow. Left page: a masthead strip (mono, .62rem, .28em tracking, uppercase) with "The Quiet Issue" / "No. 07 · September 2026" / "Folio 34–35" above a 1px ink rule; then a kicker in oxblood mono caps, a monumental coverline in Georgia 700 clamp(2.4rem,6vw,5.4rem) at line-height .9 and -0.022em tracking with the word "Quiet" italic in oxblood, an italic serif deck capped at 34ch, and a mono byline with a rule above it. Then essay section 01 "The Argument for Silence" set in two CSS columns with column-rule 1px #b9ac93, justified text, hyphens auto, and an oxblood ::first-letter drop cap floating at 3.9em. Right page: a pull-quote in italic Georgia clamp(1.3rem,2.4vw,2.1rem) under a 1px ink rule with a 2px oxblood underline that draws itself via transform scaleX, a mono cite, then a numbered contents list (01–04) whose rows reveal a 3px oxblood left bar (scaleY) and a sweeping oxblood underline (scaleX) on hover/focus, then sections 02–04 with the same .sec heading pattern. Paper grain comes from layered radial-gradients plus two repeating-linear-gradients at 2–3% ink alpha. Folios sit absolutely at the bottom of each page in mono caps. Motion: entrance reveals are transform-only (translate3d 32px → 0) staggered by a --d custom property, armed by a JS class so a no-JS or frozen-clock render shows the complete page; the gutter shadow parallaxes ±7px against scroll through a --gx custom property with a dirty-gated rAF write. JS is one IIFE at the end of body: adds the armed class, IntersectionObserver fires the pull-quote underline, a passive scroll listener parallaxes the gutter, and contents links smooth-scroll to their section. Respect prefers-reduced-motion by disabling the entrance animation, the underline draw, the parallax and all transitions. All CSS in one inline style block, all JS inline, zero external anything, and the substring "http" must not appear in the file.

Original prompt · 007-kinetic-type-clock.txt

Build a single self-contained HTML page that is a full-viewport kinetic-type clock. Palette: charcoal #111114 ground, bone #f2f2ef, vermilion #ff5c39, cobalt #3a86ff, sun #ffd166. Layout: one stage filling 100dvh as a three-row grid (topbar / rows / baseline) with clamp padding. Behind the type, a huge conic-gradient progress ring — background: conic-gradient(from -90deg, #3a86ff calc(var(--sweep,0) * 1turn), rgba(242,242,239,.055) 0) — cut into an annulus with mask: radial-gradient(closest-side, transparent 73.5%, #000 74%); two sibling rings give a hairline circle and a sun-coloured tick dot that rotates with the sweep, all centred with translate(-50%,-50%). The three stacked rows are HOUR / MINUTES / SECONDS: a right-aligned mono .56rem uppercase label and an overflow-hidden stage of height clamp(2.9rem,13.5vw,9.6rem) for the hour, clamp(1.9rem,8.8vw,6.1rem) for minutes and clamp(1.35rem,5.9vw,3.5rem) for seconds, each coloured bone / sun / vermilion. Each stage holds absolutely-positioned .word spans in a flex row, white-space nowrap, font-size calc(var(--h) * .86). Time is spelled in English words (zero…fifty-nine, hyphenated tens); hour honours 12/24h. Four type styles selectable with keys 1–4: data-style="1" forces "Arial Narrow" condensed grotesk everywhere, "2" forces Georgia 900 slab, "3" forces ui-monospace, "4" is the mixed default (hour condensed, minutes slab, seconds mono). Motion: per-letter spans carry transition-delay: var(--ld) and slide on transform translate3d(0,118%,0) → 0 with a .5s cubic-bezier(.2,.86,.2,1) inside an overflow-hidden mask; the outgoing word slides to translate3d(0,-118%,0) and is removed after 700ms; the initial paint never animates so a frozen render is complete. The loop is a drift-corrected requestAnimationFrame reading the real clock every frame, writing --sweep to the ring and updating only the row that changed; an hour rollover recomposes all three rows with staggered delays. The numeric HH:MM:SS readout is deliberately held back 620ms after a word swap so it never contradicts the word mid-transition. Baseline shows the long date (Intl), the numeric readout, the resolved IANA timezone and pill chips for 24H and styles 1–4. Click anywhere on the stage toggles 12/24h; hover the stage slows the tick (transition-duration 1.15s and a larger letter stagger); space pauses the ambient motion and flips the status line. prefers-reduced-motion: reduce kills all letter transitions and the row entrance animation. One inline style block, one inline script IIFE at the end of body, zero external references, and the substring "http" must never appear.

Original prompt · 008-particle-galaxy.txt

Build a single self-contained HTML page containing a full-bleed interactive spiral galaxy on a 2D canvas. Palette: void #030308, violet #8a7dff, cyan #4cc9f0, magenta #f72585, warm star #fff1c9. Canvas is position:fixed inset 0, width/height 100%, touch-action:none, cursor crosshair; a second fixed layer paints a radial-gradient vignette (transparent 42% to rgba(0,0,0,.62)) above the canvas but below the UI. Sizing: DPR = Math.min(devicePixelRatio, 2); canvas.width = Math.round(cssW * DPR); canvas.height likewise; ctx.setTransform(DPR,0,0,DPR,0,0); fill the surface with #030308; recompute CX/CY and rebuild the particle field on a debounced resize (160ms). Particle field: 1400–3200 particles chosen by Math.max(1400, Math.min(3200, round(W*H/620))), stored in Float32Array typed arrays (px, py, pvx, pvy, pph, pamp, psz) plus a Uint8Array colour index; seed three log-spiral arms with r = RMIN * pow(RMAX/RMIN, pow(random,0.82)), phi = arm*(2π/3) + ln(r/RMIN)/0.34 + jitter, initial tangential velocity from omega = OMEGA * pow(RMAX/(r+RMAX), 0.55) with OMEGA = 2π/15. Physics per frame: a central force ax = -dx*omega², ay = -dy*omega² (near-solid-body rotation so the arms keep their shape), plus a clamped inverse-square cursor force ax += cx*inv*mag with mag = gravLevel*3200/d² clamped to 900 and inv = 1/sqrt(d²+700); the sign flips to repel while the pointer is held. Render: source-over fade of rgba(3,3,8,0.16) for low-alpha trails, then composite 'lighter' additive, four pre-bucketed colour passes (violet/cyan/magenta/warm-star) each with one fillStyle write and per-particle fillRect with a 0.5–2.8px sinusoidal shimmer offset; a pulsing radial-gradient core (0.5 warm star → 0.2 magenta → transparent) breathing on sin(T*1.35); expanding cyan shockwave arcs on detonation. Interaction: pointermove attracts, pointerdown holds to repel, dragging applies a velocity impulse to particles within half the viewport weighted by 1-distance/R, a short unmoved click detonates a supernova (radial impulse over 0.34 * min(W,H) plus a 1.1s shockwave), the wheel scales glow 0.35×–2.2×, and a styled range input drives gravity 0–100%. A bottom-left mono legend (Particles / Gravity / Glow / FPS, .58rem, .2em tracking, uppercase) refreshes every 15 frames. Centred system-ui 200 title clamp(1.6rem,4vw,3rem) slides in via transform and fades out after 8s. prefers-reduced-motion: reduce scales simulation time by 0.18 and removes the title animation. One inline style block, one inline IIFE script at the end of body, no external references, and the substring "http" must never appear.

Original prompt · 009-luxury-watch-product.txt

Build a single self-contained HTML product page for a fictional luxury automatic watch, with no images of any kind. Palette: obsidian #0a0a0b, gold #c9a227, ivory #e9e6df, slate #1d1d20, bronze shadow #6f6a5f. Type: display Georgia 400 uppercase with .14em tracking at clamp(2.6rem,6.6vw,5.6rem); specs in ui-monospace .56–.62rem uppercase with .28em tracking; CTA in system-ui 500 .66rem with .34em tracking. Structure: a fixed 2px scroll rail at the very top whose gold gradient fill is scaleX-ed by scroll progress; a fixed top bar (brand in mono .68rem/.52em, three mono nav links, a gold "Acquire" label) that gains a translucent backdrop-filter background and a gold hairline after 40px of scroll; then a split hero on a 1fr/1.05fr grid, min-height 100dvh, max-width 1680px: left column holds an eyebrow with a gold rule, the gradient-clipped display name, a mono subline, a lede, a ruled price block ($14,800) and three spec rows (Reference / Movement / Case) that reveal a hidden micro-note on hover via transform translateX(-10px) → 0 plus clip-path inset(0 100% 0 0) → inset(0) and rotate their "+" mark 90deg; the right column is the watch. The watch is pure CSS: a clamp(200px,30vw,352px) square with a conic-gradient gold case (nine stops from #2c2820 through #f7ecc6), a bezel inset 3.5% that layers repeating-conic-gradient tick marks every 6deg over a second gold conic sweep and rotates on a --bezel custom property, a dial inset 11.5% with a radial-gradient obsidian face, a repeating-conic sunburst at 3.5% alpha, 12 hour indices made from repeating-conic-gradient at 30deg masked with radial-gradient(closest-side,transparent 82%,#000 82.6%), tiny mono brand/model/date text, and three hands: hour and minute as clip-path tapered dauphine blades rotated by a --deg custom property with a .9s cubic-bezier transition, and a gold second hand that sweeps 360deg over 60s with animation-timing-function steps(60) and a negative animation-delay aligned to the real second, plus a counterweight tail and a radial-gradient centre cap. A screen-blend sheen overlay rotates with drag on a --sheen property. Behind it a radial-gradient spotlight breathes on a 7.5s scale animation. Below, a three-column detail band (Dial / Movement / Case) on a hairline top rule, revealed by IntersectionObserver adding an .in class that starts a transform-only rise animation; each column's h2 carries a mono numbered eyebrow in gold. JS is one IIFE: live hand angles from Date (h + m/60)*30 and (m + s/60)*6, dial date, pointer drag on the stage rotating bezel by dx*0.55 and sheen by dx*0.22 with pointer capture, a CTA click that replays a 1.05s gold sheen sweep, and a dirty-gated passive scroll handler writing the rail scaleX, the .is-stuck class and a --p custom property that translates the watch -26px, scales it 1.07 and rotates it 2.2deg. Respect prefers-reduced-motion by disabling the spotlight, the second-hand animation, the reveals, the scroll transform and the sheen. One inline style block, one inline script, zero external references, and the substring "http" must never appear.

Original prompt · 010-retro-crt-terminal.txt

Build a single self-contained HTML page that is a fictional mainframe terminal on a CRT. Palette: black-green #020604 ground, phosphor #39ff88, mint #0affc3, amber warning #ffb000, dim green #06281a. Everything is ui-monospace 14–16px, uppercase headings, phosphor text-shadow 0 0 7px rgba(57,255,136,.42). Layout: a fixed full-viewport .room with a dark radial ambient; inside it one .crt cabinet (flex column, rounded clamp(12px,1.6vw,26px), plastic gradient, deep drop shadow) holding a .screen (flex column, radial-gradient tube face, inset shadows, 1px phosphor inner border) and a .controls strip with an "Orion Systems" plate, four status LEDs and a power button. The screen contains, in order: a header bar (Host ORION-7, Uptime, Load, state) with a phosphor gradient wash and a bottom hairline; a .main grid of two panels (1.55fr / 1fr) — left the event log with its own scrollbar styling, right the telemetry panel with four gauges (CPU, Memory, Network, Tape I/O) each a label row plus a 7px bordered track and a gradient fill, then a hand-authored 44-character box-drawing ASCII sector map with nodes [+] [#] [~] [*] connected by ═ and ║ runs, padded in JS to a fixed width so every column aligns; then the command line (prompt orion-7:~$, mirrored text span, blinking block caret, transparent absolutely-positioned input). Over everything: a repeating-linear-gradient scanline layer (1px dark per 3px), a 16%-height phosphor sweep bar animating translateY over 7.5s, and a glass layer with a radial vignette plus a diagonal highlight. Motion and behaviour: a typing queue types twelve BIOS lines character by character with 2–10ms jitter and a 45–125ms pause between lines, so the machine reaches ONLINE about 3.5 seconds in, then the state machine flips BOOTING → ONLINE, lights the LEDs, enables the input and starts ambient traffic (a new log line every 1.25s from a pool of relay messages and amber warnings), gauge drift every 780ms with >82% turning a gauge amber, an uptime clock every second, and a horizontal sync wobble every 9–15s. Commands: help, status, map, clear, reboot, uptime, whoami, with Tab completion over that list and ArrowUp/ArrowDown history. Holding the power button for 900ms fills a conic-gradient ring via a --hold custom property and fires a 1.15s degauss animation (scaleY collapse to .008, overshoot to 1.07) before replaying the whole boot. prefers-reduced-motion: reduce removes the sweep, wobble, degauss, caret blink, LED blink, line flash and gauge transition, and slows the ambient intervals. One inline style block, one inline script IIFE at the end of body, zero external references, and the substring "http" must never appear.

Original prompt · 011-paper-cut-collage.txt

Build a single self-contained HTML artwork that reads as a physical paper-cutout shadow box. Use a bone card background (#efe7d7) as the mat: a fixed full-viewport stage inset by clamp(9px,2.1vw,34px) with a 5px radius, an inset box-shadow frame of card colour plus a hairline rgba(61,64,91,.20) rule, and a deep soft drop shadow, so the scene sits inside a real frame. Inside, place a perspective:1400px container holding nine absolutely positioned paper layers, each a div with a hand-authored jittered clip-path polygon that reads as a torn edge: sky (solid #2f7183 with a neutral white-to-black shading gradient), star field (twelve tiny radial-gradient dots, opacity driven by a --stars variable), moon (a button holding a sand #f2cc8f disc with a radial highlight, a 70px warm glow and a 1.8s rise-in), far ridge (rgba(61,64,91,.40) indigo, ridge line around 39-52%), mid ridge (#1f4e5f teal, 54-66%), treeline (rgba(23,44,56,.94), spiky 60-75%), sea (#1f4e5f with a mask-faded repeating stripe overlay), foreground bank (#e07a5f with a torn #f2cc8f shore strip) and a separate foreground layer of six swaying indigo clip-path pine triangles. Every layer carries filter: drop-shadow(0 12px 14px rgba(12,32,42,.26)) so the shadow follows the torn silhouette, and each is placed at a different translateZ depth from -170px to 86px with a z-index ladder. Typography: Georgia italic display for the title, ui-monospace 10px letterspaced uppercase for the eyebrow and metadata, system-ui for the hint, all inside a lower-right gallery label card (max 300px, rotated -1.1deg, card-coloured with a hairline border and a 6px card halo). Motion: rAF lerped pointer tilt on the whole box (rotateX/rotateY from pointer position), true scroll parallax where each layer moves at its own data-depth rate with a damped scroll rise for the moon, a paper bird built from inline SVG gliding across on a 27s loop with flapping wings (animation-delay -11s so it is mid-flight on first paint), and a 3px scroll-depth bar at the bottom scaling with scaleX. Interaction: clicking the moon toggles a night palette through CSS custom properties (sky #0b1c26, moon #ece5d8, stars to opacity 1, sea #0d222c, bank #9e5138) with 1.1s background-color cross-fades; hovering a paper layer lifts it 62px in Z and deepens its shadow. Respect prefers-reduced-motion by damping parallax to 18%, disabling the tilt, and parking the bird. One inline <style>, one inline IIFE <script> at the end of body, zero external references.

Original prompt · 012-bauhaus-shape-lab.txt

Build a single self-contained HTML artwork that is an interactive Bauhaus composition playground. Palette: bone #f0ede6, red #d62828, blue #1d4ed8, yellow #f6c500, black #111111. Layout: a 100dvh CSS grid with three rows — a toolbar (brand "BAUHAUS / SHAPE LAB · 1923" in system-ui 700 uppercase with .3em tracking, plus a wrapped row of square 1.5px-bordered buttons: Circle, Square, Triangle, Half, Bar, Shuffle, and a dashed Clear), a fluid DOM stage, and a bottom score strip. The stage holds a giant low-opacity "BAUHAUS" wordmark (system-ui 900, clamp(58px,17.5vw,250px), colour rgba(17,17,17,.055)) behind a 24px graph-paper grid drawn with two linear-gradients. Shapes are absolutely positioned divs: circle (border-radius 50%), square, triangle (clip-path polygon), bar, and half-circle (border-radius 50% 50% 0 0 / 100% 100% 0 0), each with a colour cycling through the palette. Interaction: pointer-capture dragging with live transform writes, release snapping x/y to a 24px grid and rotation to 15° through a springy cubic-bezier(.18,1.5,.36,1) transform transition (transition disabled while dragging, then a forced reflow so the spring actually plays); double-click or the R key rotates the selected shape; Del removes it; Escape deselects; hover or selection draws a 2px black outline offset 6px; toolbar buttons spawn new shapes with a transform-only entrance; Shuffle repositions and re-rotates everything; Clear empties the stage. The score strip recomputes on every release from centre-of-mass balance, stage coverage density, and mean pairwise bounding-box overlap tension, printed as a ui-monospace number out of 100 with a verdict word (Masterful / Composed / Promising / Searching) and three bordered metric bars animating scaleX with a 0.62s ease. Respect prefers-reduced-motion by killing every transition. One inline <style>, one inline IIFE <script> at the end of body, zero external references, no canvas.

Original prompt · 013-solar-orrery.txt

Build a single self-contained HTML artwork that reads as an antique brass orrery. Background midnight #0e0c14 with a radial glow (120% 88% at 50% 44%, #1a1630 → #100d1c → #07060c), a twelve-dot radial-gradient starfield, and two concentric engraved dial rings: a repeating-conic-gradient tick ring (0.32deg brass ticks every 2.4deg, masked to a 68-79% annulus) rotating 360deg over 420s and a dashed inner ring counter-rotating over 620s. Layout: a full-bleed drag field holding a zero-size .system anchored at 50%/50%; a title block top-left in system-ui 600 uppercase .3em tracked ivory with a ui-monospace brass subtitle; a top-right control panel (bordered translucent card) with a brass-accented range input 1-365, a brass ui-monospace readout, a Pause/Play button and an elapsed-time line; a bottom legend of Georgia small-caps buttons with coloured dots; and a right-side data plate (356px, translateX(103%) → 0 on open, 0.66s cubic-bezier(.2,.9,.2,1)) that on narrow screens becomes a bottom sheet. Mechanics: six planets (Mercury, Venus, Earth, Mars, Jupiter, Saturn) with real relative periods (0.2408 to 29.457 years), each on an orbit ellipse whose semi-axes are (r, r·cos(tilt)) drawn as a border-radius:50% div so the stroke stays uniform, with per-planet screen rotation scr and node offset. Every frame integrate phase += (2π / (period·365.25)) · daysPerSecond · dt with daysPerSecond taken from the time-warp slider (1× to 365×, i.e. 1 to 365 simulated days per second), then project: px = r·cos(ang), py = r·sin(ang)·cosEff, screen-rotated by scr + sysRot, where cosEff = clamp(cos(tilt + 0.9°·sin(t/7000 + i·1.31)) · elevation). Planet DOM transforms are translate3d(sx,sy,0) scale(1 + 0.085·sin(ang)·cosEff) translate(-50%,-50%) so discs and labels stay upright and round while sitting on a squashed orbit; z-index steps 12±5 so front planets pass in front of the sun and back planets behind it. Earth carries Luna and Jupiter carries two moons, each with its own period integrated and a thin orbit ring. Interaction: drag the field to add to sysRot (system spins about the sun) and vertical drag to change elevation; hovering a planet or orbit dims every other orbit to 0.2 opacity; clicking a planet or legend chip slides in the data plate with name, glyph, period, diameter, mean distance, day length, satellites and a note. Sun is a radial brass gradient with a 7.5s pulse and layered glow. Respect prefers-reduced-motion by freezing time integration, the dial rotation and the sun pulse. One inline <style>, one inline IIFE <script> at the end of body, no canvas, no SVG, zero external references.

Original prompt · 014-memphis-pop-toy.txt

Build a single self-contained HTML artwork that is a Memphis-design physics playground. Cream #fdf6ec page, full-bleed 100dvh field, and a background layer of drifting dots (radial-gradient pattern, 48px tiles, 48s seamless translate loop) plus four slowly drifting decoration shapes in pink #ff4d6d, teal #2ec4b6 and yellow #ffd166 (a thick teal ring, a yellow triangle, a pink zigzag ribbon, a teal blob) each on a 24-31s ease-in-out drift keyframe. Typography is playful and chunky: a rotated -3.6deg title badge top-left with a black kicker tag, "MEMPHIS POP TOY" in Trebuchet MS / Verdana 700 uppercase at clamp(30px,5.6vw,64px) with a 3px black offset text-shadow and a black ink outline, and a hint line; a black rounded combo pill bottom-right rotated 2.4deg with a 6px pink offset shadow, a yellow COMBO label, an oversized Trebuchet number clamp(46px,8.6vw,82px), a teal multiplication sign and a gradient decay bar; and a bottom strip of cream chips with 3px black borders, 3px offset shadows and a 3px press translate. The physics field spawns DOM pieces: a squiggle (inline SVG wave path with round caps, injected as innerHTML), zigzag (clip-path ribbon), star (10-point clip-path), ring (thick border circle), triangle and blob (irregular border-radius), plus 10-18px confetti squares. Each piece integrates velocity with gravity 1750 px/s², restitution 0.6, wall bounce 0.72 and floor friction 0.86, written as translate3d(x,y,0) scale(sx,sy) rotate(rot) so the squash-and-stretch is screen-aligned, with an impact-driven squash that decays as exp(-9·dt). Interaction: tapping the field spawns the selected family at the pointer with an upward kick; rapid taps inside 900ms build a combo that decays over 1.6s and pops the pill, with a 14-piece confetti burst every 5th milestone; dragging a piece uses pointer capture to fling it (velocity sampled from the last pointer delta, clamped to 2400 px/s); the bottom chips switch the spawn family; the SHAKE chip adds a 0.9s keyframe wiggle to the whole field. Keep the rAF loop dirty-gated so a settled field writes no styles, cap the field at 44 pieces, and respect prefers-reduced-motion by freezing the physics, the confetti and the wiggle. One inline <style>, one inline IIFE <script> at the end of body, no canvas, zero external references.

Original prompt · 015-ink-wash-mountains.txt

Build a single self-contained HTML artwork that reads as a mounted Chinese ink-wash scroll. Palette: rice paper #f7f4ec, ink #1c1c1c, wash grey #6b7280, seal red #9c2b1f, mist #d8d2c4, on a mat of #efe9dc. Layout: a fixed painting panel inset by clamp(9px,2.2vw,38px) with a hairline ink rule and a deep soft shadow, over a 210vh scroll spacer; a vertical title 山水清音 at the right edge in writing-mode vertical-rl (Georgia with Songti SC / Noto Serif CJK SC fallback, .3em tracking, clamp(24px,3.4vw,46px)), a smaller vertical ui-monospace subtitle beside it, a red seal button lower-left (墨 in system-ui 700, rotated -2.4deg, inset hairline, red glow) and a ui-monospace caption along the bottom. Scene: paper fibre texture from two repeating gradients plus two mist radials; six mountain layers whose silhouettes are seeded random-walk ridge polygons (an LCG PRNG drives base/amp/bump sine humps plus a damped drift walk, clamped to 2-97%), stacked from rgba(107,114,128,.13) blur 7px at the back to rgba(28,28,28,.60) blur 0.8px in front, each with a horizontal ink-density gradient so the wet-ink edges read as brushed; a paper-coloured river band from 46% with mask-faded ripple lines; three blurred mist bands (linear-gradient #d8d2c4 with 17px blur) drifting on 34s/47s/61s alternate keyframes and parallaxing with the pointer. The scroll unrolls: a rolled-paper band and a wooden roller dowel sit at 58% height and translate down by progress·42% of the panel while the deep foreground band clip-path opens from inset(0 0 100% 0) to inset(0 0 0 0), revealing a dark foreground ridge and a vertical couplet 山色空蒙 / 水光潋滟. A lone boat (inline SVG hull, sail, mast, seated figure, blurred reflection) bobs on the river with a 7.5s float; hovering or focusing it slides a haiku card out of a clip-path. Six ink dots bleed outward (scale 2.5, blur 2.6px) on hover. Clicking the seal re-inks the scene: a fresh seeded ridge set is built into the hidden group, then the two groups cross-wipe through a 1.05s clip-path transition with the new group above, plus a stamp animation on the seal. Mountain entrance uses transform translateY(26px) plus blur, staggered 95ms, never opacity. Respect prefers-reduced-motion by disabling drift, bob, stamp and transitions. One inline <style>, one inline IIFE <script> at the end of body, no canvas, zero external references.

Original prompt · 016-sound-ripple-lab.txt

Build a single self-contained HTML5 artwork called "Sound Ripple Lab". Canvas fills the entire viewport: a deep pond (#04121a) with a faint cyan (#0ea5e9) grid at 8.5% alpha and a slow drifting specular sheen built from a radial gradient that moves on sin/cos. A slim frosted glass keyboard strip sits centered at the bottom (width min(1180px, 94vw), border-radius 18px, backdrop-filter blur(14px) saturate(1.3), gradient background rgba(226,232,240,.10) to .028, 1px border rgba(226,232,240,.16), inset top highlight). Eight keys mapped to A S D F G H J K, each labeled with a letter plus its frequency in Hz (130.8 … 261.6), each carrying its own --hue custom property running cyan → lime → pink. Each key shows a 2px underline bar in its hue that scales from .55 to 1 on hover; on press it lifts translateY(-5px) scale(.985), gains an inset ring and a colored glow. A "Chord ▸ A G K" button sits at the right end of the strip in lime-tinted glass. Top-left: a monospace readout with a system-ui 200 title "Sound Ripple Lab" (with "Ripple" in cyan) and a live active-tone counter. Top-right: a 24-hour clock in ui-monospace with a pulsing lime dot. Below it a small frosted legend card lists low/mid/high with glowing color dots and the base frequencies. Typography: ui-monospace for all readouts at 10.5–11px with .08–.16em letterspacing and uppercase, system-ui 200 at clamp(20px,3.4vw,40px) for the title. Interaction: pointerdown on a key starts a WebAudio oscillator (sine for even indices, triangle for odd) through a lowpass at 2400Hz and a gain envelope ramping to 0.5 in 12ms then 0.32 in 160ms, all routed through a DynamicsCompressor (threshold -18, knee 24, ratio 6) and a 0.22 master gain; the AudioContext is created and resumed inside the first gesture and every call is wrapped in try/catch. Each hit stamps ripples: concentric rings drawn as 48-segment closed paths with a gentle 3-lobe radial wobble at 1.6% amplitude, additive "lighter" compositing, exponential decay envelope pow(1-life,1.55), up to 3 rings per stamp, plus a filled radial-gradient core that fades in the first 42% of the ripple's life; the same note stamps twice with slightly different strength so chords create moiré interference. Hold sustains the tone and the ripple train; pointer drag across the keyboard performs a glissando; the "Chord" button (or the C key) plays the A–G–K triad with three offset ripple stamps plus mirrored pink reflections. Clicking the canvas stamps a random-hue ripple without audio. Reduced motion freezes the specular sheen in place and calms the pulsing dot and transitions. Everything in one inline <style> and one inline <script> IIFE at the end of <body>, no external anything, canvas sized to cssW*devicePixelRatio with ctx.setTransform.

Original prompt · 017-glass-analytics.txt

Build a single self-contained HTML page: a glassmorphic analytics dashboard for the fictional "Aurora Observatory". Backdrop: body #0b1220 with a fixed aurora layer of three huge blurred (filter:blur(72px)) radial-gradient orbs in rgba(125,211,252,.34), rgba(52,211,153,.24) and rgba(249,168,212,.22) drifting on 26s/34s/30s alternate ease-in-out transform loops, plus a 1px repeating-linear-gradient scanline overlay at 2.8% alpha with mix-blend-mode:overlay. Content shell max-width 1560px, padding clamp(18px,3vw,44px) clamp(16px,3.4vw,48px). Header: Georgia italic title "Aurora Observatory" (span in #7dd3fc) at clamp(24px,3.6vw,44px), an 11px/0.2em uppercase sub-line, and a right-aligned meta row of four tabular-nums figures (CO₂ 414.8 ppm, +1.19 °C, 4.42 Mkm², 0.62 albedo) with 10px tracked labels. Controls row: four pill filter chips (CO₂ #7dd3fc, Anomaly #f9a8d4, Sea ice #34d399, Precip #f8fafc) each with a glowing swatch dot, plus a time-range slider (24–180 days, step 6) styled with a 3px sky gradient track and a 15px white thumb with a sky ring and glow. Bento grid: 4 columns, gap clamp(12px,1.5vw,18px), cards at 20px radius with background rgba(248,250,252,.055), 1px rgba(248,250,252,.13) border, backdrop-filter blur(20px) saturate(1.45), inset top highlight, and a deep drop shadow; an @supports-not fallback sets solid rgba(11,18,32,.9). Cards: (1) 2-column composite index card with a canvas area chart drawing three normalised series into stacked bands with gradient fills, glowing 1.9px strokes, last-point halo dots, inline monospace series labels and a dashed hover crosshair; (2) cryosphere card with two conic-gradient radial gauges masked with radial-gradient to rings, values animated by a 0.09 easing tween; (3) live surface-flux card with a big tabular number and a 40-point canvas sparkline that pushes a new point every 1.5s; (4) emissions share card with six flex bars animated by height transition; (5) full-width wire ticker card with a duplicated marquee row sliding on a 42s linear transform loop, paused on hover. Footer status bar in ui-monospace 10.5px with a glowing mint dot, a live sync clock and sensor count. Typography: system-ui for numbers at 600 with font-variant-numeric:tabular-nums, 10–11px uppercase 500 labels at .14–.2em tracking, Georgia italic headings, ui-monospace for meta. Interaction: chips toggle series on the main chart; the range slider rescrubs every chart's window and label; hovering the main chart shows a crosshair plus a fixed glass tooltip listing each active series value for that day; clicking a card expands it to full grid width (others collapse) and re-fits its canvas; the live card pushes new sparkline points; the ticker pauses on hover. All motion uses transform/height/clip geometry, never opacity 0→1, so a frozen-clock render still shows the complete page. Reduced motion stops the aurora, ticker and reveals. Everything inline: one <style>, one <script> IIFE at the end of <body>, canvases sized cssW*devicePixelRatio with ctx.setTransform, zero external references.

Original prompt · 018-art-deco-marquee.txt

Build a single self-contained HTML page: a gilded art-deco cinema marquee for the fictional "The Gilded Hour". Palette #0d0b08 lacquer, #d4af37 gold, #f3dd8c gold highlight, #f5e6c8 cream, #7a1f2b velvet red, #2b2b2b shadow. Body: radial-gradient(120% 70% at 50% -6%, #2a2113, #171208 34%, #0d0b08 72%) with a fixed 115deg repeating-linear-gradient of 5%-alpha gold hairlines at mix-blend-mode:screen, centered flex layout at 100dvh. Behind the card, a fixed house glow radial gradient in rgba(212,175,55,.26) and a fixed spotlight cone (clip-path polygon 46% 0, 54% 0, 100% 100%, 0 100%, linear-gradient cream fading down, mix-blend-mode:screen) that sweeps rotate(-11deg → 10deg) on a 13s alternate ease-in-out. The marquee: max-width 1080px, background linear-gradient(#1a150c, #120e08 52%, #0a0806), 2px rgba(212,175,55,.55) border, double outer ring via box-shadow (0 0 0 6px #0a0806, 0 0 0 8px rgba(212,175,55,.32)), inset gold bloom, and a clipped ziggurat corner silhouette; two inner ::before/::after frames repeat the stepped clip-path at 10px and 18px insets. Top and bottom bulb strips are 14px tall with radial-gradient(circle at 50% 50%, #f3dd8c 0 1.7px, rgba(212,175,55,.35) 2.4px, transparent 3.4px) at background-size 18px 14px animated background-position 0→18px with steps(9,end) for a chase, plus drop-shadow gold glow; hovering the stage cuts the duration to .55s. A repeating-conic-gradient sunburst (2.4deg gold spokes, 9deg period) sits behind the title at 50% opacity, rotating 360deg over 90s, masked to a soft ring. Title: Georgia 700 at clamp(34px,9.4vw,96px) with .045em tracking and a stacked 4-step gold text-shadow bevel; the words are split into per-letter spans in JS and each gets a staggered clatter animation (translateY(-.42em) rotateX(-58deg) scale(.92) → 0) at 0.055s intervals, so a frozen clock still shows the full title, just tilted. Under it an italic Georgia sub-line and a gold diamond rule. Showtime board: velvet-tinted panel with a gold hairline, header "Showtimes" in system-ui 800 .34em tracked caps plus a hint label, and five rows in a 4-column grid (monospace time in tabular-nums, Georgia italic film name, five seat dots, a tag) that shift right 3px and gain a gold wash on hover. Full-width "coming attractions" ticker duplicates its content and crawls on a 34s linear transform loop, pausing on stage hover. Controls: a "House lights" switch that toggles body.lightsdown (dims the glow and cone, slides the switch knob 19px with a spring cubic-bezier) and a monospace reserved-seat counter. Reduced motion disables the chase, sunburst, cone sweep, ticker and clatter. Everything in one inline <style> and one inline <script> IIFE at the end of <body>, no external references, no 'http' substring.

Original prompt · 019-vaporwave-mall.txt

Build a single self-contained HTML page: a vaporwave mall atrium seen in one-point perspective at dusk. Palette #ffd6e8 pink sky, #b8a9ff lavender, #6ee7f9 cyan, #2b1d3a dusk purple, #f5f0e6 tile. The full-bleed scene is a fixed layer stack. Sky: a 100%×220% six-stop vertical gradient (#1a1230 → #2b1d3a → #6b4f8f → #b8a9ff → #ffd6e8 → #ffe9f2) whose background-position drifts 8% → 42% over a 38s alternate ease-in-out for a slow dusk cycle. A striped retro sun (radial pink gradient, 46vw max, masked by a 12px/18px repeating-linear-gradient of horizontal bands) pulses scale 1 → 1.045. The room is built from two CSS 3D planes meeting at a 52% horizon: the floor is a 300%-wide plane with transform perspective(520px) rotateX(74.5deg) from a top origin, filled with a four-quadrant conic-gradient checkerboard (#2b1d3a / #f5f0e6) at 132px tiles, scrolling 132px per 26s so the floor seems to glide, with an inset 160px vignette and a top-down dark gradient; the glass roof is the mirrored plane (rotateX(-73deg) from a bottom origin) with 90deg repeating mullion stripes in cream, cyan and lavender at 62% opacity. Side vignette walls, a repeating-column layer masked to the edges, a hazy back wall with a glowing cyan light strip, two inline-SVG palm silhouettes (#2b1d3a, four frond groups each swaying rotate -1.6deg → 1.6deg on staggered 7.5–10s loops), a fountain (elliptical basin with radial cyan water gradient, a floating tier, and a canvas jet drawn as a tapering plume with a bright white core plus gravity-simulated droplets and a base pool glow, DPR-scaled), and an inline-SVG escalator (translucent lavender-to-cyan glass balustrade, a 10-step staircase profile stroked with an animated dashed tread, a rounded handrail with a return stub, a dark plinth and a blinking pink lamp). HUD in a fixed layer: wide-tracked "Meridian Mall" title in Trebuchet MS 700 at clamp(19px,4.2vw,52px) with .46em tracking and a pink/lavender neon text-shadow; a frosted store directory panel on the left with eight rows that highlight cyan on hover and dim closed stores; a "Now Playing" cassette widget lower-right with two conic-gradient reels, a tape window and a play/pause state; a monospace hint line. Interaction: pointer drag on the scene pans a parallax rig — a single --px/--py custom property pair on the scene root drives per-layer translate3d multipliers (sky .16, sun .24, roof .34, floor .42, palms .6, fountain .7, escalator .58) with a 0.09 lerp; clicking the atrium splashes 22 extra fountain droplets; clicking the cassette starts a gesture-unlocked WebAudio pad (four detuned saw/triangle oscillators at 110/164.81/220/329.63Hz into a 620Hz lowpass modulated by a 0.08Hz LFO, 1.6s gain ramp to 0.16) and adds a VHS class that applies a hue-rotate wobble and a scanline overlay. Reduced motion stops the sky cycle, sway, escalator, blink and reveals but still paints a still jet frame. Everything inline, one <style> and one <script> IIFE at the end of <body>, no external references and no 'http' substring.

Original prompt · 020-swiss-grid-portfolio.txt

Build a single self-contained HTML page: an International-Style portfolio for the fictional Oblique Type Foundry. Palette #fafafa paper, #111111 ink, #e30613 red, #8f8f8f grey, #f2f2f2 panel; red is reserved for rules, hover states and one letter in the headline. Shell max-width 1440px with padding clamp(16px,4.4vw,72px) and gap clamp(10px,1.4vw,22px); every block is a 12-column CSS grid with the same gap so everything aligns to one rhythm. A fixed guide layer sits above the content (z-index 1, pointer-events none) mirroring the 12 columns with 1px rgba(17,17,17,.08) hairlines, a tiny monospace column number in the top-left of each cell and a soft red gradient at the top of each column; body.guides-off scales every column to scaleY(0) with a .5s ease for a clean draw-out. Sticky header: foundry wordmark "OBLIQUE.TYPE" (red period) in uppercase 700, a monospace "Foundry · Basel" meta, three monospace uppercase nav links with a red underline that grows on hover, and a pill "Guides · G" button that inverts to red when pressed. Hero: an 11px tracked kicker, then a display headline at clamp(3rem,9vw,7rem), weight 700, line-height .86, letter-spacing -.045em, uppercase, with "long" set in red on its own line; a 44ch lede at clamp(14px,1.5vw,18px) and a right-aligned monospace stat block (drawings, languages, update date). Index: a black hairline with "Index of Specimens" and a monospace counter; eight rows built in JS, each a full-width grid button — monospace number 01–08, a clamp(1.5rem,3.6vw,3rem) 700 uppercase family name, category, year and a colour swatch (ink, grey, red, panel) that sits at scale(.82) and grows to 1 on hover. A 2px red rule scales from scaleX(0) to 1 along the bottom of every row on hover, focus-within or open. Clicking a row expands an inline case study (max-height tween measured from scrollHeight): a two-column body paragraph, a monospace spec list (weights, widths, glyphs, coverage, variable) with hairline dividers, a 14-glyph display run where every third glyph is red and every fifth grey, and a row of outlined tag pills. Staggered row entrances use the individual `translate` property (0 22px → 0), never opacity. Footer: a black hairline, a huge 700 uppercase call to action with a red underline, a monospace address block and a colophon row. Reduced motion disables the row stagger, scroll smoothing and hover transforms. Everything inline: one <style>, one <script> IIFE at the end of <body>, no external references, no 'http' substring.

Original prompt · 021-liquid-metal-ui.txt

Build a single self-contained HTML page that presents "MERCURY OS", a fictional liquid-metal design system, as a premium component specimen. Canvas is near-black #14151a with two fixed radial glows (ice #c9f2ff at the top right, hot #ff5c8a at the bottom left) plus a 1px repeating-linear-gradient scanline at 2% opacity for metal grain. Hero: a ui-monospace kicker in steel #7c818c with a pulsing hot dot, then a massive display wordmark "MERCURY" (system-ui 800, clamp(3.1rem,12.4vw,10.2rem), line-height .84, letter-spacing -.052em) filled with a 7-stop vertical silver gradient via background-clip:text and a 1px dark text-stroke, with a light 300-weight "OS" superscript. Under it a muted lede and four pill chips, then a 14px chrome rail bar with a repeating specular sweep animation. Layout below: a 190px sticky left rail of component names (ui-monospace uppercase, active state = hot left border + ice dot) beside a 2-column card grid that collapses to 1 column under 760px and to a horizontal scrolling chip rail under 900px. Six cards on a #191b21 panel with 22px radius, hairline border, inset top highlight and a pointer-tracked radial ice sheen. Card 1: chrome buttons — layered 6-stop silver gradients, inset bevel shadows, a skewX(-16deg) specular band that sweeps on hover via mix-blend-mode:screen, an expanding radial ice blob at the pointer on press, a squish transform scale(.965) scaleY(.93), a hold-to-charge fill that sweeps over 900ms then locks with a hot ring, plus a live state readout. Card 2: mercury slider — a 58px inset dark rail, a chrome sphere knob with radial highlight and inset shading, driven by a spring integrator (k=.16, damp=.78) that overshoots and settles, velocity-driven scaleX squash, a percentage + bar readout, and a droplet that detaches and falls when the slider is flicked. Card 3: pour toggle — a 120x48 track with an inner layer filtered blur(5px) contrast(15) containing a liquid fill, a chrome knob and a drip blob, so the parts merge gooey-style; toggling on pours the drip with a keyframed teardrop stretch. Card 4: segmented control — 3 options on an inset track with a chrome highlight indicator that flows between them on a springy cubic-bezier(.22,1.38,.38,1) transition and flips label colour to ink. Card 5: metal ramp — five gradient swatches labelled with hex tokens. Card 6: states & focus — pills with chrome :focus-visible rings (2px ink gap + ice ring) and keyboard support. Footer hairline row. All motion respects prefers-reduced-motion.

Original prompt · 022-alpine-parallax.txt

Build a single self-contained HTML page that is a scroll-driven alpine sunrise. A 340vh scroll track contains a 100dvh position:sticky scene with overflow hidden, so the landscape stays pinned while scroll climbs. Palette: pre-dawn #0b1026, ridge #2b3a67, mid #6b8fb5, alpenglow #f2b880, sun #ffe9c9. Sky is three stacked full-bleed linear-gradient layers (night #04060f→#0b1026→#1e2749, dawn #101a3d→#2b3a67→#5d7fa8→#f2b880→#ffe9c9, day #123156→#3a6d9e→#8fb9d8→#e2d4bb) crossfaded by scroll progress, plus a horizon radial glow that blooms at dawn. A star field of 84 deterministic pseudo-random dots (seeded mulberry32) sits in the top 62%, one in three twinkling with a transform+opacity keyframe. The sun is a radial-gradient disc with two large warm box-shadow glows and a halo layer; its position is driven by a polar arc: angle a = PI*(1-p*0.5), x = 50-36cos(a) vw, y = 46-40sin(a) vh, so it starts just above the right-hand ridge line and climbs to the zenith as you scroll, scaling 0.82→1.14. Five hand-authored clip-path polygon ridges (16-18 points each, darkening from #4a5c88 far to #080d1c near) get individual translateY parallax (26/38/52/68/92px) and a 3-8% scale-up, each carrying a warm alpenglow gradient child whose opacity is scroll-driven. Three fog bands are soft radial gradients (no blur filter) drifting on 46s/63s/81s alternate CSS animations with negative delays, plus scroll-driven vertical offset. Six inline SVG gull silhouettes cross the top with staggered infinite translate3d animations, visible only around dawn. A fixed HUD top-left shows an oversized tabular-numeral elevation readout counting 0→4 810 m, a phase label, a grade percentage, and a vertical 5-tick scale whose fill scales and whose dot marker translates up as you climb. A summit pin sits on the far ridge peak with a hairline stem; hovering it reveals a Georgia italic quote card that slides up and fades in. Bottom-left title block: ui-monospace eyebrow, then "ALPINE / SUNRISE" in system-ui 200 uppercase with .34em letter-spacing, the second word in sun-cream. Bottom-centre scroll hint with an animated hairline. A vignette and a 3px repeating-linear-gradient grain sit on top. Pointer movement tilts four depth groups (sky/far/mid/near) by 5/11/18/27px with rAF lerp. Clicking anywhere (or the Night button, or pressing N) toggles night mode: sky holds pre-dawn, stars stay full, ridges lose all warmth, and the sun becomes a pale blue moon. All of this obeys prefers-reduced-motion.

Original prompt · 023-holo-hud.txt

Build a single self-contained HTML page that is a full-viewport holographic sci-fi HUD. Palette: space #04070f, cyan #38e8ff, amber #ffb020, mint #7df9c0, panel #1b2a44; the whole console re-themes from a single --accent custom property. Body is fixed, overflow hidden, with a CSS-grid HUD: a top bar spanning three columns, then a 212px status column / fluid centre / 232px telemetry column, then a full-width ticker. Background is layered: two soft radial glows, a 42px cyan grid via two repeating-linear-gradients, and a 3px scanline overlay at 55% opacity. Four hairline corner brackets frame the viewport. Top bar: cyan "SYS·04 HUD CORE", a centred mission string, and a LIVE row with a pulsing amber dot plus a real clock ticking every second. Left column: five subsystem rows with glowing LED dots (mint nominal, amber drift, dim standby), a "Bus load" panel with 14 bars scaled on transform, and a boot log panel bottom-aligned in mono. Centre: a square core gauge built from three concentric conic-gradient rings masked into annuli, each spinning at a different speed and direction (34s / 22s reverse / 13s), over an inline SVG drawn at runtime by assigning an innerHTML string to an existing <svg> element — 73 radial ticks across a 270° sweep with major/minor weights, 40 micro ticks on an inner rail, three faint concentric rails, a dashed-glow value arc plus a solid value arc whose stroke-dashoffset is driven by the live value, MIN/NOM/MAX labels, end caps and four corner registration marks. A 2px needle rotates from -135° to +135° with transform-origin at the dial centre, and a radial-gradient hub caps it. Below the dial: an oversized tabular-numeral readout with unit and label, then three pill mode buttons. Right column: three telemetry gauges, each a conic-gradient ring masked to an annulus whose fill is set with calc(var(--v) * 1%), a tracked label, a tabular value, and a hover/focus detail card that slides up; below them a 60-second flux-history sparkline rebuilt by innerHTML as a filled polygon plus polyline plus a dashed midline. Bottom: an infinite mono ticker of ◆-separated telemetry tokens (content duplicated so translateX(-50%) loops seamlessly) with a mask fade at both edges. A cyan scan band sweeps down every 9s. A pointer-following targeting reticle — two counter-rotating rings, four corner brackets, crosshair, dot, and a live AZ/EL readout — is spring-damped (k=.17, damp=.74) toward the cursor. Clicking locks the target: the reticle turns amber, the dot flashes twice and "TARGET LOCKED" appears for 1.4s. Keys 1-3 or the mode buttons switch between Orbital/THz, Thermal/K and Signal/dB, re-tinting every accent, SVG stroke and glow. A single rAF loop eases all values and stops when settled (targets are refreshed on a 900ms pump), so idle means zero style writes. Responsive: below 700px the grid stacks and scrolls; below 560px height the log hides and the dial shrinks. prefers-reduced-motion stops ring rotation, the scan sweep and the lock flash.

Original prompt · 024-botanical-growth.txt

Build a single self-contained HTML page that is a light, paper-textured botanical garden whose vines draw themselves on scroll. Palette: linen #f3efe2, forest #2f5d3a, leaf #7aa874, bloom #e07a5f, pollen #d9b44a, with 18%-alpha forest rules. Body background layers two soft radial tints over a 4px repeating-linear-gradient paper grain. Type: headings system-ui 600 with tight negative tracking, Latin names Georgia italic, captions ui-monospace uppercase at .2em+. Layout: slim header (garden mark plus a mono meta block), then a two-column hero — left: mono kicker with a rule, a display headline "Grow something" with a Georgia italic "slowly" on its own line, a lede, and a four-item meta row (Vines 5 / Leaves 26 / Blooms 7 / Season late spring); right: a seed packet card rotated -2.4deg with a dashed inner border, a hand-drawn inline SVG poppy (stem, two leaves, three petals, pollen centre), "Papaver rhoeas" in Georgia italic, and a sow/depth/light footer — it straightens and lifts on hover. Then three "movement" sections separated by hairline rules, each headed by a mono numeral, a system-ui heading and a right-aligned mono caption. Movement I is the trellis: a centred panel (max 900px) holding an inline SVG with viewBox 0 0 900 1500 — a faint 5x5 lattice, a soil band, five hand-authored bezier vine paths (two deep forest, three leaf green), plus two runtime-populated layers for leaves and flowers. Vines are drawn with stroke-dasharray = getTotalLength() and stroke-dashoffset mapped from scroll progress through the panel: p = (scrollY + innerHeight - panelTop) / (panelHeight + innerHeight), with each vine given its own start/end fraction and a smoothstep ease. 26 leaves and 7 flowers are positioned by sampling path.getPointAtLength() at hand-picked fractions and rotating each along the path tangent (+/-44deg for leaves, side alternating); leaves scale 0 to 1 and flowers scale 0 to 1 with rotate -70deg to 0 using an ease-out-back curve, so they pop like real growth. A warm sunbeam gradient (190% wide, soft multi-stop, no blur filter) sweeps across the panel with scroll. A footer row under the panel has a growth meter (scaleX fill plus a percentage readout) and a "Re-plant" button. Movement II is a three-card garden index: each card has an inline SVG icon (climber, perennial, seed head) that rotates and recolours on hover, a system-ui heading, a Georgia italic Latin name, a paragraph and a mono caption; the card lifts and its top gradient rule wipes in. Footer lists eight Latin names in a dotted-rule two-column list with a colophon. Interaction: scrolling grows the garden; clicking anywhere on the panel waters it — 11 droplet particles fall with a CSS keyframe using --dx/--dy custom properties and a boost value (max 0.42) is added to the growth and decays 6% per frame; hovering or focusing a flower raises a Georgia italic tooltip with its Latin name positioned from the pointer or the element's bounding box; Re-plant resets the growth multiplier to 0 and eases it back to 1 over about a second, so the garden visibly re-sprouts. prefers-reduced-motion disables the card/packet transitions and makes droplets instant.

Original prompt · 025-swiss-broadsheet.txt

Build a single self-contained HTML page that is a Swiss-editorial newspaper front page. Palette: newsprint #f5f1e8, ink #15140f, spot red #c8102e, grey rule #8a8578, panel #e8e2d2. Background: two soft radial tints (a grey wash top-left, a 4.5% red wash top-right) over two repeating-linear-gradients that fake paper grain at 1px and 4px. Type: masthead Georgia 900 uppercase at clamp(2.5rem,9.4vw,7.1rem) with -.035em tracking and the second word in spot red; headlines Georgia 700 at clamp(1.85rem,4.7vw,3.55rem) with -.022em tracking and text-wrap:balance; deck Georgia italic; body Georgia 400 at ~0.95rem, line-height 1.64, text-align:justify with hyphens:auto and a 3.15em drop cap; all kickers, bylines, captions, tables and the ticker in ui-monospace 600 uppercase at .2em+. Structure top to bottom: (1) a full-bleed ink ticker with a red LIVE chip whose dot pulses via transform/opacity, and a masked rail of mono headlines scrolling on an infinite translateX(-50%) loop with duplicated content; (2) a masthead with a meta row (date, cities, price, issue number), a hairline rule, the giant brand with a right-hand edition block, then a 3px and a 1px rule; (3) the front grid, 3.05fr / 1.18fr with a vertical hairline between: left is the lead story — red mono kicker with a rule, the headline (each phrase is a span with a red highlighter gradient that wipes in from 0% to 100% background-size on hover/focus), a Georgia italic deck, a mono byline row, a 2px red rule that draws itself with scaleX over 1.3s, then a 3-column CSS multi-column body with column-rule hairlines, a column-span:all pull quote between two ink rules, and a click-to-expand continuation using grid-template-rows 0fr to 1fr; right is a rail of three blocks — a weather panel on #e8e2d2 with an inline SVG sun-and-cloud icon whose ray group rotates 26s and whose cloud drifts, a big serif temperature, a °C/°F segmented toggle and four forecast rows; a markets table with mono figures and red/ink deltas; and a sport brief; (4) a lower band split 1.6fr/1fr by a 3px ink rule — left a snowfall data graphic as inline SVG: four hairline gridlines, a 1.5px baseline, thirteen 22px bars (ink for 1990-2014, red for the last four) and a dashed red trend polyline, with mono axis labels; right an "In brief" list of three dotted-rule items each with a red mono tag; (5) a footer row with page furniture. The columns block has a press-run entrance: translateY(14px) to 0 plus the red rule drawing. Responsive: 900px collapses the front and band to single columns and drops the body to 2 columns; 620px drops to 1 column and shrinks the masthead; prefers-reduced-motion stops the ticker, the icon animations and the entrance transforms.

Original prompt · 026-neon-sign-shop.txt

Build a single self-contained HTML page that acts as a live neon-sign customiser. Background is a near-black brick wall (#0b0b0f) drawn entirely in CSS: two repeating-linear-gradients make mortar lines, a third offset copy (background-size 132px 68px, background-position 33px 34px) creates the staggered brick bond, plus a screen-blended radial wash in the live tube colour, a vignette and a faint repeating-conic "grit" overlay. Centre the composition with a flex column: a huge neon sign sitting on a dark metal backboard (rounded 22px, inset highlight, deep drop shadow, thin white border), with a mirrored reflection directly beneath it — the reflection is a second copy of the same text with transform:scaleY(-1), filter:blur(3px), opacity .42 and a mask-image linear-gradient that fades it out at 82%. The neon glow is pure multi-layer text-shadow: 0 0 2px #fff, 0 0 5px #fff, then the tube colour at 11px / 22px / 44px / 88px, then a wide white bloom at 150px. Palette: wall #0b0b0f, pink #ff2fb9, cyan #38e8ff, amber #ffd166, white #f5f5f5; the tube colour is a CSS variable --tube switched at runtime. A small rotated "OPEN" sign sits top-right in cyan with a steps() flicker animation. The control panel is a bottom bar on a blurred dark gradient: a text input (maxlength 18) that re-letters the sign live, four circular colour swatches, four lettering chips (Neon = system-ui 800, Script = "Brush Script MT", Block = Impact, Wide = "Arial Narrow" with .2em tracking), and three effect toggles (Flicker, Buzz, Pulse). Typography: system-ui stack for UI, ui-monospace for the hint line. Font size auto-fits: start at min(190px, containerWidth*0.26) and shrink by 0.93 until the text fits. All JS in one IIFE at the end of body, zero external assets, no @font-face, no SVG namespace URLs.

Original prompt · 027-watercolor-cards.txt

Build a single self-contained HTML page: a pigment-card gallery on a warm paper ground (#fdfaf5) with three very soft corner washes of ultramarine #2c5f8a, cadmium #c8503c and viridian #4a6b4f at 9-10% alpha. Header is a two-column grid (title left, paintbox right) that collapses to one column under 640px: a mono kicker "Pigment index · six washes", an h1 in Georgia italic 400 at clamp(34px,6.6vw,76px) reading "Watercolour Cards" with the second word in ultramarine, and a Georgia lede. The paintbox is four inset "wells" (34-50px squares, radial highlight, inner shadow) labelled PR108 / PB29 / PY43 / PG18 in 9px mono, plus a pill-shaped SHUFFLE THE DECK button with a 14px inline SVG arrow icon. Below a hairline gradient rule sits a responsive grid: repeat(auto-fit,minmax(228px,1fr)), forced to 3 columns above 1180px. Six cards, each 3:4 aspect with min-height 290px, built as .card > .inner > two .face layers. Front: a watercolour bloom made of five absolutely-positioned circles, each filled with radial-gradient(closest-side at 42% 40%, var(--c) 0%, var(--c) 26%, transparent 76%) at different sizes, positions and opacities, over a repeating-conic 4px grain layer at 55% multiply; a mono code, a Georgia italic pigment name and a small uppercase subtitle sit in a bottom gradient scrim; three opacity dots sit top-right. Back (rotateY 180deg): pigment code in the card colour, Georgia italic name, a solid swatchline, a dt/dd spec grid (Body / Grain / Light / Stain), an italic note and a dashed-top mono mix line. Palette: paper #fdfaf5, ink #2b2b30, ultramarine #2c5f8a, cadmium #c8503c, ochre #d9a441, viridian #4a6b4f, plus two derived mixtures (#6f9dc4 sky wash, #c97a45 terra rosa). Type stacks: Georgia display italic, system-ui 600 uppercase labels, ui-monospace codes. All CSS in one inline style, all JS in one inline script at the end of body, zero external assets.

Original prompt · 028-retro-space-poster.txt

Build a single self-contained HTML page presenting a retro-futurist travel-poster series. Page ground is near-black #14100f with two huge soft radial washes (amber #e8a13a at 16%, plum #7c3f58 at 35%). Layout is a centred flex row: poster, a vertical destination tab rail, and a travel-agency footer column; under 900px it stacks into poster / horizontal tabs / footer row. The poster is a 5:7 aspect box whose width is min(92vw, 30rem, 74dvh*5/7), and its font-size is set to calc(width * 0.045) so every child uses em units and the whole poster scales as one piece — title at 2.35em (~10.6% of poster width), subtitle Georgia italic at .82em, coordinates and bureau strip in ui-monospace at .52em. Inside: an inset 1px rule (poster::after), two stacked .scene layers for cross-fading, and a .type overlay holding a top bureau strip ("Outer Planets Travel Bureau" / "Series 04 / Plate 01"), and a bottom title block with a two-line display title in "Arial Narrow"/Impact uppercase wide-tracked, a Georgia italic subtitle and mono coordinates. Each scene (built as an innerHTML string) contains: a vertical sky gradient, a halftone sky of radial-gradient dots (1.15px dots, 7px tile) masked to fade downward and drifting 7px diagonally over 26s, an optional star field of eight tiny radial dots, a sun with two concentric ring outlines, a planet built from a radial gradient plus a clipped .ball holding a scrolling repeating-linear-gradient band texture (34s spin) and a limb shading layer, an optional ring drawn as a 186%-wide 2px circle with scaleY(.2) and -16deg rotation, a moon, a clip-path polygon mountain silhouette with vertical hatching, a dashed trajectory path with pathLength="100" that draws and un-draws over 18s, and a rocket riding the arc via two nested keyframe layers (linear X from -9% to 108% of poster width, eased Y from 82% to 19% of poster height) with a steps(2) flame. Palette: cream #f4e3c1, mars #d94f2b, deep #2b3a67, sun #e8a13a, plum #7c3f58. Four destinations — Titan, Mars Grand Tour, Europa Ice Ferry, Io Volcano Line — each with its own sky/planet/ring/moon/horizon variables, ink colour and accent colour. Tab rail buttons show a mono index, an uppercase display name and three colour chips. All JS in one IIFE at the end of body; no external assets; no SVG namespace strings (the only SVG is static inline markup in an innerHTML template).

Original prompt · 029-noir-detective.txt

Build a single self-contained HTML page as a film-noir landing page for a fictional detective serial. Ground is near-black #0a0a0c with a faint brass #b9a779 wash top-left and a case-red #8c1c13 wash bottom-right. Masthead: mono kicker "Chapter one · serial no. 9", a Georgia 700 uppercase tracked h1 "The Meridian Job" with the middle word in case red, right-hand typewriter meta lines and a LAMP ON/OFF toggle button. Below, a two-column stage (1.18fr / .82fr, collapsing to one column under 900px). Left is the hero: a dark scene with a rain-lashed window (62% x 74%, 10px frame, a vertical mullion and a horizontal rail made from ::before/::after), two rain layers built from repeating-linear-gradient(180deg, streak 0-20px, gap to 118px) with background-size 100% 118px/196px inside a skewX(-11deg) container, each translated by exactly one background tile height so the loop is seamless; venetian-blind shadows across the whole scene as a repeating-linear-gradient of 9px dark bands every 25px, rotated -3.4deg, skewX(-7deg), masked to fade toward the floor and swaying ±7px over 13s; a desk-lamp glow (640px radial gradient in brass) that follows the pointer via translate3d set in a rAF-throttled handler, and flickers once on load with a steps(1,end) keyframe; three blurred smoke blobs (44-88px, static blur 9px) curling upward on 7.8-12s keyframes; a clip-path detective silhouette; a desk edge with a glowing pen; and a mono caption line that types itself at the bottom. Right column is the case file: a stamped sheet with a dashed inner rule, a typewriter h2, a dt/dd case row grid (victim, found, missing, lead), a 16:9 evidence photo plate with a red EVIDENCE stamp, a "who did it?" input plus FILE button, and a scrolling transcript that types the detective's replies. Below, three evidence cards (3 cols to 1) that expand a hidden case note on click. Bottom is a seamless marquee of six clues (content duplicated and translated -50%). Palette: #0a0a0c, bone #d8d4c8, case red #8c1c13, shadow #4a4a52, brass #b9a779. Type: Georgia 700 uppercase tracked display, Georgia body, "Courier New" case notes, ui-monospace captions and tickers. All CSS in one inline style, all JS in one IIFE at the end of body, zero external assets.

Original prompt · 030-circuit-garden.txt

Build a single self-contained HTML page: a full-bleed generative circuit board rendered on a DPR-scaled canvas (canvas.width = cssW * devicePixelRatio, ctx.setTransform(dpr,0,0,dpr,0,0) before every draw pass). Substrate is a linear gradient from #0c4531 through #0a3d2c to #072a1e with a 20-unit world grid drawn at 4.5% silk-green alpha, stronger every 100 units, plus a silk-screen registration cross at world origin — this whole static layer is cached into an offscreen canvas and only re-rendered when the view transform or size changes, then blitted with an identity transform. Traces are grown by a branching random walk on an 8-way lattice with a 10-unit cell: each branch steps 26-72 cells with a 58% chance to continue straight, 26% to turn 45 degrees, 11% to turn 90 degrees and 5% to turn 135, turning when blocked and stopping at the world bound of ±560; occupied cells are tracked in a plain-object set so traces never cross. Growth is round-robin over a pending-branch queue at 26 points/second, guarded at 60 steps per frame. Each completed trace drills a via, spawns up to two depth-2 child branches from a random mid-point, may blossom into a component pad (silk outline, dark body, four copper pads, a blinking LED in #ff5c39 and a 6px ui-monospace silk label), and starts a looping energy pulse. Traces are stroked as quadratic curves through segment midpoints (round cap/join) in rgba(201,162,39,.86) with a thin rgba(245,224,150,.28) inner highlight so the copper reads as raised; the hovered trace switches to #eafff5 with a wide soft under-glow and its via enlarges. Pulses are short bright segments walked along a precomputed cumulative-length polyline, drawn twice (wide silk glow then a near-white core) with a head dot. Occasional solder flashes expand and fade. A 96px procedural solder-mask speckle pattern and a cached radial vignette are composited over everything. HUD is a dark legend card upper-left with mono rows for traces / vias / pulses, a GROW THE BOARD button, a hover readout, a bottom-right plate stamp and bottom-centre key hints. Palette: pcb #0a3d2c, copper #c9a227, silk #9be8c0, substrate #1c1c1c, led #ff5c39. All CSS in one inline style, all JS in one IIFE at the end of body, no external assets.

Original prompt · 031-type-river.txt

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 "Type River". Concept: a kinetic-typography river. A long sentence is split into individual words, each word is an absolutely positioned <span> inside a full-viewport layer, and every word is advected across the screen by a value-noise flow field written in plain JS (hash + bilinear smoothed noise, angle = (noise(x*0.0016 + t*0.02, y*0.0024 - t*0.014) - 0.5) * 2.6), with a dominant rightward drift so the river always flows left-to-right and wraps around at the right edge. Palette: #0d1117 deep water background, #161b22 bank, #58a6ff current (accent words), #c9d1d9 foam (body type), #f0b429 gold ripple (foam words, stone rings). Typography: one system serif, Georgia / "Times New Roman" / serif, at varied sizes 13-54px, weights 300/400/700, letter-spacing from -0.01em to 0.05em, so the sentence itself is the art. Layout: a full-bleed river band occupying the middle ~52% of the viewport, framed top and bottom by opaque #161b22 bank shapes cut with a hand-written clip-path polygon wave, each bank with a 3px rgba(88,166,255,.20) rim light offset 3px below the wave; a soft radial blue glow and a slowly drifting 27px repeating hairline texture sit behind the words. Title upstream top-left: mono kicker "031 — kinetic typography", Georgia h1 "Type River" (River in italic gold), a gold hairline rule, and a mono interaction legend. Controls bottom-right in a glass panel (rgba(22,27,34,.74), 1px rgba(88,166,255,.22) border, backdrop blur): a "flow" range 0-100 (default 42) and a "density" range 24-170 (default 72) with a live mono readout. Bottom-left mono label names the current sentence. Motion: words are integrated each rAF with dt clamped to 50ms, vertical containment is a soft spring toward the band centre, opacity falls off toward the banks (floor 0.32 so a frozen render still reads), roughly 16% of words flip to gold "foam" with a text glow, and words that leave the right edge wrap to the left, take the next word of the sentence and re-randomise size/weight/colour. Entrance and layout must never use opacity 0->1; the words are laid out spread across the whole band at boot so a frozen-clock screenshot shows the finished river. Interaction: pointermove parts the water (a 104px invisible rock at the cursor pushes words radially), pointerdown drops a visible stone (gold radial ring, dashed rotating inner ring, drifts downstream, lives 10-16s then scales out), dragging stirs a tangential swirl, the mouse wheel or arrow keys swap between five sentences and re-spread the words across the band, and prefers-reduced-motion cuts flow speed to 45%. Performance: transform-only writes via translate3d, opacity and colour written only when the value changes by more than a threshold, geometry measured on resize with a debounce, no filters on the animated words. Zero console errors, every null guarded, everything inside one IIFE.

Original prompt · 032-glitch-lab.txt

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.

Original prompt · 033-neumorphic-synth.txt

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 "Soft Synth". Concept: a neumorphic synthesiser — a soft extruded hardware panel with two octaves of playable keys, four draggable knobs, a waveform selector and a live oscilloscope, making real sound with the Web Audio API. Palette: #e0e5ec surface, #ffffff highlight, #a3b1c6 shadow, #2e3a4d ink text, #6d5dfc accent. Typography: labels in system-ui 600, 9px, uppercase, 0.18em tracking; scope and value readouts in ui-monospace; the h1 in system-ui 300 with a 600 accent word. Layout: page background is a soft radial vignette from #f1f4f9 to #c8cfdb; one centred device panel, max-width 900px, border-radius 34px, with a dual neumorphic shadow (18px 18px 40px rgba(163,177,198,.72), -18px -18px 40px rgba(255,255,255,.95)). Header row: mono eyebrow, "Soft Synth" title, and a status LED with a mono state label. The upper deck is an inset neumorphic well (inset 7px 7px 16px shadow plus inset -7px -7px 16px highlight) containing four knobs on the left and a scope column on the right; the keyboard sits below in its own inset well. Each knob is a circular body with a dual-shadow relief and a 2.5px accent indicator, surrounded by an inline SVG arc: a 270-degree track circle (r=42, stroke-dasharray 197.9 263.9) rotated 135 degrees so the gap sits at the bottom, and a fill circle whose stroke-dashoffset is driven from the normalised value; the body rotates -135deg to +135deg. Knob labels are uppercase system-ui, values are mono. Audio: one AudioContext created and resumed only inside the first user gesture, wrapped in try/catch, with a shared lowpass BiquadFilter (120 Hz to 9 kHz mapped exponentially, Q 0.4-18) feeding a master gain (0-0.35) feeding an AnalyserNode (fftSize 1024, smoothing 0.72) which connects to the destination. Each note is its own oscillator (sine/triangle/square/sawtooth) plus a gain envelope (0.0001 -> 0.85 in 12ms -> 0.42 at 220ms, exponential release to 0.0001 over 300ms and osc.stop at 340ms); detune in cents is applied to all live voices. The scope is a DPR-scaled canvas with setTransform, drawing a faint vertical grid, a centre line, and the analyser's time-domain data as a 2px accent polyline with a small shadow; when no context exists it draws a flat accent line, and the rAF loop only runs while voices are active or for 420ms after the last release, so idle costs nothing. Keys: fourteen white keys (C4-B5) as a flex row with 3px gaps and ten black keys absolutely positioned at hand-computed percentages (5.0, 12.14, 26.43, 33.57, 40.71, 55.0, 62.14, 76.43, 83.57, 90.71) over them; pressing a key translates it down 2-3px and flips its shadow to inset, and the LED pulses with a class toggle. Interaction: pointerdown/up on keys plays notes; A W S E D F T G Y H U J K map to one chromatic octave; octave buttons shift the whole keyboard between C1 and C6 and relabel every key; four waveform buttons retype all live oscillators; the sustain button (or the Z key) holds released notes until it is switched off; knobs drag vertically with pointer capture, respond to arrow keys when focused and reset on double-click. Every shared value is declared above boot, all node access is guarded, entrance uses a transform-only animation, prefers-reduced-motion removes the entrance and the LED transition, and the whole page is one IIFE with zero console errors.

Original prompt · 034-kaleidoscope-draw.txt

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 "Kaleidoscope". Concept: a kaleidoscope drawing toy — brush strokes are mirrored live across N radial axes to build symmetric mandalas. Palette: #101418 ink background, #ff6b9d rose, #4ecdc4 teal, #ffe066 gold, #c084fc violet, plus a bone #eef3f2 swatch. Typography: toolbar labels in ui-monospace uppercase 9-10px with 0.16-0.2em tracking, the title in system-ui 700 uppercase with a glowing rose dot. Layout: a full-viewport canvas inside a .rotor wrapper fixed at the viewport centre (width 100vw, height 100dvh, transform-origin 50% 50%, will-change transform, scaled 1.14 so rotation never exposes corners) with a radial-gradient background painted on the canvas element and a fixed vignette overlay above it; a title block top-left; a floating glass toolbar bottom-centre (rgba(18,22,27,.62), 1px rgba(255,255,255,.1) border, 18px radius, backdrop blur 16px) holding five round colour swatches, four symmetry buttons (6/8/12/16), a size range 1-26 and undo / clear / spin actions; a mono readout bottom-right. Drawing: every stroke is stored as {color, size, cumulative length, points[]}, each point carrying its own tapered width computed as size * (0.34 + 0.66 * min(1, length/46)) * (1 - 0.3 * min(1, stepDistance/26)) so lines ramp up from the start and thin out with speed. Rendering mirrors each stroke with a per-segment transform: translate to the canvas centre, rotate by (i/N)*2PI, and scale(-1,1) on odd segments, then translate back, so segment i is a true mirror of segment 0. Each drawn segment is painted twice — a 3.4x wide stroke in 'lighter' composite at 0.055 alpha for the glow, then the crisp stroke in source-over — which builds a soft luminous mandala on the dark ground. A full redraw clears the canvas, paints faint guide spokes (N radial lines plus two concentric circles at 0.6R and 0.24R) and replays every stored stroke. Rotation is visual only: the .rotor element is rotated with a transform while stroke coordinates stay in unrotated canvas space, and pointer input is mapped back through the inverse rotation and scale so drawing stays accurate under any rotation. Interaction: pointerdown starts a stroke (after pushing a snapshot onto a 28-deep undo history), pointermove appends points only when they are at least 1.5px apart and paints just the newest segment, pointerup ends it; the pointer is captured for the duration. Colour swatches, symmetry buttons (which also trigger a 0.48s scale pulse on the canvas element, a transform-only animation), the size slider, undo (restores the previous snapshot, so it also undoes a clear), clear, and a spin toggle all live in the toolbar; space toggles spin and Ctrl/Cmd+Z undoes. When nothing has been drawn for 2.6 seconds the whole mandala drifts into a slow rotation, which stops the moment drawing resumes. At boot eight tapered curves in the palette colours are seeded into the stroke list and drawn, so a frozen-clock render shows a finished six-fold mandala rather than an empty canvas, and the readout shows the stroke count. Resizing re-measures the canvas with devicePixelRatio and setTransform and re-centres every stored point by the centre delta. prefers-reduced-motion removes the pulse animation and the auto-rotation. One IIFE, every null guarded, zero console errors.

Original prompt · 035-isometric-city.txt

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 "Isometric City". Concept: a small isometric city builder on a 12x12 tile grid where clicking raises buildings, a day/night cycle rolls the light across the facades, cars drive tile to tile along the roads and birds cross the sky. Palette: #d9e6e3 day ground, #7fb3a8 grass, #e8b04b sun, #2b3a55 night, #e2e8f0 glass, plus warm house walls #e9ddc9 and terracotta roofs #c97a5a. Typography: HUD numbers and labels in ui-monospace uppercase with 0.24em tracking, tool labels in system-ui 600 uppercase, and the title in Georgia italic. Layout: a single full-viewport DPR-scaled canvas (width = cssW * devicePixelRatio, ctx.setTransform) with a fixed HUD card top-left (translucent white, 16px radius, backdrop blur) showing day, population and the active tool; a centred instruction line; a floating tool bar bottom-centre with six tools (house, tower, park, water, road, demolish) each showing its keyboard digit; and a time slider in its own card bottom-right. Projection: iso(gx,gy) = origin + ((gx-gy)*TILE_W/2*S, (gx+gy)*TILE_H/2*S) with TILE_W 62, TILE_H 31 and a scale S fitted from the viewport (clamped 0.34-1.7) so the whole grid plus three storeys of headroom always fits between 360px and 1920px; the origin centres the mass including building height. Every tile draws its ground diamond first (checker-shaded by 2.2% for a subtle grid), then a building as three iso faces — left and right walls and a raised top diamond — with the wall multipliers driven by the sun's azimuth (litLeft = (1 - cos(theta))/2) so morning light comes from the left and evening light from the right. Towers carry a deterministic window grid drawn as small parallelograms on both visible faces using a hash of tile seed + column + row, which turns warm gold as night falls; houses get a bright roof top face; parks scatter three tapered iso trees; water adds a slow white shimmer band. Depth sorting is painter's order by (gx+gy) computed once at boot. Day/night: dayT 0-1 advances automatically (about 110 seconds per day, incrementing the day counter on wrap) and the time slider scrubs it directly; sun height = sin(theta) drives a night factor of clamp((0.25 - sin)/0.75, 0, 1), a dusk factor peaking at the horizon, and every ground, wall, roof, road and car colour is mixed toward #2b3a55 by the night factor, with the sky gradient mixing from #cfe0dd/#eef3f1 to #0f1525/#2b3a55 and a warm #e8b04b band at dawn and dusk; a sun disc with a radial glow arcs left-to-top-to-right, becoming a crescent moon at night; a final low-alpha navy wash grades the whole frame. Cars are stored as tile-to-tile lerps with a speed, are drawn inside the tile loop of whichever tile they currently occupy so they sort correctly, and re-route to a random road neighbour (never reversing) at each tile boundary; they get a warm headlight dot at night. Four birds cross the upper sky with a sine bob and a small wing flap. A seeded city (a lake, three roads, twenty houses/towers/parks) is laid down at boot with full animation progress so a frozen-clock render shows a complete living skyline. Interaction: pointerdown picks the tile under the cursor by ray-casting the raised top-face polygons in reverse painter order, then places the selected tool; shift-click or the demolish tool removes a tile with an expanding white flash; hovering highlights the tile's top face with a gold outline; tool buttons or keys 1-6 switch tools; the time slider scrubs the day. New buildings animate in with a transform-style squash (height scaled by an easeOutCubic with a 0.3 overshoot, never opacity), and the population counter lerps smoothly to the new total. prefers-reduced-motion pauses the automatic day cycle. One IIFE, all shared state declared above boot, zero console errors.

Original prompt · 036-css-cube-gallery.txt

Build a single self-contained HTML page: a full-viewport CSS 3D cube gallery on a near-black stage (#0f1116) with a soft blue ambient glow and a dark elliptical floor shadow. A CSS cube of side clamp(148px,32vmin,300px) sits centered under perspective:1100px at perspective-origin 50% 46%; the cube uses transform-style:preserve-3d with six absolutely positioned faces centered by negative margins and placed with translateZ(half) plus rotateY(±90deg)/rotateY(180deg)/rotateX(±90deg). Each face is a different pure-CSS miniature artwork in one palette colour: 01 ORBIT #ff5c39 with three concentric border rings pulsing scale .28 -> 1.5 while fading; 02 STRIPE #3a86ff with a 45deg repeating-linear-gradient whose background-position travels 0 -> 36.77px for a seamless band march; 03 ECHO #ffd166 with three dots on a slowly spinning orbit (rotate(var(--a)) translateY(calc(var(--s) * -.3))); 04 PULSE #06d6a0 with seven flex bars doing a staggered scaleY waveform; 05 LATTICE #c084fc with a two-axis gradient grid plus a soft-light radial that scales to read as a warp; 06 BLOOM #f72585 with a 320%-sized multi-stop gradient whose background-position animates and a rotating overlay sheen. Every face carries a monospace index and a tracked system-ui 600 name, a diagonal gloss pseudo-element and a dimming overlay pseudo-element. Chrome: an uppercase tracked display title "CUBE GALLERY / six faces / six studies" upper-left, a bottom-centre HUD naming the front face with a 01/06 counter between two gradient hairlines, and a monospace drag hint. JavaScript in one IIFE: pointer drag rotates the cube with inertia and damping, a per-frame front-face solve (rotate the local face normal by Ry then Rx and pick the maximum z) drives the live label, click focuses a face (cube wrapper scales to 1.2, other faces dim to .74) by easing rotation to that face's home angles, arrow keys step rotation by 18 degrees, Escape and double-click reset. prefers-reduced-motion kills all face keyframes and the auto-spin. No external assets, no http substring, system fonts only.

Original prompt · 037-bento-portfolio.txt

Build one self-contained HTML page: a dark bento-grid portfolio for a fictional motion designer. Base #0e0e11, text #f5f5f0, accent #ff5c39, tile #2b2b31, mint #a8e6cf. Page padding clamp(14px,2.2vw,34px); header row with the display name "Iris Kade" (system-ui 800, clamp(28px,5.6vw,64px), letter-spacing -.045em, surname in Georgia italic mint) plus a monospace uppercase nav whose links draw a 1px accent underline from right:100% to right:0 on hover. Below it a CSS grid bento: repeat(4,minmax(0,1fr)) with gap clamp(9px,1.15vw,16px) and tiles that span 1-2 cells — showreel 2x2 with a live canvas, about 2x1 in Georgia italic, a live clock tile, a stats tile, a 2x1 colour-play tile, a contact tile, and a "now" tile that rotates a verb. Every tile is #2b2b31, radius 18px, 1px hairline border, and on hover lifts translateY(-6px) with an accent-tinted border and a deep shadow. The reel canvas draws a looping abstract composition: a radial accent/blue glow, five rotating arcs in the palette with round caps, an orbiting accent dot, and a dashed hairline circle — sized with devicePixelRatio and ctx.setTransform on boot and resize. The clock tile ticks local time in tabular numerals every second. The colour-play tile follows the pointer, moving a conic-gradient blob and applying hue-rotate via a --h custom property on that small blob only, with a monospace hue readout throttled through requestAnimationFrame. The contact tile copies hello@iris-kade.studio to the clipboard, using navigator.clipboard with a textarea/execCommand fallback inside try/catch, and fires a mint toast that slides up with transform only. Media queries collapse the grid to 2 columns under 900px and 1 column under 560px. One IIFE, no external assets, no http substring, system fonts only, prefers-reduced-motion stops every loop and the toast transition.

Original prompt · 038-aurora-borealis.txt

Build one self-contained HTML page: a full-viewport aurora borealis night scene, no external assets. Palette #020617 night, #34d399 green, #7dd3fc ice, #a78bfa violet, #f8fafc star. Layer the scene as: a sky element with a deep navy gradient plus two soft radial tints (green at 50%/66%, violet at 18%/22%); a DPR-scaled canvas star field; three blurred aurora curtains; a horizon glow; a pine ridge as inline SVG; and a lake occupying the bottom 38%. The three curtains are absolutely positioned spans, 152% wide, left:50%, transform-origin 50% 100%, border-radius 50% 50% 0 0 / 62% 62% 0 0, each a linear-gradient in green, violet and ice, each with a STATIC filter:blur(26px) and transform-only keyframes that translate, rotate and scaleY over 13s/17.5s/21s alternate so the blur layer stays composited. The lake holds a cloneNode(true) of the aurora block (id stripped) inside a wrapper with transform:scaleY(-1), top:-21.05% and height:205.26% so the mirror is geometrically exact about the 62% horizon, plus opacity .5, filter blur(9px) and a downward mask; the SVG ridge is duplicated and flipped the same way for the pines' reflection. A repeating-linear-gradient ripple band drifts downward with transform, masked out toward the bottom. The star canvas twinkles ~110-360 stars (fillRect for small, arc plus a soft halo for the 9% brightest, two colour passes for speed) and a second canvas draws meteors and click flares only when active (dirty-gated clear). One rAF loop drives both. Pointer move parallaxes the aurora +30px horizontally and the reflection inversely with 0.09 easing; pointerdown fires a growing radial flare plus a meteor; wheel adjusts aurora intensity by setting --amp on the scene between 0.26 and 1 and updating a monospace readout. Type: tracked uppercase system-ui 600 title upper-left, one Georgia italic line beneath, monospace temperature and coordinates lower-right, minus sign as an entity. prefers-reduced-motion stops the curtains, the ripple and the parallax and renders a static star field.

Original prompt · 039-desert-dune-gradient.txt

Build one self-contained HTML page: a scroll-driven desert dune landscape at golden hour. Palette #f7d9a0 sky, #e0a35c dune lit, #8c5a2b dune shadow, #3f2d1e rock, #fff3d6 sun. Structure: a .scroller of height 340vh containing a sticky full-height .scene with overflow hidden, so scroll progress 0-1 maps dawn to dusk. The sky is one element whose gradient reads three custom properties --sk1/--sk2/--sk3 that JavaScript interpolates in RGB through three keyframes (dawn pale blue/peach, noon blue/gold, dusk violet/rust) by setting them on the scene each rAF-throttled scroll frame. The sun is a single radial-gradient disc (bright core, colour stop, transparent halo) positioned with --sunX/--sunY, arcing from 16% left at 46% height up to 84% left at 16% height and back down via Math.sin(Math.PI * q). Five dune layers are absolutely positioned divs with hand-written clip-path polygon ridges (peaks between 44% and 93% height), each filled with a linear-gradient from --lit to --shade whose first stop sits just above its own ridge, each with a diagonal 104deg shadow overlay via ::after (clipped by the parent clip-path) and descending opacity .6 to 1 for aerial perspective. Each dune translates by calc(var(--dp) * var(--shift)) with shifts from -10px to -43px so the ridges parallax against each other as the sun moves. A hand-built camel caravan of three inline SVG silhouettes (rects for legs, ellipses for body and humps, polygon neck, ellipse head, stroked tail) treks across the dunes on a 78s linear translateX; hovering it sweeps a dashed route line in with transform:scaleX(0 -> 1) and lifts two monospace place labels from .38 to .85 opacity. A sand canvas of 70-260 DPR-scaled grains drifts on a sine gust, wraps at the edges and is pushed away from the pointer within a 138px radius. Clicking spawns a DOM ripple ring that expands with a transform-only keyframe and removes itself on animationend. A heat-haze band at 46% height uses one small filter:blur(3px) region over a repeating gradient with a transform-only shimmer. Chrome: Georgia italic wide-tracked title, monospace latitude readout with sun altitude, a scroll hint that slides out of the frame, and a top progress bar scaled with transform. prefers-reduced-motion stops the caravan, haze and grain drift and disables ripples.

Original prompt · 040-clay-icon-set.txt

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.

Original prompt · 041-frutiger-aero.txt

Build a single self-contained HTML page reviving the Frutiger Aero aesthetic as a fictional mineral-water brand site. Full-viewport sky background built from layered radial gradients (mint #c8f0d8 blooming from the bottom, white bloom upper-left, lime #f2f7a0 glow upper-right) over a vertical sky gradient from #c9ecff through #7ec8f0 and #63b6e6 into deep water #1a6ea8. Floating glossy bubble clusters: each bubble is a div with border-radius 50%, a two-layer radial gradient (a white specular at a per-bubble position plus a rim-lit sphere body with mint and lime inner tints), inset white shadows and a rotated elliptical ::after highlight. A 12s lens-flare glint bar sweeps across with mix-blend-mode screen. Left: a frosted glass panel (158deg white-to-mint-to-sky translucent gradient, 1px white border, inset top highlight, deep blue drop shadow) containing a monospace eyebrow "MINERAL WATER / 0.5 L / STILL", a two-line glossy gradient-clipped display headline AERO / WATER in "Trebuchet MS" 700 at clamp(2.7rem, 8.6vw, 6.6rem) with a drop-shadow, a bold tagline, body copy in Verdana, and a pill CTA with a squishy hover. Three water droplets slide down the glass panel using a --dist custom property and a keyframe that squashes them flat at the end. Right: three glass spec chips (OXYGENATION 98%, MINERALITY 64mg/L, CLARITY 100NTU) with gradient bars that scaleX in on load. Below: a monospace marquee ticker and a 18vh reflective floor strip with a repeating vertical shimmer sliding via transform, a blurred mint light spill and a glowing horizon line. Palette: #7ec8f0 sky, #c8f0d8 mint, #ffffff gloss, #1a6ea8 deep water, #f2f7a0 lime pop.

Original prompt · 042-ukiyo-e-wave.txt

Build a single self-contained HTML page that presents a fictional ukiyo-e woodblock print as a full-bleed sticky artwork. The print is one inline SVG with viewBox 0 0 1600 1000 and preserveAspectRatio="xMaxYMid slice", drawn as flat colour planes on a kozo-paper field (#f2e8d5): a gold sun disc (#e8b04b, r 94) with a soft radial sun-wash behind it, a small snow-capped pine mountain (#2f5d3a with a paper-white cap) placed left of centre, and a single giant wave in three indigo tones (#33608c back swell, #254c72 mid swell, #1a3a5c front mass) whose top edge sweeps from bottom-left up to a crest at the top right. The crest carries a white foam band plus four comma-shaped foam claws built from one hand-authored bezier path and placed with transform="translate() rotate() scale()"; a small indigo boat with three paper-colour figures and two short oars rides the trough. Lighter ridge strokes (#6fa0c8, 5px, opacity .55) flow down the wave face for woodblock water texture. Overlay a multiply-blended paper-grain layer (repeating-linear-gradients in indigo and vermilion plus two dot patterns) drifting 46s, and a radial vignette. Print furniture in HTML: a vertical writing-mode cartouche top-left in Georgia uppercase with .32em tracking, a vermilion seal button (#d94f2b) bottom-left, and an "EDITION 36 / 100" monospace line. Below the sticky print, a colophon sheet with the headline "The wave does not repeat. Only the block does.", two paragraphs, a rule, and three edition swatch buttons. Motion: the sea group gently swells (scaleY 1.02, 12s alternate), each claw curls ±2.5deg on its own timeline, the ink layers settle in with small staggered translateY, and a multiply-blended roller bar sweeps across on load and on every edition change. Palette: #1a3a5c indigo, #f2e8d5 paper, #d94f2b vermilion, #2f5d3a pine, #e8b04b sun.

Original prompt · 043-market-pulse.txt

Build a single self-contained HTML page that is a live data-art trading dashboard for twelve fictional tickers, with all data generated in-page by a seeded random walk and zero network access. Layout: a full-viewport dark terminal grid (background #0a0f14) with five rows — header, scrolling ticker tape, main dashboard, watchlist strip, footer. Header: "Market Pulse" set in Georgia italic with the word "Pulse" in amber #eab308, a monospace uppercase subtitle, a pulsing green LIVE dot, a 1x/2x/4x/8x timeframe button group, a Pause/Resume button, an amber speed slider (2–26 ticks per second) and a live tabular-nums clock. Ticker tape: a duplicate-pair marquee translating -50% over 38s, each entry a monospace symbol, last price and a green/red percentage. Main grid: left a chart panel with a canvas candlestick chart (56px right axis, four gridlines, price labels, per-candle volume histogram in the lower 16%, an amber dashed last-price line, crosshair on hover, candle bodies at least 3px tall with wicks) plus a 52–86px momentum strip canvas showing a 150-tick area+line with a head dot; right a heatmap panel of twelve buttons whose background colour is interpolated from #131c26 through green #22c55e or red #ef4444 by percentage change, four stat tiles (session high, session low, ticks, volatility) and a breadth counter. Bottom: a horizontal watchlist of twelve clickable cards with symbol, last, signed change and a scaleX magnitude bar. Palette #0a0f14 background, #22c55e up, #ef4444 down, #eab308 amber, #94a3b8 grid grey. Interaction: hover a candle for an OHLC tooltip and crosshair; click any watchlist card or heatmap cell to focus that symbol; Pause freezes the tape; the slider sets tick rate; keys 1–4 change the candle aggregation (3/6/12/24 ticks per candle) and space toggles the tape. Dirty-gated rAF: the canvas only redraws when data or hover changes.

Original prompt · 044-holo-trading-card.txt

Build a single self-contained HTML page presenting one holographic trading card for a fictional creature on a dark pedestal. Page background: layered radial gradients from #241547 through #1b1030 to #0a0616, with a fixed multiply/overlay grain layer of 1px repeating lines and 5px dot patterns, and a pink glow that tracks the pointer via --mx/--my custom properties. Layout: centred column — a monospace uppercase eyebrow "NEOFAUNA · SERIES II · HOLO" with hairline rules; a stage with perspective 1400px containing a softly floating 3:4 card (width min(74vw, 288px), aspect-ratio 3/4) over a blurred teal/pink elliptical pedestal glow; below the card three stat tiles (POWER 84 PWR, RESILIENCE 61 RES, SPEED 92 SPD) and a holo-level meter that fills to 93% on hover; a monospace hint line. The card has two faces with backface-visibility hidden: the front holds an SVG Lumen Moth — four translucent wings with pink-gold-teal linear gradients, darker inner wings, gold eyespots with rings, vein strokes, scale ellipses, a segmented white-teal abdomen, four legs, curved antennae, black eyes with teal glints, and a glowing thorax orb — plus a name plate in Georgia small-caps with a gradient-clipped fill, a subtitle line and an animated "HOLO RARE" pill badge (system-ui 800, 260% gradient background scrolling over 5.5s). Three blend-mode layers over the front do the foil: a 270% linear rainbow sweep in color-dodge whose background-position is driven by --mx/--my, a conic rainbow in overlay whose angle is driven by --rot, and a screen-mode radial glare that follows the pointer. Eighteen twinkling sparkles are scattered inside the art window. The back face shows lore copy, three scaleX stat bars, a lumen-output row, "EDITION 001 / 500" and a deterministic 9x9 QR-like block. Palette: #1b1030 deep purple, #ff5c8a holo pink, #5eead4 holo teal, #ffd166 gold, #f8fafc white.

Original prompt · 045-arcade-attract.txt

Build a single self-contained HTML page that is a retro arcade cabinet attract screen running a live demo. Full-viewport black (#05030a) cabinet with a canvas behind and a CRT stack of overlays in front: a multiply-blended layer of 1px scanlines every 3px plus a radial corner vignette, a screen-blended 1px/2px pink-cyan aperture-grille stripe layer, a 22%-tall cyan sweep band translating from -24% to 124% over 7.5s, and a flicker overlay that steps to 5–7% black for single frames. Canvas draws a 260-star 3D starfield (z depth 0.03–1, projected around the centre, colours cyan/white/violet/pink, size and alpha from 1/z), six purple wireframe asteroids with irregular 7-sided polygons that drift and wrap, a cyan wireframe arrowhead ship with a pink cockpit and yellow wing accents following a closed Catmull-Rom loop through seven waypoints, yellow shots fired every 620ms along the ship heading with fading trails, and pink/yellow particle bursts when a shot hits a rock (score +100). UI overlay in ui-monospace uppercase: a marquee "ASTRO VANGUARD" (cyan + pink, letter-spacing .16em, chromatic text-shadow with 2px pink and -2px cyan offsets plus layered glow), a "1 PLAYER · 1 COIN · NEON ORBIT SYSTEMS 1984" subtitle, a right-hand HUD with a blinking DEMO badge, SCORE and WAVE readouts, a centre-left HIGH SCORES table of seven rows (rank in violet, name, tabular-nums score, leader in yellow), a large blinking INSERT COIN line that becomes PRESS START once credits exist, a CREDITS counter, and a bottom control panel strip listing the controls. Palette #05030a black, #ff2d78 neon pink, #00e5ff cyan, #ffd400 yellow, #7c4dff violet. WebAudio square/triangle blips are created and resumed inside the first user gesture and wrapped in try/catch.

Original prompt · 046-cloud-dreamscape.txt

Build a single self-contained HTML page that feels like drifting inside a pastel cloud dream. Canvas covers the whole viewport (fixed, DPR-scaled with ctx.setTransform, re-seeded on resize) and renders a vertical sky gradient interpolated between four time-of-day palettes built from #eaf2fd/#dfe9f5/#c3d9f0/#8a9bb5 tops, #fff6e6/#f7d9e3 mids and #f7d9e3/#c3d9f0/#8a9bb5/#5f6f8c lows, plus a large soft radial sun bloom in #fff6e6 that slides and cools as the tint changes. Clouds are pre-rendered offscreen sprites (5 sizes, 4-8 overlapping radial-gradient blobs each with a flat elliptical base) recoloured per tint with a source-in gradient pass into reused tint canvases, then drawn as three parallax depth bands (0.16/0.42/0.80) at 0.52/0.70/0.90 alpha, each drifting at its own speed and wrapping around the viewport. A floating island sits lower-centre: warm radial glow, soft drop shadow ellipse, bezier rock body in #b9c8dd to #2c3748, cream-to-haze grass cap ellipse, a curved stroked trunk and four overlapping canopy circles in #c3d9f0/#8a9bb5 with a #fff6e6 blush highlight; it bobs on a slow sine. 36 petals (ellipses in #f7d9e3 and #fff6e6) fall with per-petal sway, rotation and drift. Overlay: a fixed multiply vignette radial-gradient, an editorial title card top-left — monospace kicker "index 046 · drift study no.1", display system-ui 300 headline clamp(2.5rem,9.4vw,7.4rem) with a Georgia italic second line "Dreamscape" in #8a9bb5, and a monospace uppercase caption — plus bottom HUD readouts for light and altitude, a right-side hint block, a wish line near the island, and a centred Georgia serif paragraph at 128dvh. Body is 250dvh tall so scrolling sinks the viewer through the cloud layers. Pointer proximity repels nearby clouds with an inverse-square falloff impulse and a spring back to the drift path. Wheel eases the tint target through morning/day/haze/dusk; clicking inside the island ellipse prints one of six wishes with a transform-only reveal and bursts petals. Respect prefers-reduced-motion via matchMedia by dropping all motion to 22% speed. No external assets, no network, system fonts only, everything inside one style block and one script block.

Original prompt · 047-pcb-trace-flow.txt

Build a single self-contained HTML page that turns the viewport into a living printed circuit board seen through a 3D perspective. Body background #0f172a, overflow hidden. A fixed stage with perspective 1500px holds a .plate layer inset -9% whose transform rotateX/rotateY is driven by pointer position and eased with a dirty-gated requestAnimationFrame lerp (idle stops writing styles); an inner .board sits at translateZ(26px). The board itself is one inline SVG, viewBox 0 0 1200 800, preserveAspectRatio xMidYMid slice, built by assigning an innerHTML string to the existing svg element (never createElementNS, no namespace attribute anywhere). Background: a linear gradient #0d4a37 to #062a1f with a large radial #1a6a4c copper-pour bloom, a 2px silkscreen frame at 16% opacity and a 45-degree hatch pattern of 10%-opacity #d4a537 lines. Traces are generated from a seeded mulberry32 PRNG: 9 horizontal walks starting off-canvas left plus 11 vertical walks starting off-canvas top, each walking 48-144px steps with 62% chance of a 48-96px jog, clamped inside the board, then converted to rounded polyline paths with 13px chamfers. Each trace renders five stacked paths: #0f172a shadow at 9px, #d4a537 copper at 3.6px, a 1px rgba(255,231,168,.28) highlight, a #6ee7b7 10px glow with dasharray 14 986 at 13% opacity, and a #6ee7b7 2.3px signal dash — the last two use pathLength 1000 and a CSS keyframe animating stroke-dashoffset from 0 to -1000 so pulses travel the full path, with per-trace negative animation-delay for desync. Vias at sampled trace corners: 7.5px copper ring, 2.7px dark hole, plus a pulsing #6ee7b7 halo animated on stroke-opacity with staggered delays. Eight components (U1 mcu, U2 regulator, U3 shift register, Q2 mosfet, L1 inductor, C4 capacitor, R12 resistor, D1 led) drawn as dark rects with copper pins, a green polarity dot and monospace silkscreen labels; hover turns their stroke to #6ee7b7 and writes their name and description into a probe readout. Clicking a trace adds a .ping class for 1.1s that speeds its dash animation and brightens the glow. Overlay chrome: top-left header with a monospace kicker, an 800-weight system-ui headline where TRACE is #f8fafc and FLOW is a gradient-clipped #d4a537 to #6ee7b7 wordmark, and a tracked-out subtitle; bottom-left legend of three colour swatches; bottom-right panel with a custom-styled range input (0.4 to 3) that sets a --rate custom property controlling every pulse duration and updates a MHz readout. Fixed dot-grid grain and a radial vignette sit above the board. Respect prefers-reduced-motion by disabling pulse, glint and via animations and the tilt.

Original prompt · 048-cover-maker.txt

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.

Original prompt · 049-brutalist-calculator.txt

Build a single self-contained HTML page containing a fully working brutalist calculator, centred on a concrete background (#d9d6cf) made of a 1px 5px repeating grid in both axes plus a soft white top bloom. The body is a max-width 420px slab with a 3px #1a1a1a border and a hard 10px offset black shadow. Header row: a 900-weight system-ui wordmark "BRUTAL CALC" over a tracked monospace "MK.049 · concrete series", and on the right a hazard-stripe power switch built from a repeating-linear-gradient of #1a1a1a and #ffd400 with a concrete knob that slides on transform, plus a pulsing #e8531f LED that goes grey when off. Display: near-black panel with a 1px scanline overlay, a monospace label row, a right-aligned monospace expression line in grey, and a huge clamp(28px,10vw,46px) amber #ffd400 dot-matrix value line with layered text-shadows for glow. Keypad: 4x5 CSS grid of chunky keys at height clamp(50px,12.5vw,68px), background #e7e4dd, 2px black border, hard 4px black shadow, system-ui 800; operators #ffd400, function keys #7a7f87 with white text, equals #e8531f; pressing translates the key 4px down-right on a steps(2) transition so the shadow vanishes. Below: a dashed-rule paper tape with a monospace "history" toggle button, a #f7f6f1 receipt strip in Courier New with dotted-line rows that feed in from above with a steps(6) transform, and a collapsible history list. Footer shows "no eval · parser v1" and a sound toggle. The calculator is genuinely functional: tokens are collected into an expression string, then a hand-written recursive-descent parser (expr → term → factor, with unary minus and parentheses) evaluates it — never eval. Live preview shows the running result while typing. C clears, CE removes the last number, the backspace key deletes a character, ± toggles the sign of the trailing number, and = commits the result to the tape and history. Full keyboard support maps digits, operators, Enter, Backspace, Escape and Delete to the same press path with a visible key flash. Every key press synthesises a short square-wave click through a WebAudio context created lazily inside the first gesture and wrapped in try/catch. The power switch disables input, dims the display and collapses the keypad with a transform. Respect prefers-reduced-motion.

Original prompt · 050-lava-lamp.txt

Build a single self-contained HTML page that simulates a lava lamp at 60fps on a full-viewport canvas. Room background is a vertical gradient #150a1e to #2b0f3a to #0c0612 with a large radial warm bloom behind the glass whose radius and alpha scale with the heat value. The lamp is drawn in a local coordinate frame pivoted at the base: a chrome trapezoid base filled with a multi-stop silver gradient (#5a5f66, #f5f5f5, #a9aeb6, #eceef1, #8b9098, #f5f5f5, #4c5157), a #12121a plinth, an amber heater ring at 20-75 percent alpha, a chrome cap with three dark vent slots, and a stadium-shaped glass vessel (hand-written capsule path with two arcs) stroked at rgba(245,245,245,.34) with an inner vertical shading gradient, a soft left highlight ellipse and top/bottom ellipses. Inside the glass, 7-16 gel blobs are integrated with soft-body physics in local coordinates: gravity is rotated by the lamp tilt so the blobs genuinely slosh, each blob has a warm value that rises near the heater and falls at the top, buoyancy equals (warm - 0.44) times a heat-scaled constant, there is a damping drag of pow(0.12, dt), wall collisions against the capsule half-width, floor and ceiling bounces, volume-conserving merges when two blobs overlap by more than half their combined radius, and splits above 0.44R. The blobs are rendered as metaballs without filters: each is an additive white radial gradient with a near-solid core drawn with globalCompositeOperation lighter onto an offscreen canvas, the union is then recoloured with source-in using a vertical #ff6b9d to #ffb020 gradient, a hot amber core is added with source-atop, and the buffer is drawn twice into the clipped glass (once additively at 30-58 percent for bloom, once normally). Below the lamp, a mirrored, faded copy of the whole lamp plus a gradient fade creates a floor reflection; a contact shadow ellipse and a hairline shelf gradient sit at the base. Overlay chrome: a Georgia italic display title with the second word gradient-clipped in pink to amber, monospace kickers, a bottom-left control panel with a custom heat range input (0-1, updates the readout and the palette/speed), a pause button, live blob-count and fps readouts, and a right-side hint block. Interactions: pointer-drag tilts the lamp with a damped spring and real sloshing; clicking a blob pops it into six droplets that shrink and drift; space toggles pause. All shared state is declared before the boot calls; canvas is DPR-scaled with ctx.setTransform and resized. Respect prefers-reduced-motion by freezing the simulation.

Original prompt · 051-stained-glass-maker.txt

Build a single self-contained HTML5 artwork (no external assets, no fonts, no libraries, all CSS in one inline <style>, all JS in one inline <script> at the end of <body>). Concept: a cathedral window on a stone wall. Layout: a sticky 100dvh room (position:sticky, top:0) containing a centred arched window at aspect-ratio 2/3, width clamp(150px, min(40vw, 38dvh), 390px); beneath it a brass caption plate (Georgia small-caps, key line in ui-monospace, .3em tracking) reading "Fig. LI — Leaded Light Engine / The Rose of Saint Elmo"; beneath that a control row: a GENERATE button (ui-monospace, .24em tracking, uppercase, linear-gradient(180deg,#2e2e4a,#171726), 1px #4b4b6d border) and four palette chips (flex of five colour stripes). Body is 200dvh with a second screen — a translucent colophon plaque (linear-gradient rgba(9,9,17,.84) to rgba(6,6,11,.94)) that scrolls up over the pinned window so the glass ghosts through it. Palette: #1a1a2e stone, #d4af37 lead, #7c3aed violet, #dc2626 ruby, #f59e0b amber; wall built from stacked radial and repeating-linear gradients (mottling + stone courses) over a #24243f→#16162a→#09090f base. The window: inline <svg viewBox="0 0 600 900"> with an arch path "M64,884 L64,400 A236,236 0 0 1 536,400 L536,884 Z", a clipPath of that arch, a dark void fill, a <g id="cells"> that receives a runtime-built Voronoi tessellation via innerHTML strings (never createElementNS), plus sheen and vignette rects (pointer-events:none) and stone/gold tracery strokes. Cells: sites scattered on five concentric rings (r = 64/132/204/284/366, counts 7/12/16/21/26) around (300,430) with angular jitter, plus 12 random filler sites; each territory computed by Sutherland–Hodgman half-plane clipping against every other site's perpendicular bisector; polygons under area 110 discarded; each path gets fill url(#gN) where N = (angularSector + ringIndex) % 5 so no neighbours share a hue, a lead stroke #d4af37 of width 3.1–5.7, and a data-x attribute of its centroid. Five radialGradients g0–g4 are written into <defs id="grads"> by innerHTML: stop 0 = colour mixed 62% toward white, stop 52% = 14% toward white, stop 100% = 60% toward #070711. Motion: two skewed linear-gradient light beams (mix-blend-mode:screen, no blur filter) sweeping on 19s and 27s alternate transform animations; a breathing radial glow; ~15 cells shimmering fill-opacity 1→.72 on randomised 3.4–7.2s alternate keyframes; a dark dove silhouette path flying across the arch on a 29s linear loop with a -9s delay so it crosses occasionally. Interaction: GENERATE fades #cells to opacity 0 for 300ms then rebuilds a fresh tessellation; palette chips re-lead with a wipe (each cell gets transition-delay = centroidX/600*0.5s and opacity .05, gradients swap at 620ms, cells fade back); hover a pane brightens it (filter:brightness(1.55) saturate(1.18)); clicking a pane toggles .dark (#0d0d18 fill, #4b3f1d stroke); scroll maps page progress to a --dim custom property (0→0.85) consumed by a vignette + flat darkening overlay, rAF-dirtied and thresholded so idle frames write nothing. Respect prefers-reduced-motion by killing beam/glow/dove/shimmer animations. Zero console errors, all state declared before boot calls, single IIFE, no 'http' substring anywhere, ends </script></body></html>.

Original prompt · 052-bioluminescent-deep.txt

Build a single self-contained HTML5 canvas artwork (no external assets, fonts, libraries or network calls; all CSS in one inline <style>, all JS in one inline <script> at the end of <body>; the substring 'http' must not appear anywhere). Concept: the deep sea lit only by living light. Structure: one fixed full-viewport <canvas id="sea"> (touch-action:none, cursor:crosshair) plus a pointer-events:none overlay layer containing a hairline gradient rule, an h1 in system-ui font-weight 200 uppercase at clamp(1.35rem,4.6vw,3.6rem) with letter-spacing clamp(.14em,1.5vw,.42em) — word "Bioluminescent" on line one, a nested <em> "Deep" at .62em with clamp(.3em,3.2vw,.9em) tracking — a four-row monospace HUD bottom-left (DEPTH / TEMP / AMBIENT / ORGANISMS, keys at rgba(160,196,224,.52), values #bfe6ff tabular-nums), a right-edge depth scale (1px track with 0/250/500/750/1000/1400 m ticks and a glowing #7dd3fc marker), and a bottom hint line "drag to drift · wheel to descend · click to spark". Palette: #01060f abyss, #0ea5e9 cyan, #a3e635 lime, #c084fc violet, #e2e8f0 foam. Canvas: sized to window.innerWidth/Height with DPR scaling — canvas.width = cssW * devicePixelRatio, ctx.setTransform(DPR,0,0,DPR,0,0) — sizing called once at boot and again on resize/orientationchange; a world width of 1.8 * viewport with a clamped pan offset for horizontal drift. Layers painted each frame: a vertical background gradient interpolated across three colour stops ([7,42,68] → [3,18,33] → [1,6,15]) by a smoothed depth value 0→1; a top-down caustic haze radial gradient whose alpha scales with (1 - depth*0.78); 170 marine-snow motes (plain arcs, per-mote twinkle alpha, wrap-around); a pointer wake of up to 26 fading radial-gradient smears; 110 plankton in four palette hues drawn additively (globalCompositeOperation 'lighter') as small radial-gradient glows whose radius and alpha pulse on sin(t*rate+phase)^2.2; click/auto plankton bursts (particles with velocity, drag 0.975, slight gravity, life decay) each rendered as a hue glow plus a white core; and 5 jellyfish drawn back-to-front by z. Jellyfish: bell as four bezier segments (dome with a scalloped underside), contraction c = pow(sin((t*pulseRate+phase)*PI),3) driving bell width size*(1-0.16c) and height size*(0.90+0.26c); radial-gradient bloom at w*3.4, radial-gradient bell fill (rim hue centre → hue edge), rim stroke, five curved ribs, and a white core flash when c > 0.55; seven tentacles of ten points each that spring-follow their parent point with 0.30 lerp and a sin-based lateral sway, drawn as a quadratic-curve path with round caps. Motion: a curl-like current field currentAt(x,y) = [sin(y*0.0042+t*0.13)*0.30 + sin(t*0.061+x*0.0011)*0.22, cos(x*0.0031+t*0.105)*0.16 - 0.05] advects snow, plankton and jellyfish; jellyfish are additionally pulled toward the pointer (force 42/(d2+2600), applied only while not dragging) and bounce softly off world edges; an automatic bioluminescent burst fires every ~8.5s. Interaction: pointerdown starts a pan drag (setPointerCapture inside try/catch), pointermove sets pan = clamp(panStart - dx, 0, maxPan) and pushes wake points, pointerup with total movement under 7px spawns a 30-particle burst, wheel (passive listener, no preventDefault) raises/lowers depthTarget which the frame loop eases toward at dt*2.6, darkening the water and thinning the glow. HUD text updates at most ~11 times per second with a 0.09s clock gate; the depth marker moves by transform. All state declared before boot calls; a single IIFE; dt clamped to 50ms; prefers-reduced-motion multiplies drift speeds by 0.25, disables auto-bursts and stops the title animation (which otherwise breathes between opacity .58 and 1 so a frozen frame still shows it). Zero console errors; file ends </script></body></html>.

Original prompt · 053-dandelion-drift.txt

Build a single self-contained HTML5 canvas artwork (no external assets, fonts, libraries or network calls; all CSS in one inline <style> in <head>, all JS in one inline <script> at the very end of <body>; the substring 'http' must not appear anywhere). Concept: a dandelion clock in a meadow, its seeds drifting away on turbulent wind. Layout: one fixed full-viewport <canvas id="meadow"> (touch-action:none, cursor:grab) under a pointer-events:none overlay whose children re-enable pointer events. Overlay: top-left an h1 in Georgia italic at clamp(1.9rem,5.6vw,4.1rem), colour #3f4436, with a nested <em> in small-caps #8fae7a reading "Drift", and beneath it a ui-monospace sub-line at clamp(9px,.78vw,11px) with .26em tracking: "drag across the head · click for a burst"; top-right a frosted wind gauge card (rgba(255,255,255,.62), 1px rgba(74,74,63,.18) border, backdrop-filter:blur(3px)) containing a 60x60 compass SVG with two rings, four cardinal ticks and a #8fae7a needle inside <g id="needle"> rotated via setAttribute('transform','rotate(deg 30 30)'), plus a monospace readout of wind strength and bearing; bottom-centre a dock with a custom-styled range input (2px track gradient rgba(74,74,63,.22)→#8fae7a, 14px white thumb with -webkit-appearance:none and a hover scale) and a "Regrow" button that fills meadow-green on hover; bottom-right a large tabular seed counter. Palette: #f7f3e8 sky, #8fae7a meadow, #ffffff seed, #4a4a3f stem, #d9b44a pollen. Canvas: DPR-scaled (canvas.width = cssW * devicePixelRatio, ctx.setTransform), sized once at boot and on resize; the head sits at x = 0.26W (0.30W under 640px), y = 0.70H, radius clamp(min(W,H)*0.135, 52, 168). Paint order: four-stop sky gradient (#fbf8f0 → #f7f3e8 → #eef0dd → #e6ead4), a warm radial sun flare at (0.80W, 0.16H) with a small solid disc, a horizon haze gradient, back-half grass blades, the stem, attached seeds, free seeds, front-half grass, pollen motes. The head is 112 seeds placed by phyllotaxis (angle = i * 2.399963, radius = sqrt((i+0.5)/N)) so the pappus forms a golden-angle spiral; each attached seed is drawn as eight quadratic-curve pappus hairs from a hub plus a 5px achene stem. The head deflates as seeds leave: R = headR * (0.34 + 0.66 * attached/N), and the whole head bobs and leans with the stem. The stem is a quadratic curve from (hx-6, 0.86H) to the head with a mid control point offset by a spring-driven stemBend (accel = -bend*5.2 - vel*1.9, damped, clamped ±0.5) so gusts shake it. Motion: a wind field windAt(x,y) = [(0.52 + 0.34*sin(y*0.0055 + t*0.9)) * w * 1.9 + sin(t*0.63 + x*0.0035)*0.42*w, sin(x*0.0046 + t*1.15)*0.30*w + cos(y*0.0031 - t*0.55)*0.16*w - 0.05 - w*0.05] advects every free seed; each seed also gets a per-seed sinusoidal sway, drag, rotation with spin decay, a scale spring on release, and is culled past the frame edges (free seeds capped at 150). Free seeds cast a soft translucent ellipse shadow offset (9,13). 90–260 grass blades (count from width) sway on sin(t*(0.7+depth*1.1)+phase)*(4 + 22*wind); 70 pollen motes twinkle in #d9b44a. Interaction: pointerdown inside the head releases up to 4 seeds; dragging interpolates release points along the pointer path in up to 8 sub-steps, each releasing up to 3 seeds within 0.30 * headR; pointerup without drag (total movement ≤ 2px) releases a 16-seed burst around the click, falling back to the head; the range slider sets windTarget (eased at dt*3.2) and nudges the stem; Regrow rebuilds all 112 attached seeds and resets wind to 42; ArrowLeft/ArrowRight change wind by 0.06 and sync the slider. HUD updates on a 0.1s clock gate; needle rotates by the true wind bearing. prefers-reduced-motion scales all advection to 0.35. Single IIFE, all shared state declared before boot, dt clamped to 50ms, zero console errors, ends </script></body></html>.

Original prompt · 054-mono-type-specimen.txt

Build a single self-contained HTML5 typographic artwork (no external assets, fonts, libraries or network calls; all CSS in one inline <style> in <head>, all JS in one inline <script> at the very end of <body>; the substring 'http' must not appear anywhere). Concept: a monochrome type specimen — one ink on one paper tone, extreme scale contrast, a waterfall of weights, kinetic baseline shifts, pure typography as art. Palette: #f4f2ed paper, #141414 ink, #6b6b6b mid, #c9c6bf rule, #000000 black. Faces: a CSS custom property --face that resolves to system-ui/-apple-system/"Segoe UI"/Roboto/Helvetica/Arial for sans and Georgia/"Times New Roman"/serif for serif, plus ui-monospace for all meta text; body.serif swaps the variable so every specimen element changes face at once. Layout, top to bottom: (1) a fixed 24px baseline grid overlay (repeating-linear-gradient of rgba(201,198,191,.55) 1px lines) and a fixed left rail — a 1px ink line whose transform:scaleY maps to scroll progress, with a rotated three-digit readout at its foot; (2) a masthead meta row (9px, .26em tracking, uppercase, #6b6b6b, bottom border 1px #c9c6bf) listing Specimen 054 / Monochrome / One ink / Scale 8px—760px / Nine weights; (3) a 250vh hero-wrap containing a position:sticky top:0 height:100dvh hero with a .glyph-stage grid (place-items:center) holding three stacked grid-area:1/1 layers — a #c9c6bf ghost glyph at clamp(240px,62vw,900px) and two ink glyph layers at clamp(190px,52vw,760px) with letter-spacing -.03em — plus a centred hero caption and a bottom meta row showing the character name and "NN / 14" index; scrolling the hero-wrap morphs the glyph through the 14-character set A a R g Q & W ? K S § ¶ Æ €; (4) a "Weight waterfall" section with a sticky top:40px preview bar showing a huge "Aa" plus the weight name and number, above nine rows (100 Thin → 900 Black) that slide in from translateY(26px) via IntersectionObserver — never opacity — each row a three-column grid of weight number, a specimen sentence set in that literal font-weight, and the weight name; (5) a "Scale ladder" of the same sentence at 8/11/16/24/38/60/96px with px labels in the left gutter; (6) a "Measure" section with two justified columns of specimen prose; (7) an "Alphabet" grid of 26 cells (auto-fill minmax(56px,1fr), 1px #c9c6bf gaps) where each cell is a button showing the letter large plus its index small; (8) a "Figures" section with 0–9 at clamp(2.2rem,13vw,10rem) tabular-nums and a punctuation line; (9) a colophon footer. Every section header is sticky top:0 on paper with a 1px ink rule, small-caps face. Motion: the hero glyph cross-fades and scales between characters (outgoing layer translates -16% and scales 1.05, incoming layer enters from translateY(30%) scale(.78) with a .68s cubic-bezier(.2,.75,.2,1) transform and a .5s opacity cross-fade, then the incoming text is swapped into the always-visible base layer at 700ms); waterfall rows slide in on intersection; the rail draws down the page with scroll. Interaction: scrolling drives the glyph index from hero-wrap progress; hovering a weight row previews that weight in the sticky "Aa" panel and shifts the row's sample text 8px right; pressing A–Z (case-insensitive) highlights that alphabet cell, scrolls it to centre with scrollIntoView and pulses it for 1.6s; clicking the fixed "Face: Sans/Serif" button toggles body.serif and flips its aria-pressed; clicking any alphabet cell does the same as the key press. prefers-reduced-motion removes the row slide-in transform and the glyph morph (instant swap). All shared state declared before boot; one IIFE; scroll work rAF-dirtied with a 0.0015 threshold; zero console errors; ends </script></body></html>.

Original prompt · 055-kinetic-poetry.txt

Build a single self-contained HTML5 kinetic-poetry artwork (no external assets, fonts, libraries or network calls; all CSS in one inline <style> in <head>, all JS in one inline <script> at the very end of <body>; the substring 'http' must not appear anywhere). Concept: a quiet poem whose lines assemble word by word as each screen enters, drift while settled, and dissolve when they leave. Palette: #0e0d0c ink (background), #f2e9dc paper (text), #c98a5e ember (accents), #6b7a8f dusk (attributions and HUD), #e8d5b7 sand (title). Type: Georgia/"Times New Roman" serif italic for all verse at clamp(2rem,6vw,4.4rem) with line-height 1.26 and letter-spacing -.012em; small-caps Georgia at .26em tracking for the roman-numeral attributions; ui-monospace for the kicker, cue, HUD counter and signature. Layout: seven full-height screens (min-height:100dvh, flex column, justify-content:center, padding clamp(56px,12vh,150px) clamp(24px,9vw,140px)) — a title screen with a clamp(2.7rem,11vw,8.5rem) italic h1 "Night Letters" (second word on its own line in paper white), a mono kicker "A poem in six parts", an italic standfirst at 1.85 line-height, and an animated scroll cue at the bottom-left; five stanza screens each led by a small-caps roman numeral; and a centred dedication screen ending in an ember-coloured line and a mono signature. Fixed chrome: a 2px progress rail pinned to the right edge whose inner fill is transform:scaleY driven by scroll, a mono HUD bottom-right showing "01 / 07" (current screen / total), and a "Reading mode" button bottom-left. Atmosphere: a fixed radial ember/dusk glow behind the text, a radial-gradient vignette, and a grain layer made of two offset radial-gradient dot patterns on a 1.15s steps(3) translate3d jitter. Motion, all CSS-driven: JS splits every .line into <span class="w"><span class="wi">word</span></span> pairs, assigns each word a per-word --dx/--dy from a direction table ([-46,20] [48,16] [-28,-26] [36,-20] [0,30] [-54,-6] [54,-6] [-18,26]) and a transition-delay of wordIndex*0.058s + lineIndexInStanza*0.1s; the pre-state class on a screen gives words transform:translate3d(var(--dx),var(--dy),0) scale(.94), filter:blur(6px), opacity:.55 and transition:none, so removing the class plays a 1s cubic-bezier(.16,.84,.24,1) transform plus a .95s opacity/filter ease-in with the stagger. Idle drift is a 9s alternate translate3d(0,-.045em,0) animation on the inner .wi span, so it never fights the entry transform; hovering a line pauses that drift (animation-play-state:paused) and JS adds a 'held' class to the section so the IntersectionObserver will not dissolve it. Content: an original six-part poem in the first person about night, waiting and staying awake for someone, with the dedication "for everyone who stayed up / waiting for a word — / this is the word. / Stay." Interaction: an IntersectionObserver with thresholds [0,0.14,0.42,0.7] removes the pre-state above 0.42 ratio (words assemble) and re-adds it below 0.14 (words blur away on exit), giving an assemble/dissolve loop in both scroll directions; a "Reading mode" button toggles body.reading, which forces every word to transform:none, filter:none, opacity:1 and kills the drift animation so all text is static; ArrowDown/PageDown and ArrowUp/PageUp jump to the next/previous screen with window.scrollTo({behavior:'smooth'}), Home/End jump to the first/last; scroll progress is rAF-dirtied with a 0.0012 epsilon and updates the rail scaleY and the HUD counter. Boot order: split lines, mark below-fold screens with the pre-state before wiring the observer, then attach listeners — so a frozen render still shows the title screen fully legible. prefers-reduced-motion disables the grain, the drift, the cue pulse and all word transitions. Single IIFE, every null guarded, zero console errors, ends </script></body></html>.

Original prompt · 056-orb-loader.txt

Build a single self-contained HTML page (no external assets, system fonts only) titled "Orb Loader — Waiting, Beautifully": a dark deep-space loading ritual on #0b0f19 with a faint hand-placed starfield of 1px radial-gradient dots and a 130%/95% top-centred radial wash from #16203a through #0d1322 to #06080f, plus a fixed vignette (radial-gradient 75% 60% at 50% 50%, transparent 40% to rgba(4,6,12,.72)). Layout: a 3-row grid (topbar / centered core / footer) inside a min(1180px, 92vw) stage. Topbar has a glowing 11px glass bead + "AETHER / ORB" in 11px 600 uppercase with .46em letter-spacing and a pill-shaped monospace index chip "056 · LOAD RITUAL" (border rgba(148,163,184,.16), background rgba(30,41,59,.42)). Core: a small monospace eyebrow with an orchid "light", then a clamp(200px,48vmin,320px) square orb-wrap. Inside it: a 1px ring track (rgba(148,163,184,.13)) with inset glow, a repeating-conic-gradient tick bezel masked to a 3px rim at 50% opacity, a masked conic-gradient progress arc (ice #7dd3fc with a 165deg soft tail into orchid #f0abfc, from -90deg, painted by JS each change), 7 orbiting satellite dots (9px radial-gradient beads, alternating ice/orchid with box-shadows) positioned every frame in an elliptical orbit (y compressed to .52, per-dot wobble in angle and radius, depth-based scale/opacity/z-index), and a glass orb at 72% of the wrap built from stacked radial-gradients (white specular at 30%/24%, orchid bloom at 68%/78%, ice body, #1e293b-to-#0d1424 core) with inset dark shadow, inset ice glow, inset top highlight and a 70px outer drop shadow; inside the orb a blurred 9px conic-gradient refraction layer (ice/orchid/white) swirling on a 17s linear rotation at .42 opacity, a soft sheen ellipse rotated -16deg, and a 1px inner rim. A centered oversized percentage (system-ui weight 200, clamp(46px,12vmin,96px), -0.05em tracking, tabular-nums, ice text-shadow) with a 0.36em orchid "%" sits over the orb. Below the orb: a 1.4em overflow-hidden status line in ui-monospace uppercase .19em tracking, swapped with a translateY(100%→0) slide animation; under it a 10px .26em-tracking hint. Footer: a hairline rule, five animated equalizer bars (ice/orchid gradients, 1.1s staggered keyframes), a live monospace status note and a right-aligned label. JS in one IIFE at the end of body: frame-driven progress over 235 frames (about 4s at 60fps) with easeOut 1.85 and subtle sine jitter, six status thresholds, dirty-gated percentage/ring writes (no writes when the integer or arc delta is unchanged), a glowing 10px ring head pinned to the leading edge of the arc via rotate + translateY of a --rr radius variable, rAF orbit loop using `let` counters, pointer-capture drag that adds angular velocity with clamping, pointermove refraction (translate the blur layer by up to 9px and add a .hot class boosting opacity, scale and glow), click-to-restart with a 7px drag guard, and on completion a .bloom class that scales the orb to 1.14, fades and expands the ring, hides the head, dims the dots and reveals a glassy message pill above the orb on click. prefers-reduced-motion stops the swirl/equalizer animations, shortens transitions and damps orbital speed. Everything responsive from 360px to 1920px; no console errors; guards on every DOM lookup.

Original prompt · 057-terrazzo-lab.txt

Build a single self-contained HTML page (system fonts only, no external assets) titled "Terrazzo Lab — Composite Stone Study": a warm editorial pattern laboratory on a paper background (radial wash #fffdf9 to #f6f1ea over #e6ddd0) with charcoal #2f2a26 text. Layout is a 1520px max-width grid: a full-width masthead with "Terrazzo Lab" in system-ui 800, clamp(30px,6.2vw,74px), -0.035em tracking, the word "Lab" in terracotta #c97b5a, a hairline rule beneath, and a right-aligned monospace meta block ("composite stone study / specimen no. 057 · cast & polish"). Below: a two-column body — left, a 16/9 slab frame (border-radius 14px, 1px rgba(47,42,38,.16) border, layered warm shadow, perspective 1100px) containing a DPR-scaled canvas on #efe9e1 plus four overlays (a conic-gradient sheen on screen blend, a 104deg linear gloss sweep, a 3px multiply dot-grain, and a 340px radial specular that follows the pointer), with a floating monospace pill badge "slab live · seamless tile"; under the frame a 3×3 seamless proof tile (clamp(96px,11vw,150px) canvas) and a monospace caption. Right column: a cream control panel with density and chip-size range inputs (custom 3px charcoal-to-terracotta track, 19px radial thumb), a 2×2 palette grid of four aggregate palettes (classic, warm, cool, mono) each rendered as clipped-polygon chip swatches (clip-path: polygon(14% 0%,100% 6%,92% 100%,0% 88%)) with uppercase monospace names and a selected state (charcoal border + inset ring), SCATTER and POLISH buttons, and a monospace readout showing seed, coverage and cast. JS in one IIFE: mulberry32 seeded RNG places 40–300 (180 by default) irregular 5–7 sided chips in normalized coordinates with per-chip rotation, spawn delay, spin and optional white speckle; a 44-frame pop-in animation (about 0.7s at 60fps) uses easeOutBack so chips overshoot into place; each chip is drawn up to nine times with ±width/±height offsets when it touches an edge, making the tile genuinely seamless; the slab canvas is blitted 3×3 into the preview canvas so it updates live; dirty-gated rAF (idle = zero draws); POLISH toggles the sheen and a 3.4s gloss sweep; pointermove tilts the stack ±7deg via CSS variables and moves the specular; sliders rebuild with the same seed so density and size re-scatter deterministically; SCATTER rolls a new seed. prefers-reduced-motion stops the sheen/sweep and disables tilt. Responsive: single column under 640px, 4/3 slab on narrow screens, no console errors, all lookups guarded.

Original prompt · 058-split-flap-board.txt

Build a single self-contained HTML page (system fonts only, no external assets) titled "Split-Flap Board — Departures": a physical Solari airport departure board on a near-black stage (#0b0c0e with radial #23262c and #1a1c21 washes and a fixed vignette). Centered shell max-width 880px, 20px radius, 14px padding, brushed-metal gradient frame (#33373e to #0a0b0d) with two 9px radial screw heads in opposite corners and a deep inset shadow. Inside, a #111214 board with 12px radius, inset ring shadow and a top-highlight/bottom-shade overlay. Header row: an amber pulsing 7px status dot (2.4s steps blink) beside "DEPARTURES" in 700 uppercase .34em tracking #9aa1ac; a live 8-cell flip clock (HH:MM:SS) with larger cells (--cw clamp(15px,2.6vw,25px)); a right-aligned monospace sub block ("gate 07 · sector b / split-flap · 12 module"). Seven departure rows, each a flex row (time 5 cells, destination N cells flexible, gate 3 cells, status 10 or 3 cells) with 1px rgba(255,255,255,.045) separators, 8px radius, hover background rgba(245,165,36,.07) and a 2px translateX nudge. Every character is a split-flap cell: a 1.62:1 box with perspective 260px containing four halves — a static top half and bottom half (rounded 2px, #f4f4f0 to #dedcd5 gradients, inset highlights) plus two animated panels (top panel transform-origin bottom, base rotateX(-90deg); bottom panel transform-origin top, base rotateX(90deg)) whose inner <b> is 200% tall and clipped so the glyph sits on the cell's centre line; a 1px dark seam with a white under-line sits at 50%. Keyframes: flapA 0%→50% rotateX(0→-90deg) hold to 100%, flapB 0/50% rotateX(90deg)→100% rotateX(0), both linear over var(--fd). Monospace 700 uppercase glyphs at var(--fs). JS in one IIFE: an ALPHA alphabet table (A–Z, 0–9, space, dot, colon) drives a glyphPath() that steps a cell through at most four intermediate glyphs to its target; each cell keeps its own queue and busy flag, swaps .up/.fa text to the old char and .fb/.dn to the new, restarts the CSS animation with a forced reflow and commits the char after the flip duration; boot renders the whole board instantly (frozen-clock safe, no entrance clatter, so the very first paint is a complete legible board); the clock ticks each second through the same flappers; a 9s interval reroutes a random row; clicking a row scrambles its destination through random letters then settles on a new city; SHUFFLE reroutes everything with an 80ms wave; hover sets --fd to 420ms so the clatter slows; a SOUND toggle lazily creates an AudioContext, caches a 45ms exponential-decay noise buffer and plays a bandpassed clack (1100–3200Hz, throttled to one per 22ms) on every flip; a monospace marquee ticker loops in the footer. Status colours: neutral, #3b82f6 for BOARDING/GATE OPEN, #f5a524 for FINAL CALL/DELAYED. Layout measures itself: --cw clamps 11–22px from the board width, destination length recomputed 6–14 chars and status shortened to 3 letters under 430px. Reduced motion sets --fd to 1ms and stops the ticker and blink. No console errors; every DOM lookup guarded.

Original prompt · 059-cursor-comet.txt

Build a single self-contained HTML page (system fonts only, no external assets) titled "Cursor Comet — Light Drawn by Hand": a full-bleed interactive light painting on a #05060a space canvas. The canvas is fixed inset 0 at 100% width/height, DPR-scaled (min(devicePixelRatio,2)) with ctx.setTransform on every resize. Background is baked once per resize into an offscreen canvas: a diagonal linear gradient (#06070d to #04050a), four huge low-alpha radial nebulas (violet rgba(167,139,250,.13) at 18%/22%, cyan rgba(56,189,248,.11) at 82%/72%, pink rgba(244,114,182,.09) at 52%/102%, yellow rgba(253,224,71,.05) at 94%/14%), then 120–430 stars (radius 0.5–2.3, alpha .14–.76, 20% of them tinted 200–260 hue) with soft halos on the brightest; 70 of them are kept in a live list and twinkled additively each frame with a sine alpha. The comet itself is a particle system drawn with globalCompositeOperation 'lighter': pointer movement spawns particles interpolated along the segment from the previous to the current position, spacing 2.2–5.6px, with velocity inherited from the pointer direction plus jitter, size 1.6–4.2, life 26–56 frames and a per-particle hue jitter of ±13°. Speed maps to hue: 195° (cyan) at rest through violet to 335° (pink) at 2.4px/ms; above 1.5px/ms random yellow sparkle particles (hue 46–62, small, short-lived) are emitted. Particles are drawn from a bank of 36 pre-rendered 48px radial-gradient sprites (one per hue bucket) so the frame loop never builds a gradient. Drag is 0.945^dt, life decays 0.06/frame, alpha is life^1.5, and the pointer head draws a large soft sprite sized 10–36px by speed (×1.5 while held). HUD in a fixed pointer-events-none layer: a wide-tracked "COMET" title with a monospace subtitle top-left; a bottom-left monospace readout (velocity px/ms, hue, particle count, trail) updated only when values change; a bottom-right key legend; and a centred monospace hint that scales up and fades out on the first pointer move. A fixed radial vignette sits above the canvas. Interactions: move to draw, hold the pointer to intensify (2.6× spawn cap, bigger/faster particles), click or tap for a 110-particle radial burst plus a white flash that decays 0.9^dt, wheel changes trail length between 8 and 90 (preventDefault), space clears all particles with a flash, pointer capture for touch, and pointerleave stops spawning. prefers-reduced-motion drops the star twinkle, cuts bursts to 34 particles and skips the flash. One IIFE, `let`/`var` loops only, every lookup guarded, no console errors.

Original prompt · 060-mesh-gradient-editor.txt

Build a single self-contained HTML page (system fonts only, no external assets) titled "Mesh Gradient Editor — Blended Field": a full-viewport generative mesh-gradient editor on base #0f172a with draggable colour nodes. The gradient is painted on a fixed full-bleed canvas that is rendered at one third of its CSS size into an offscreen canvas and then upscaled with image smoothing — a cheap two-pass blur that makes the field buttery. Each node is a radial gradient with four alpha stops (rgba .78 at the centre, .34 at 38%, .11 at 72%, 0 at the rim) composited with globalCompositeOperation 'lighter' over the base fill, so overlaps bloom into pastel mesh blends; a subtle top-light-to-bottom-shade linear gradient is laid over the result. A fixed CSS veil adds a radial vignette plus a 3px dot grain. Node handles are DOM elements positioned with translate3d and a --c custom property driving a radial halo, a 14px colour dot with a white ring and a glow shadow, a dashed rotating selection ring (14s linear) and a hover/selected monospace hex tag. Top bar is a floating glass pill (rgba(15,23,42,.62), 1px rgba(148,163,184,.16), backdrop-filter blur 14px) with a monospace "MESH / 060" brand, five preset names in Georgia italic (Aurora, Dusk, Mint, Ember, Nocturne — selected state inverts to #e2e8f4 on #0f172a) and two monospace tool buttons (+ node, randomize). A right-hand glass rail holds eight colour swatches (#38bdf8, #f472b6, #fde68a, #34d399, #a78bfa, #fb7185, #22d3ee, #f8fafc) plus a minus button for deleting the selected node; a bottom glass readout shows the selected hex with a glowing dot, the node count and the selected node's normalised position, with a key hint. JS in one IIFE: nodes store normalised x/y plus spring targets; each frame runs a critically-ish damped spring (k 0.085, damp 0.80; k 0.34 / damp 0.72 while dragging) so drags carry inertia and presets spring into place; RGB channels lerp at 0.13 per frame and radius grows from 0.32 to 1 (and shrinks to 0 before removal) so nodes fade in and out by size, never opacity; a per-node sine pulse on the radius (0.055 amplitude) makes the field breathe; handle transform writes are dirty-gated to whole pixels. Presets set targets for the first N nodes and shrink the rest. Interactions: drag handles (pointer capture), double-click the canvas to add a node with the next palette colour, alt-click a handle or press the rail minus to remove it, click a swatch to recolour the selected node, presets animate every node, randomize scatters positions with a velocity kick, resize re-fits and re-places. The readout is primed once at boot so the first painted frame already shows the selected hex, node count and position. Reduced motion disables the radius pulse, the selection-ring spin and UI transitions. No console errors; every lookup guarded.

Original prompt · 061-synthwave-sunset.txt

Build a single self-contained HTML5 synthwave sunset scene that fills the viewport at any size from 360px to 1920px. Structure: one full-height .frame (100dvh) holding a .world parallax layer (sky, night overlay, sun, ground, two palms), a full-stage <canvas> for the perspective grid, a car track, a CRT scanline overlay, a vignette, a glitch bar, a centered title block and a bottom HUD. Palette: night #1a0b2e, pink #ff6b9d, amber #ffb020, cyan #6ee7f9, violet #2b1055, with deep-space #0a0320 and ground #241040 to #0c0518. Sky is a two-layer background: a radial warm bloom anchored at the horizon (62% of viewport height) over a vertical linear gradient that runs #0a0320 to #1a0b2e to #2b1055 to #5c2170 to #b03a7a to #ff6b9d to #ffb020. The sun is a CSS circle (min(46vw,440px)) pinned bottom-to-horizon with translate(-50%,-100%): a top half clipped with inset(0 0 50% 0) and a bottom half clipped with inset(50% 0 0 0) plus a repeating-linear-gradient mask (9px opaque / 6px transparent) for the classic scanline slices; a radial .sun-glow sits behind it at z-index -1. The ground is an opaque gradient block starting at --hz:62% with a 2px cyan-to-amber-to-pink horizon line that carries a 46px box-shadow bloom. The canvas draws a vanishing-point grid below the horizon only (clipped rect): 27 cyan converging verticals at 11.5% horizontal spacing and 22 pink horizontal depth lines whose y = hz + (H-hz)/d with d = k - scroll, alpha 0.1 + 0.95/d and lineWidth max(0.6, 2.3/d) so lines thicken as they rush toward the viewer; stars are drawn above the horizon as small fillRects twinkling with sin() and an alpha scaled by a night factor. Typography: display is system-ui 800 italic uppercase at clamp(42px,11.2vw,168px) with a vertical chrome gradient (white to #d7f6ff to #6ee7f9 to white to #ff9ec4 to #ff6b9d to #ffb020) applied through background-clip:text, a 1.4px pink -webkit-text-stroke and a 42px pink text-shadow; the kicker, subtitle, timestamp and HUD are ui-monospace letterspaced 0.22em to 0.62em. Motion: grid scrolls at 0.42 units/s, sun lerps toward a target that slow-sines between dusk and night, palms sway ±1.6deg on an 11s/13s alternating loop, a silhouette car cruises 26s left-to-right along the horizon, the whole frame jitters on a 13s steps(1,end) VHS roll keyframe. Interaction: pointermove sets normalized coordinates that drive a ±0.8% world parallax with counter-parallax on the title; wheel sets auto=false and scrubs the sun target between 0 and 1 (dusk to night, also darkening the night overlay opacity 0.26 to 0.88); clicking the frame toggles a .burst class that runs a steps(2,end) jolt on the world, a descending glitch bar and a chromatic text-shadow on the title; hovering the sun scales and brightens its glow. Honour prefers-reduced-motion by killing all keyframe animation and freezing scroll/parallax/sun drift while still rendering one complete static frame. All CSS in one inline <style>, all JS in one IIFE in one inline <script> at the end of body, zero external references, system fonts only, canvas sized as cssW * devicePixelRatio with ctx.setTransform, and no createElementNS anywhere.

Original prompt · 062-organic-letterforms.txt

Build a single self-contained HTML5 page that renders the word "BLOOM" as a colony of living cells on a full-viewport petri dish, using one 2D canvas and no fonts for the letterforms. Palette: deep moss #101c17, cytoplasm #7ae582, pale nucleus #c8f7c5, membrane #f4a261, bone #e9f5db. Structure: a .stage (100dvh) with a radial agar background (circle at 50% 44%, #17322b to #0a120f), two soft nutrient blooms as radial-gradients, a CSS petri dish (min(96vw,82vh) circle, 1px bone border at 11% alpha, inset 140px green glow, a dashed inner ring and faint crosshair rules via ::before/::after), the canvas, and four monospace HUD blocks. The letterforms are not a font: define each glyph as polyline skeletons on a 5-wide by 7-tall unit grid (B has three strokes, O is an eight-point loop, M is a zigzag, etc.), sample each polyline every 0.5 units, and drop a circular metaball at every sample. Render with a hand-rolled metaball field: keep a Float32Array at 0.45 of CSS size, zero it each frame, and splat every blob over its bounding box with w = 1 - d^2/r^2 and field += w*w; then walk only the union bounding box and write an ImageData pixel by pixel — alpha = clamp((f-0.28)*3.4), core mix k = clamp((f-0.9)*0.95) blending #7ae582 toward #c8f7c5, and an orange membrane rim of (1 - (f-0.28)*2.1) blending 80% toward #f4a261, plus a drifting nutrient term 0.5+0.5*sin(x*0.014 - t*0.5) that adds 16 to green and 7 to red. putImageData to an offscreen canvas and drawImage it up to CSS size with imageSmoothingEnabled for a soft organic edge. Each blob has a random phase, speed and amplitude: its radius breathes r*(1 + amp*sin(t*sp + ph)), its position wobbles on two different sine frequencies, and springs (k=95, damping=13, four substeps) return any offset to home so letters visibly bloom apart and re-form. Typography: HUD and buttons are ui-monospace letterspaced 0.2em to 0.42em in bone at 58% alpha with values in #7ae582; the caption uses system-ui 800 uppercase at clamp(15px,2.1vw,24px) with 0.62em tracking and a green text-shadow. Layout: specimen readout top-left (GEN / CELLS / TURGOR with a scaleX bar), palette key top-right with round swatches, caption bottom-centre, Split and Re-seed buttons bottom-right, hint bottom-left. Interaction: pointermove feeds cells within 170px so they swell; pointerdown on a cell splits it into two spring-loaded daughters that drift out and merge back; dragging a cell pulls it up to 190px from home while a spring snaps it back on release; R re-seeds the next word; Split and Re-seed buttons do the same; the generation counter ticks on every split. Honour prefers-reduced-motion by zeroing the ambient wobble, the auto-split timer and the nutrient drift while keeping all interaction physics live and rendering one complete static frame. All CSS inline in one <style>, all JS in one IIFE in one inline <script> at the end of body, zero external references, no createElementNS, no @font-face.

Original prompt · 063-noise-brand-identity.txt

Build a single self-contained HTML editorial brand-identity page for a fictional risograph studio called Coarse Press, styled like a printed specimen sheet. Palette: paper #e8e4da, ink #1c1c1c, riso orange #ff4d2e, riso blue #2d5bff, grey #8f8a7e, card #f2eee4. Structure: a sticky top nav (monospace 0.26em tracked, 1.5px ink bottom rule, links with an orange underline that scales in on hover), a two-column hero grid (minmax(0,1.12fr) / minmax(0,.88fr), 92dvh min height), a full-bleed ink specimen strip, a two-column long manifesto with a sticky monospace kicker, and a footer with a giant outlined wordmark over four monospace contact columns. Hero left: an eyebrow rule in orange, a display headline WE / PRINT / LOUD. at system-ui 900 uppercase, clamp(46px,12.6vw,178px), letter-spacing -0.035em, line-height 0.82, with the last word carrying a 4px orange / -4px blue text-shadow for instant risograph misregistration; a Georgia lede at 1.62 line-height; a 1.5px rule; and a four-item stat row in monospace with 900-weight numerals. Hero right: a paper card with a 1.5px ink border and a hard 10px ink offset shadow containing the logo lockup — a bold C mark built as a single arc path in a symbol, stacked three times as absolutely-positioned SVGs with mix-blend-mode:multiply, orange offset (-7px,5px) and blue offset (8px,-4px) under an ink copy — plus the COARSE wordmark and a caption. Below it a control bar: a custom-styled range input for grain, a live numeric readout, and a Print mode toggle button. Specimen strip on ink: three type specimens (Aa in system-ui 900, Georgia italic, ui-monospace) each under a hairline rule with a monospace label, plus a five-swatch ink library with hex names and an animated texture swatch. Footer: a giant COARSE wordmark at clamp(56px,17.5vw,268px) with -webkit-text-stroke 1.5px ink and transparent fill that fills solid on hover, above Studio / Enquiries / Services / Colophon columns. Motion and texture: a full-viewport fixed canvas of procedurally generated 128x128 noise drawn as a repeating pattern, re-offset to a random position every 110ms (70ms in print mode) so the grain visibly shifts in steps, blended with mix-blend-mode:multiply at opacity driven by a CSS custom property; a second fixed overlay of repeating linear gradients animated with steps(3,end) for print texture; a 4px orange scroll-progress bar scaled with transform; hero headline lines and manifesto articles that reveal by sliding up from translate3d(0,.42em,0) rotate(-.4deg) — position only, never opacity — triggered by IntersectionObserver; logo layers that jitter on a steps() keyframe when the stack is hovered. Interaction: the grain slider rebuilds the noise tile density and alpha live; Print mode doubles the grain, speeds the shift interval and restyles the button; hovering the logo stack misregisters the orange and blue layers; scrolling reveals the manifesto and advances the progress bar. All CSS in one inline <style>, all JS in one IIFE in one inline <script> at the end of body, system fonts only, zero external references, no data URIs, no createElementNS, prefers-reduced-motion honoured by stopping the texture animations and the grain interval while leaving a complete static render.

Original prompt · 064-fine-dining-menu.txt

Build a single self-contained HTML page for a fine-dining tasting menu, black-tie elegance on a dark table. Palette: ink #0f0e0c, gold #d4af37, cream #f5efe0, taupe #6b5d4a, card #1c1a17. Structure: a fixed .table background layer (radial gold wash at the top, two repeating-linear-gradient cloth weaves at 1-2% white, and a radial vignette from #17150f to #080705), a fixed .candle-wrap containing two huge radial-gradient candle glows (min(130vw,1500px) and min(64vw,760px), gold at 20% and warm amber at 16%) that flicker on a 6.5s/4.2s ease-in-out scale-and-opacity keyframe, and a centred .menu card (min(100%,940px), linear-gradient #1c1a17 to #181613, 1px rgba(212,175,55,.34) border, a deep 90px black shadow plus a 120px gold bloom, inner hairline rules via ::before/::after at the top and bottom edges). The masthead centres a 78px gold double-ring monogram holding MV in small caps, then MAISON VERNIER at small-caps with 0.62em tracking, then a ui-monospace 0.42em uppercase subtitle. A gold gradient rule draws in with transform:scaleX(0) to 1 over 1.5s, with staggered delays on each of the four rules. Seven courses live in an ordered list; each .course-inner is a three-track grid (number column clamp(38px,4vw,54px), name column minmax(0,1fr), and a pairing column that animates from 0px to clamp(120px,17vw,190px) when .menu.wine is set). Each course row carries a ui-monospace gold-on-hover number, a Georgia 700 small-caps dish name at clamp(16px,2.05vw,23px) with 0.16em tracking that widens to 0.2em on hover, a flex-1 dotted gold leader (border-bottom dotted, nudged up .34em) ending in a 7px rotated gold diamond that swaps to a gold SVG tick when the course is ordered, and an italic Georgia description. Ingredients sit in a grid-template-rows 0fr to 1fr reveal — a gold left-bordered italic line listing components plus a monospace allergen note — triggered on :hover and :focus-within so it also works from the keyboard. Below the list, a second gold rule and an italic service note in which SERVICE COMPRIS is set in gold small caps, then a toolbar with a Wine pairing toggle (aria-pressed, gold fill when on) and a Clear order button, and a live line reading Selected N of 7 courses. Typography: display is Georgia small-caps letterspaced .62em; course names Georgia 700; descriptions and notes italic serif; numbers, labels and buttons ui-monospace. Motion: courses slide up from translate3d(0,1.1em,0) to 0 with per-row transition-delays (never opacity), rules draw left to right, the candle glows flicker and drift with the pointer via a transform on the wrapper, the wine column expands its grid track. Interaction: hover a course to expand its ingredients; click or press Enter/Space on a dish to toggle a gold tick and increment the order count; toggle the wine pairing column; click Clear order to reset every tick; move the pointer and the candle light leans toward it. Responsive from 360px to 1920px with a mobile layout that stacks the pairing under the dish, and a reduced-motion block that removes the transitions, the flicker and the pointer drift. All CSS inline in one <style>, all JS in one IIFE in one inline <script> at the end of body, system fonts only, zero external references, no createElementNS.

Original prompt · 065-sci-fi-airlock.txt

Build a single self-contained HTML page that is a science-fiction airlock entry terminal. Palette: hull #05080d, scan cyan #38e8ff, alert red #ff4d4d, granted mint #7df9c0, panel #1b2a44, ink #dff3ff. Layout: a full-height flex column — a top status bar (vessel MERIDIAN · AIRLOCK 03, DECK 7 · BAY C, pressure 101.3 kPa, monospace 0.3em tracked), a two-column stage (door zone minmax(0,1fr), control panel minmax(0,min(430px,46%))), and a footer log line with a Cycle airlock button that only appears once access is granted. The door zone holds a radial .light bloom (white core to mint to cyan, scaled to 0.16 and opacity 0 until granted), a .door with perspective:1400px, width clamp(170px,23vw,310px), aspect-ratio .74/1, split into two absolutely positioned .half panels with chamfered clip-path polygons that meet on a diagonal seam — left polygon(0 3%,3% 0,52% 0,48% 100%,3% 100%,0 97%), right the mirror — each with a dark navy gradient, an inset cyan hairline, repeating rib gradients and transform-origin on the seam edge; on .granted the left half translates -104% with rotateY(22deg) and the right +104% with rotateY(-22deg) over 1.5s, and the light scales to 1 and fades in. A circular window (clamp(104px,14.6vw,196px)) sits centred inside each half so the seam cuts it exactly in two when the doors open; it carries a rotating dashed ring, a cyan scan line sweeping top to bottom on a 2.9s keyframe, a reticle of four ticks plus a centre circle and a BIO-SCAN label. The right panel stacks: a status plate with a 3px accent bar, a plate head with a live clock, a system-ui 800 uppercase status line at clamp(21px,2.9vw,38px) with a coloured glow, and a sub-line; a four-slot code display whose slots fill with ● and whose next slot blinks; a 3x4 keypad of monospace keys (1-9, Clr, 0, Enter) with hover glow, press translate and focus rings; a hold-to-scan pad with a label, a percentage readout and a 4px progress track whose bar scales from 0 to 1 over 1.5s while held; and a row of eight LED bars on a staggered chase keyframe. Typography is ui-monospace throughout except the system-ui 800 status display. Motion: scan line sweep, dashed ring spin, LED chase, blinking caret, red shake on denial, perspective door split on grant. Interaction: hold the scan pad (pointer or Enter/Space) for 1.5s to complete the biometric handshake, then type any four digits and press Enter to open the hatch; pressing Enter before scanning or with fewer than four digits triggers a red shake, an ACCESS DENIED status and a logged reason; the Cycle airlock button resets to standby. WebAudio is created and resumed only inside the first user gesture, wrapped in try/catch, and plays a short blip per key, a two-tone confirm on scan, a rising three-note chord on grant and a low sawtooth buzz on denial. State machine is idle to ready to granted with an idle fallback on denial. All CSS in one inline <style>, all JS in one IIFE in one inline <script> at the end of body, system fonts only, zero external references, no createElementNS, responsive from 360px (stacked, door above panel) to 1920px, and prefers-reduced-motion disables the sweep, spin, chase, shake and door transition while keeping the full state machine and an immediately open door.

Original prompt · 066-sketchbook-ui.txt

Build a single self-contained HTML page that looks like an open spiral sketchbook lying on a dark desk. No external assets of any kind, one inline <style> in <head>, one inline <script> at the end of <body>. Palette: paper #f8f5ee, warm paper shade #efe9db, pencil #2b2b2b, sticky note #f4d35e, ink purple #9c89b8, green pen #5e8c61, desk #2b2f37. Typography: display "Segoe Print","Bradley Hand",cursive; body Georgia,"Times New Roman",serif; labels ui-monospace,SFMono-Regular,Menlo,Consolas. Layout: body is a flex-centred desk with a vignette and faint vertical grain; the book is a two-column CSS grid (1fr 1fr, gap clamp(10px,1.8vw,30px)) with perspective:1900px and a 0.4deg tilt, collapsing to one column below 720px. Left page carries a washi-tape strip, a monospace kicker, a cursive h1 with a wavy-underlined purple em, a pencil-colour swatch row plus a dashed "rub out" button, a hand-drawn wobbly-bordered canvas (border-radius 255px 16px 225px 16px / 16px 225px 16px 255px) and a monospace footer. Right page is ruled notebook paper built from repeating-linear-gradient rules plus a red margin rule, a hand-written checklist of five items (max-width 26ch), two draggable sticky notes with pin heads, and a page-flip button. Between the pages a vertical column of 14 wire rings (border 2.5px solid #b6ae9d with a gradient fill and inner highlight) forms the spiral binding. Margin doodles are hand-authored inline SVGs (star, spiral, arrow, flower, cloud) with fill:none, stroke #2b2b2b, opacity .5. The flip is a full-sheet 3D page turn: a sheet with transform-origin left centre and transform-style preserve-3d holds a blank ruled front face that sits invisibly beneath the live page content (z-index 7-9) and a back face rotated 180 degrees carrying page three, so pressing the button swings the sheet left over the left page exactly like a real page. Motion: the canvas doodle (graphite spiral, purple star, green wavy underline) is drawn point by point with per-point jitter when the page boots, with a frozen-clock fallback that inks the finished doodle synchronously if the frame clock never advances; sticky notes peel (scale via a --sc custom property) on hover and drag with pointer capture using --dx/--dy/--rot custom properties; the page corner curls via a ::after gradient triangle scaling to 1.34 and rotating -7deg on page hover; clicking a margin doodle replays a 0.62s wobble keyframe. Entrance reveals use transform:translateY with animation-fill-mode:backwards, never opacity. Respect prefers-reduced-motion by zeroing transitions and drawing the doodle instantly. Responsive 360px to 1920px.

Original prompt · 067-marble-gold-cards.txt

Build a single self-contained HTML page presenting three luxury pricing tiers as marble-and-gold cards. No external assets, one inline <style> in <head>, one inline <script> at the end of <body>. Palette: marble #f5f2ec, onyx surface #17171d, ink #1f1f24, gold #c9a227, deep gold #8a6d1c, bright gold #f2e3a8, vein grey #7a7f87, cream #e8e2d5. Typography: display Georgia,"Times New Roman",serif at weight 400 with wide letter-spacing (.06em on the h1, .36em on tier names); prices ui-monospace,SFMono-Regular,Menlo,Consolas; feature labels system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial at 10.5px, weight 500, uppercase, letter-spacing .2em. Layout: a max-width 1240px centred column on a near-black backdrop with a faint warm gold radial glow at the top and a cool grey one at the bottom, plus a fixed 3px repeating overlay for film grain. Header is centred: tracked caps eyebrow, huge Georgia h1 "The Quiet & Collection" with an italic gold ampersand, a 46ch lede, a marble/onyx segmented switch, then a gold hairline with a rotated diamond at its centre. Below, a three-column grid (repeat(3,minmax(0,1fr)), gap clamp(16px,2.1vw,30px)) of cards, the middle one lifted 12px and marked "Most chosen". Each card is a 1.5px padding box filled with a seven-stop gold-foil linear-gradient, wrapping a rounded inner surface that carries marble veining built from four soft linear-gradient bands at 116/97/72/154 degrees plus a bright top-right radial and a vertical surface-to-cream gradient. Inside each card: an embossed circular monogram (I/II/III) with an inner shine band, a letterspaced tier name, a one-line note, a large monospace price with a small gold currency mark, a gold diamond divider, a five-item uppercase feature list with gold diamond bullets and hairline rules, and a pill "Select tier" control. Motion: cards lift on hover with layered box-shadows; a masked white band travels across the gold edge via translateX(-140%) to translateX(140%) with mask-composite:exclude; a 20-degree shine band sweeps the monogram via translateX; a semi-transparent vein layer drifts and rotates slowly (transform only, no filter); a pointer-tracked radial sheen follows the cursor with soft-light blending; the check badge scales from 0 with a spring curve while its SVG check draws via stroke-dashoffset. Entrance reveals animate translateY only, using animation-fill-mode:backwards so hover transforms still win. Click or press Enter/Space on a card to select exactly one tier (gold outer ring + check badge + footer readout); the segmented control swaps CSS custom properties for a marble-to-onyx material change with a sliding thumb. Responsive: three columns collapse to one centred 460px column below 900px, and type/spacing use clamp(). Respect prefers-reduced-motion.

Original prompt · 068-loader-gallery.txt

Build a single self-contained HTML page that is a curated gallery of twelve loading animations. No external assets, one inline <style> in <head>, one inline <script> at the end of <body>. Palette: base #0d1117, panel #11161d, text #f8fafc, blue #58a6ff, pink #f472b6, green #34d399, hairlines rgba(248,250,252,.08). Typography: labels ui-monospace,SFMono-Regular,Menlo,Consolas at 11px with .2em tracking and uppercase; the header in system-ui,-apple-system,"Segoe UI",Roboto at font-weight 800, clamp(30px,5.4vw,68px), letter-spacing -.03em, with a thin 300-weight secondary phrase. Layout: max-width 1280px column. Header is a flex row (space-between, wrap) with an eyebrow, the display title "Twelve Ways to Wait", a 52ch lede, and a control panel holding a speed range input (0.25 to 3, step .05) with a live output, a "reduce motion" toggle and a "replay all" button. Below, a CSS grid of twelve tiles: repeat(4,minmax(0,1fr)) collapsing to 3 at 1080px, 2 at 820px and 1 at 520px, gap clamp(12px,1.5vw,20px). Each tile is a dark gradient card with a 1px hairline border, a top highlight line, an index number top-left, a speed flag chip top-right, a 74px loader stage centred, and a monospace label. The twelve loaders are: orbit (rotating arm with a glowing blue dot on a faint ring), pulse (pink core scaling inside an expanding fading ring), bars (four green bars scaling on Y with staggered delays), ring-dash (a conic-gradient arc masked to a 5px ring, spinning), dots-bounce (three dots translating up with eased stagger), wave (five gradient bars translating and scaling in a sine-like stagger), flip (a 44px card rotating 360 degrees on the Y axis with two backface-hidden faces, blue front and pink back), morph-square (a green square cycling border-radius 9px to 50 percent while rotating and scaling), pendulum (a rod with transform-origin at the top swinging plus or minus 40 degrees with a glowing bob), spiral (three counter-rotating arms at radii 27/18/9px, each with a coloured dot that counter-rotates to stay upright), comet (a masked conic tail fading over 300 degrees with a breathing bright head), petals (six radial petals that rotate to their own angle and scale outward with staggered delays). All motion is CSS keyframes on transform and opacity; the global speed is a --spd custom property on the grid consumed by every animation as animation-duration:calc(<base>s / var(--spd,1)) and animation-delay:calc(<base>s / var(--spd,1)). Footer shows the loader count and instructions. Entrance reveals animate translateY with animation-fill-mode:backwards. Respect prefers-reduced-motion by pausing all loader animations.

Original prompt · 069-cyber-map-ui.txt

Build a single self-contained HTML page that is a cyberpunk city map interface. No external assets, one inline <style> in <head>, one inline <script> at the end of <body>. Palette: map #04070d, cyan #38e8ff, pink #ff2d78, amber #ffd166, grid #122036. Typography: ui-monospace,SFMono-Regular,Menlo,Consolas everywhere, uppercase with wide tracking (.2em to .4em), tabular numerals for the coordinate readouts. Layout: a fixed full-bleed canvas map with a DOM overlay stack — a 318px left telemetry panel (kicker, "Night Watch" title, live cursor X/Y readout in large tabular numerals, zoom readout, a scrollable target list of six named waypoints with distance, and Trace / Reset view buttons), a bottom status bar offset to the right of the panel (blinking live dot, waypoint count, cursor coordinates, sector label, a live clock), a fixed radar element, a DOM marker layer, a vignette, a scanline and a film-grain overlay. The world is 2440x1220 units containing a hand-authored array of 38 city blocks, a park rectangle, a diagonal boulevard, a 60-unit street grid and a 300-unit avenue grid. The camera is {x,y,z} with a world-to-screen transform; the canvas is DPR-scaled with ctx.setTransform and the transform is recomputed only when dirty. The radar is a 600px DOM disc with repeating-radial rings, a conic-gradient sweep masked to the disc and rotated by a 5.4s CSS keyframe, plus a leading line; it pans and zooms with the map through a translate3d plus scale transform. Six markers are DOM buttons with two pulsing rings, a rotated diamond core, an always-visible monospace name tag and a hover-only coordinate tip. The route is a Catmull-Rom smoothed polyline through waypoint pairs, drawn as a dashed cyan ghost plus a traced pink line whose length is driven by a 0-to-1 progress value, with diamond nodes and a bright amber head. Motion: the radar sweep and leading line rotate continuously in CSS; the scanline falls with a CSS keyframe; marker rings pulse with staggered delays; the route draws progressively with an ease-out cubic over 1000ms; the camera tweens with ease-in-out cubic on target selection. Interaction: drag the map to pan, wheel to zoom around the cursor, click empty map to append a waypoint and re-trace the route, hover or focus a marker for its coordinates, click a marker or a panel target to fly to it and lock it in pink, Trace replays the route animation, Reset view returns home. Respect prefers-reduced-motion by making the trace and camera moves instant and hiding the scanline.

Original prompt · 070-watercolor-cursor.txt

Build a single self-contained HTML page that turns the pointer into a watercolor brush on wet paper. No external assets, one inline <style> in <head>, one inline <script> at the end of <body>. Palette: paper #fbf8f1, ultramarine #2c5f8a, vermilion #c8503c, ochre #d9a441, sap green #4a6b4f, ink #2b2a26. Typography: Georgia,"Times New Roman",serif for the title (clamp(24px,3.4vw,44px), italic blue em), ui-monospace,SFMono-Regular,Menlo,Consolas for all labels and the bloom counter at 10px with .22em tracking and uppercase, system-ui for body copy. Layout: a fixed full-bleed paper layer built from six stacked gradients — a white top-left light, an ochre corner wash, a green corner wash, and three very low-alpha repeating-linear-gradient fibre layers at 92, 4 and 133 degrees — plus a multiply-blended repeating micro-grain pseudo-element. Above it, a fixed full-bleed canvas with mix-blend-mode:multiply so pigment sinks into the paper. Above that, a soft-light sheen layer made of two large white radial gradients drifting slowly with a transform animation, then a vignette, then the UI: a serif title block top-left, a floating rounded palette bottom-left holding four circular pigment blobs (radial shading, inset shadows, a small blurred highlight) plus a CSS droplet water button and a Clear pill, and a monospace hint with a live bloom count bottom-right. Painting engine: pre-rendered 128px offscreen sprites — one soft radial fill per pigment with added granulation speckles drawn source-atop, one ring sprite per pigment for the wet edge, and one white sprite for water. Every pointer move stamps the pigment fill at a radius and alpha mapped from pointer velocity (fast equals larger and thinner, slow equals smaller and richer), plus three jittered satellite stamps and a wide low-alpha halo, then spawns an expanding bloom object. Blooms animate over about 950ms with an ease-out-cubic radius growth and a quadratic alpha decay, drawing a soft fill plus a ring for the characteristic wet edge. The canvas composites with globalCompositeOperation 'multiply' so overlapping pigments mix; the water brush uses 'destination-out' to dilute. Holding the pointer still spawns a slow creeping bloom every 220ms for up to 2.6 seconds. Everything is dirty-gated: the requestAnimationFrame loop only runs while blooms are alive or the pointer is resting, and the counter writes at most once every 220ms. Canvas is DPR-scaled with setTransform and preserves the painting across resizes by snapshotting to an offscreen canvas. Respect prefers-reduced-motion by disabling bloom animation so paint lands instantly.

Original prompt · 071-scroll-voyage.txt

Build a single-file, self-contained HTML artwork titled "Voyage 071 — Harbor to the Stars": a scroll-driven voyage where one continuous painted seascape morphs through six stages (Harbor, Open Sea, Storm, Calm, Sky, Stars) while text panels scroll over it. Structure: a fixed full-viewport canvas (position:fixed; inset:0; z-index:0) rendering the scene, a fixed radial vignette overlay, a 2px fixed top progress bar whose fill is scaleX(scrollProgress), a fixed monospace HUD top-left showing "071 — Voyage", the current stage name and a 2-digit percent, a fixed bottom-left "SCROLL" cue with a 46px hairline whose inner dot loops with a transform keyframe, and a fixed right-side vertical rail of six buttons (label + 22px tick) that grows the active tick to scaleX(1.75) in #f4a261. Below, a relative <main> holds six 100dvh <section class="panel"> blocks alternating left/right alignment, each with a translucent card (linear-gradient rgba(11,29,51,.80) → rgba(6,15,27,.58), 1px rgba(233,236,239,.15) border, backdrop-filter blur(7px), 2px #f4a261 left rule, deep drop shadow) containing a monospace eyebrow, an italic Georgia h2 at clamp(28px,4.6vw,54px), a body paragraph in #c9d6e3, and a monospace meta row. Palette: #0b1d33 night sea, #f4a261 dawn, #e76f51 storm, #2a9d8f calm, #e9ecef stars, #8ea6bd dim text. Type: system-ui body, Georgia italic display, ui-monospace labels. Canvas engine: DPR-scaled (canvas.width = cssW * devicePixelRatio, ctx.setTransform), overscanned by a 100px margin so a pointer-driven scene rotation never exposes edges. Six stage parameter sets (sky top/mid/horizon colors, sea colors, wave amplitude, wave speed, star density, sun x/y/radius/alpha/color, haze, rain) are hex-parsed once and linearly interpolated by a continuously smoothed scroll value sceneT = progress * 5, eased at 0.085 per frame. Drawing order: sky linear gradient + horizon haze band + sun radial glow + sun disc, twinkling star field (280 pre-seeded stars, thresholded by star density), sea gradient with sun shimmer bars, four perspective sine-wave layers each filled from its crest down to the canvas bottom with a crest highlight stroke, a bobbing sailboat (quadratic hull, mast, two sails, elliptical reflection) that drifts right as progress advances, and slanted rain streaks plus an occasional lightning flash when storm intensity is high. Motion: scroll drives every morph, the boat bobs and rolls, waves scroll, stars twinkle, storm shakes the scene by ±2.4px and bolts flash; all motion is disabled under prefers-reduced-motion (no rAF loop, redraw on scroll only, no bob, no twinkle, no shake). Interaction: scroll is the engine; hovering or focusing a rail button previews that stage by easing the scene to it; clicking a rail button smooth-scrolls to that chapter; pointer x tilts the whole horizon by up to 0.021 rad with easing. Cards reveal via transform translateY(38px) → 0 with an IntersectionObserver — never via opacity — so a frozen-clock render shows the complete page. All JS in one IIFE in a single inline <script> at the end of body, no external references, the substring "http" absent everywhere.

Original prompt · 072-clock-face-museum.txt

Build a single-file, self-contained HTML page titled "The Horological Room — Six Live Clock Faces in a Museum Gallery": a museum wall of six framed analog clocks, all running on real time, each designed in a different decade's design language. Palette: #f2efe9 wall, #1b1b1b ink, #c9a227 brass, #8c1c13 accent red, #4a5568 slate. Typography: Georgia small-caps wall labels, system-ui 700 header, ui-monospace kickers and controls. Structure: a fixed top-right control cluster (a pill segmented control with TICK / SWEEP and a LIGHTS toggle with a glowing brass dot), a centered museum plaque header (mono kicker "The Horological Room · Room VI", system-ui 700 uppercase h1 "Six faces, all running" with the last two words in red italic Georgia, a serif sub-paragraph, hairline rules above and below), then a responsive CSS grid of six figures — 3 columns above 1000px, 2 columns to 600px, 1 column below — each figure a brass-bordered frame (3px #c9a227, cream mat gradient, layered box-shadow) holding a round clock, plus a wall label (Georgia small-caps name and year over a mono caption). The six faces, all built from divs and transforms with no SVG: Bauhaus (radial-gradient dial with a thick black outer band, 12 bars with the quarter marks red, black hour and minute bars, red second hand), Art Deco (repeating-conic-gradient brass sunburst over a dark centre, 12 counter-rotated Georgia numerals, gilt hands with counterweight tails), Minimal (hairline ring, four slate marks, one brass dot at twelve, hairline hands, no numerals), Skeleton (wide rim, three spinning repeating-conic-gradient gears visible through the open dial, brass second hand), Railway (bold Arabic numerals in Arial Narrow, a 60-tick minute track with a red 12, black spade hands, red second hand with a tail), Brutalist (concrete-grey dial with a thick black rim, 12 heavy black blocks, four oversized 900-weight numerals, square-capped black bars). Every dial is drawn with proportional radial-gradient rings and every mark is a full-inset span rotated about the dial centre, so nothing depends on px measurements. Hands are absolutely positioned spans at left:50%, bottom:50%, transform-origin 50% 100%, animated by transform: translateX(-50%) rotate(deg) from real Date values: tick mode snaps the second hand to whole seconds and steps the minute hand 0.1deg per second, sweep mode interpolates milliseconds. Hovering a frame lifts it 8px and scales it 1.032 with a brass glow and a screen-blended spotlight overlay; a cast shadow drifts under each frame with a slow alternate transform keyframe. Clicking a frame opens a full-screen viewer that rebuilds the same clock at large scale in an overlay with a plaque (case number, name and year, description, spec line), closable by the close button, backdrop click, or Escape, with focus restored afterwards. A LIGHTS toggle dims the wall with a fixed #0d0c0a overlay. All JS in one IIFE in a single inline <script> at the end of body; every null guarded; no external references; the substring "http" absent everywhere.

Original prompt · 073-neon-grid-landing.txt

Build a single-file, self-contained HTML landing page titled "NEON DRIFT — Enter the Grid" for a fictional racing game. Palette: #08060f night, #ff2d78 pink, #00e5ff cyan, #ffd400 yellow, #7c4dff violet. Typography: display system-ui 900 italic uppercase at clamp(52px,14.5vw,210px) with layered neon text-shadow, body system-ui, all labels ui-monospace with heavy tracking. Structure: a fixed full-viewport canvas behind everything; a fixed scanline overlay (repeating-linear-gradient at 3.5% white) and a fixed vignette; a nav bar with a glowing mono wordmark "ND//07" and three tracked links; a 100dvh hero anchored to the bottom with a mono kicker "Season 07 · Grid open", the huge headline "NEON / DRIFT" with a thin 200-weight wide-tracked sub-line "Run the light" in yellow, a body paragraph, a floating PLAY button and a mono hint; a full-width marquee ticker of mono stats duplicated once for a seamless translateX loop; two feature cards ("Drift Mode", "Photon Rush") in a 2-column grid collapsing to 1, each with a mono kicker, italic 800 title with a pink em, body copy, a three-item stat row and a gradient underline that scales in on hover; and a footer bar with three mono links. Canvas engine: DPR-scaled full-viewport canvas drawing a perspective floor grid — vertical lines as straight segments from the vanishing point to the z-near point (screen x = cx + focal*xw/z), horizontal lines at z = zStart * ratio^(k + frac) with frac decreasing over time so lines rush toward the viewer, all stroked with globalCompositeOperation 'lighter'; a vertical background gradient; a large radial horizon glow in pink/violet/cyan; a bright cyan-to-pink horizon line; and a pointer-tracked radial light source with a small white core. The vanishing point leans toward the pointer by 7% of its offset, and a pointer light is drawn additively over the grid. Scroll velocity (|deltaY| accumulated and decayed at 0.94 per frame) accelerates the grid; the PLAY click pushes the velocity to maximum for a burst. Headline glows and flickers once on load using a steps(1,end) text-shadow-only keyframe (text is always fully visible), the CTA pulses with a box-shadow keyframe plus a scaling ring pseudo-element, and hovering or focusing any link spawns a short-lived span that sweeps a cyan-to-pink gradient across it via transform. PLAY also triggers a white-to-pink radial flash overlay and a short WebAudio square-wave blip created inside a try/catch on the user gesture. Everything respects prefers-reduced-motion: no rAF loop (single static draw), no marquee, no trails, no flicker, no blip flash. All JS in one IIFE in a single inline <script> at the end of body; no external references; the substring "http" absent everywhere.

Original prompt · 074-risograph-poster.txt

Build a single-file, self-contained HTML page titled "Paper Frequencies — Risograph Zine Fair Poster": a print poster rendered in the browser with authentic risograph behaviour — two-ink overprint, halftone dots, misregistration, paper texture and crop marks. Palette: #f6f1e6 paper, #ff48b0 fluoro pink, #0078bf riso blue, #1a1a1a ink, #ffd400 accent. Typography: display system-ui 900 uppercase at clamp(38px,8.4vw,72px) with -.05em tracking and .86 line-height; body ui-monospace; heavy stencil feel. Structure: a warm grey desk background (#c7c0ae) with a fine woven noise built from two 1px repeating-linear-gradients plus a soft top light and a fixed vignette; a centred tilt wrapper containing an A-series poster (width min(92vw,650px), aspect-ratio 1/1.414, display:flex column, isolation:isolate) with paper background, deep drop shadow, and padding; inside the poster, two full-bleed ink layers and a procedural illustration. Ink layer A is a radial-gradient dot grid (11px pitch) in the current ink A colour masked by a 196deg linear gradient so it floods the top-left and fades out; ink layer B is a finer 7px dot grid in ink B masked by a radial gradient centred at 88% 8%. Both use mix-blend-mode: multiply so overlaps darken into a third colour, and both drift on a long alternating transform keyframe. The illustration is three elements: a halftone disc (radial-gradient dots, with a second finer blue dot layer masked to fade downward), a conic-gradient ring masked to an annulus, and a rotated repeating-linear-gradient band — all multiplied. Content sits above in a multiply-blended layer: a mono header row with a flex-grown hairline, the huge title "PAPER FREQUENCIES" with "FRE" in fluoro pink carrying a 2px blue offset shadow (simulated misregistration), a mono deck paragraph, a two-column definition list of date / venue / entry above a 2px rule, an imprint footer with two mono credit lines and a barcode built from 18 spans of varying widths, plus four corner crop marks, a registration target and a hidden roller element. Hovering the poster offsets the two ink layers in opposite directions by 3-4px to misregister the print. Clicking the poster (without dragging) cycles through four ink pairings by rewriting --a / --b / --c custom properties and fires a short scale kick. Dragging tilts the whole poster with perspective(1500px) rotateX/rotateY clamped to ±13/15 degrees and eases back to flat on release; touch-action is none so touch drag works. The PRINT button (and an automatic run 320ms after load) sweeps a skewed multiply-blended gradient roller across the poster via a transform keyframe while both ink layers nudge and settle, so the content is never hidden. All motion is disabled under prefers-reduced-motion, including the automatic roller run. All JS in one IIFE in a single inline <script> at the end of body; no external references; the substring "http" absent everywhere.

Original prompt · 075-cosmic-odyssey.txt

Build a single-file, self-contained HTML page titled "Cosmic Odyssey — Drifting Through the Nebula": a grand, quiet full-viewport cosmic scene. Palette: #05030f space, #6d28d9 nebula violet, #f472b6 pink gas, #38bdf8 atmosphere, #fde68a star. Typography: title system-ui 200 uppercase wide-tracked (letter-spacing .42em), readouts ui-monospace with tabular numerals, log lines Georgia italic. Structure: a fixed full-viewport canvas at z-index 2 for stars and shooting stars; a fixed scene layer at z-index 1 holding five nebula clouds and the planet; and a scrolling <main> with a 100dvh hero and a second 100dvh panel. Nebula clouds are absolutely positioned vmax-sized circles filled with soft radial-gradients (violet at 55% alpha, pink at 44%, a violet floor cloud, a cyan veil near the planet, a small pink wisp) with zero filter — all softness comes from gradient stops — each animated on its own long alternating transform keyframe (54s to 92s) that drifts and breathes the cloud. The planet is a 104vmin circle anchored off the bottom-right corner: a radial-gradient body lit from the upper left, an inset box-shadow pair for the terminator falloff, a repeating-linear-gradient band layer that slowly translates to suggest rotation, a linear-gradient terminator that rotates ±6deg on a 72s loop, and an outer atmosphere ring drawn as a radial-gradient on an element inset -3.5% so the cyan halo hugs the limb. A tiny station silhouette sits on the limb: two 1px truss lines, a small bordered hub, a ring, and a 3px beacon that blinks with a steps(1,end) keyframe. Canvas engine: DPR-scaled, additive ('lighter') compositing, 340 pre-seeded stars with per-star depth, radius, alpha, twinkle speed and one of four colours, drawn with a pointer-driven parallax offset scaled by depth and a scroll-driven zoom about the screen centre; shooting stars are objects with position, velocity, life and trail length, drawn as a linear gradient stroke (white to #fde68a to transparent cyan) plus a bright head dot, spawned randomly every 3.4-7.6 seconds and on every pointerdown at the pointer position. A monospace distance readout counts up continuously from 1,284,902 km with thin-space thousands separators, gated so the DOM is only touched when the integer changes; a velocity line oscillates and is likewise gated. Pointer movement parallaxes the nebula (-30px), the planet (+16px) and the title (+7px) at different rates with easing, and scrolls drive a depth value that scales the nebula 1.5x and the planet 1.24x while fading the title out (opacity is 1 at scroll 0, so a frozen render shows the whole page). The wheel event thickens or thins the nebula by rewriting a --density custom property, clamped between 0.25 and 1.7, and moves a small meter bar. All transforms are cached and only written when the value changes. Everything is frozen under prefers-reduced-motion. All JS in one IIFE in a single inline <script> at the end of body; no external references; the substring "http" absent everywhere.

Original prompt · 076-type-scale-tool.txt

Build a single-file, dependency-free "modular type scale" designer tool on paper-white #faf9f6 with ink #111111, accent #2563eb, meta grey #9ca3af and hairline rules #e5e7eb. Two-column studio layout inside a 1460px max-width wrap: a sticky left control column (ratio chips 1.125 / 1.25 / 1.333 / 1.5 / 1.618 with ratio names beneath, a base-size range slider 12-24px with a tabular-numeral output readout, a three-way specimen-face segmented toggle Grotesk / Serif / Mono, and a baseline-grid switch) and a right specimen ladder listing eight steps — caption, body-s, body, lead, h3, h2, h1, display — computed as base x ratio^n. Every ladder row shows the step name plus px, rem, line-height and tracking hints in ui-monospace uppercase micro-type with tabular numerals, then the live specimen line (system-ui grotesk by default, Georgia or ui-monospace on toggle) whose font-size, line-height and letter-spacing are written inline by JS. Line-height eases from 1.75 at 12px down to 1.05 at display sizes; tracking runs from +0.04em on small type to -0.03em on display. Changing a ratio runs a FLIP pass: measure each specimen's rect, write new sizes, measure again, then Web-Animate each inline-block specimen from translate(dx,dy) scale(old/new) back to identity with a 560ms cubic-bezier(.22,.8,.2,1) ease. Numeric labels count up through a single shared rAF tween list. A repeating-linear-gradient baseline grid (1px line every 8px at rgba(37,99,235,.16)) overlays the ladder and fades in from 16% to 50% opacity. Clicking or pressing Enter on a row opens a full-screen paper modal with the specimen at clamp(40px,min(19vw,15rem),15rem) plus a five-column meta strip (size, rem, line-height, tracking, ratio). Arrow Left/Right cycles ratios, Arrow Up/Down nudges the base size, Escape or Enter closes the modal. Mobile below 880px stacks the controls into a two-column grid above the ladder. Respect prefers-reduced-motion by disabling reveals, FLIP and the counter tween.

Original prompt · 077-pixel-art-studio.txt

Build a single-file pixel-art editor on a deep ink ground #1a1c2c with panel #22263c, hairline #313752, dim label #6f7a9c, and the classic 16-colour pixel palette led by #ef7d57 orange, #38b764 green, #41a6f6 blue, #f4f4f4 paper and #1a1c2c ink. Three-column studio grid (76px tool rail, flexible centre board, 246px right sidebar) with a faint CRT scanline overlay via repeating-linear-gradient at 2.2% white and two soft radial glows. The rail holds six square SVG-icon buttons — pencil, eraser, flood fill, eyedropper, undo, redo — each with a tiny corner keycap letter, an orange active fill and a protruding 3px accent tab; hover lifts by 2px. The centre shows a Pixel Studio headline, a legend readout, and a checkerboard board sized min(100%, 32px × zoom) with aspect-ratio 1; the canvas inside is DPR-scaled (canvas.width = cssW × devicePixelRatio, ctx.setTransform) but drawn from a 32×32 offscreen buffer with imageSmoothingEnabled=false and image-rendering:pixelated so pixels stay razor sharp. Rendering is a dirty-gated rAF loop: art lives in one Uint8ClampedArray of RGBA bytes, copied into an ImageData and blitted up each frame; faint 1px grid lines appear above 8px cells; painted pixels fire a short white expanding square "pop" ring; the hovered cell gets a blue crosshair and outline, and the keyboard cursor gets an orange outline. A status bar underneath carries position, painted-pixel count, undo depth, a zoom stepper (6/8/10/12/14/16 px cells) and a clear button. The sidebar shows a 16-swatch grid plus a native colour input, and live 1× (32px) and 3× (96px) previews of the sprite. Undo is a stack of 60 full-buffer snapshots; undo/redo slide the canvas 7px on the X axis. Tools: pencil paints with Bresenham interpolation across drag, eraser clears alpha, flood fill is a stack-based 4-neighbour BFS comparing packed Uint32 pixel words, eyedropper reads the pixel under the cursor. Right-click or Shift erases, arrow keys move the cursor, Space/Enter paints, P/E/F/G pick tools, U/Y and Ctrl+Z/Ctrl+Shift+Z handle history. Below 940px the rail becomes a horizontal icon strip and the sidebar wraps beneath the board.

Original prompt · 078-kite-festival.txt

Build a single-file, full-viewport canvas scene of a kite festival on a breezy spring afternoon. Palette: sky #bfe3f2 deepening to #a6d8ee at the top with a warm sun bloom, kites in #ff6b6b red, #ffd166 yellow and #6ee7b7 mint, hill #2f4858 with a pale distant ridge #9dc3d2, figures in near-black #12212b. Six diamond kites at different depths fly on strings anchored to the raised hands of tiny silhouetted figures standing on the ridge. Sky is a cached canvas linear-gradient plus a radial sun glow; two hills are sine-curve ridges filled with a 6px-step path; clouds are four-blob white circles at 26-60% alpha drifting right and wrapping. Each kite is driven by a layered-sine value noise (three harmonics) feeding a spring: velocity integrates toward a noise-driven target with per-kite amplitude, phase and speed, damped with Math.pow(0.055, dt) so motion is smooth and frame-rate independent. Strings are quadratic beziers whose control point sags downward by up to 150px scaled inversely with wind. Tails are eleven chained points that lag behind the kite with a per-segment lerp, plus a sine curl term and gravity, drawn as a thin curve with alternating small diamond bows in the kite palette. A gust system fires random gusts every 3-9 seconds and decays them exponentially, modulating kite amplitude, cloud drift, string sag and banner flap speed. The top banner is DOM: an SVG catenary rope, seventeen clip-path pennant triangles on a parabolic sag, each flapping with a per-index animation delay, and the title KITE FESTIVAL split into per-letter spans that flap independently, all sharing a --wdur duration set from the wind value. Bottom-left glass HUD: wind label, a gradient gauge bar, a range slider and a big tabular percent readout. Interactions: drag a kite to steer it with pointer capture and velocity tracking, click to make it fly a double loop, double-click to release it so it drifts off, fades and respawns; the wind slider (or arrow keys) changes gust strength. prefers-reduced-motion damps noise amplitude and slows cloud drift; DPR-scaled canvas refits on resize and orientation change.

Original prompt · 079-liquid-hover-gallery.txt

Build a single-file, dependency-free liquid-distortion hover gallery on a near-black base #0a0a0f with six gradient panels — #ff5c8a with #a78bfa, #38bdf8 with #34d399, #fde047 with #fb923c, #34d399 with #38bdf8, #a78bfa with #ff5c8a, #fb923c with #fde047 — arranged in a 3x2 CSS grid that reflows to 2 columns below 900px and 1 column below 560px, sized so the grid fills the viewport height between a header and a footer. Each panel is an article with tabindex and role=button containing four layers: a .fill carrying two offset radial gradients plus a linear gradient and an inner vignette, a small soft .blob highlight, a .shine sweep animated with a slow translate3d shimmer, an index number and a bottom label whose title is split into per-letter spans. A pointermove listener on the window feeds a smoothed pointer position (lerped at 26/s) and every panel runs a critically-tuned spring — stiffness 62, damping Math.pow(0.0016, dt) — toward a target computed from the distance between the pointer and the panel centre: translate up to 11% of the pointer offset, scale up to 1.075, rotate up to 0.07 rad, all weighted by the square of a linear falloff so only panels near the cursor move. The blob follows at half the offset with a small animated blur(0-14px) filter, kept to six small elements. Per-letter title jitter uses cached letter rects and a 300px falloff, lifting letters up to 11px with a slow sine phase. Clicking a panel clones it into a fixed full-viewport overlay, FLIP-animates from the measured grid rect with a 640ms cubic-bezier(.22,.8,.2,1) scale/translate, and hides the original with visibility (no reflow); Escape or a click reverses the FLIP and removes the clone. The render loop is dirty-gated: it stops once every spring is below 0.6 velocity and the pointer has been still for 900ms, and it never runs while a panel is open. Entrance state is composed so a frozen-clock render shows the fully warped grid: at boot the springs are seeded directly at their target values for a centred pointer. prefers-reduced-motion disables the shimmer sweep and the FLIP animations.

Original prompt · 080-vinyl-dj-deck.txt

Build a single-file skeuomorphic DJ deck on a warm wood ground #14100d with platter #d9d4c8, vinyl #1b1b1b, brass #c9a227 and a red record light #ef4444. A 1180px deck slab with a brass hairline inner frame holds a two-column body: platter left, controls right. The platter is a radial-gradient aluminium disc with a heavy drop shadow; inside it a circular record carries a repeating-radial-gradient of 1px groove rings layered over a conic-gradient of nine dark stops so the grooves shimmer as the disc turns, plus a brass-ringed label reading MG-01 / 33 1/3 and a chrome spindle. A 47-radius SVG ring around the platter is the groove readout: stroke-dasharray 295.3 with the offset driven by playback progress. A tonearm pivots from a 1px invisible marker at the platter's top-right: a 0-height div with transform-origin right center rotated by a CSS custom property, carrying a brushed shaft, a dark headshell and a counterweight; it eases to a progress-derived angle while playing and parks at -36deg when stopped. The right column holds an amber LCD display (track, position, rate, and a cached waveform bitmap with a red playhead), PLAY/STOP buttons, a horizontal pitch fader with a brass cap, and four one-shot pads. Audio is fully synthesised: a 2-second 120 BPM loop is rendered sample by sample into a Float32Array at boot (sine kick with a 150-to-45 Hz pitch envelope, noise hats and snare through a one-pole highpass, and a bass line of eight notes with a naive saw through a one-pole lowpass), soft-clipped with tanh, then copied into an AudioBuffer when the AudioContext is created inside the first user gesture and wrapped in try/catch. A second buffer of 820 randomly placed crackle impulses loops through a highpass at 1.5 kHz. The music source's playbackRate follows a smoothed rate value that eases toward the pitch target, so STOP produces a real spin-down pitch bend. Dragging the record with pointer capture computes angular velocity, writes the record angle directly, maps it to playbackRate (clamped to ±3.5x), advances the loop position by degrees, and lifts the crackle gain while ducking the music — a genuine scratch brake and stutter. Dragging the tonearm seeks: the pointer angle around the pivot maps to progress, and on release the buffer source is recreated at the new offset. Pads fire short oscillator/noise one-shots (kick, hat, bass, minor-triad stab) with exponential gain envelopes. Space toggles play, keys 1-4 fire pads. prefers-reduced-motion stops the LED pulse and CSS transitions.

Original prompt · 081-breathing-guide.txt

Build a single self-contained HTML breathing guide on a deep-calm ground (#0f1720) with no external assets of any kind and no occurrence of the substring "http" anywhere in the file. Center a large circular orb (clamp 232px–424px) with a conic progress ring around it, a wide-tracked system-ui 300 phase word inside (INHALE / HOLD / EXHALE), a ui-monospace countdown below it in the phase colour, and a session timer (mm:ss, tabular nums) in the top-right HUD opposite a small tracked mono brand mark. Below the orb place a mono hint line, a pill row of pattern selectors (4·4·6, Box 4·4·4·4, 4·7·8) and a Begin/Pause pill, then a Georgia italic note in muted #e2e8f0 at 46% opacity. Behind everything, three huge soft radial-gradient glows — sky #7dd3fc, violet #c4b5fd, blush #fbcfe8 — cross-fade so the background hue follows the breath phase (1.7s ease transitions). Twenty-two tiny particles orbit the orb and breathe outward with it. Motion: a rAF phase state machine (each phase carries name, seconds, target scale 1.34 inhale/hold, 0.80 exhale) with spring-smoothed orb scale via scale += (target-scale)*(1-exp(-dt/165)); a conic-gradient ring masked to a 4px annulus tracks per-phase progress with a glowing head dot; particle radius follows the orb radius. Interaction: space toggles run/pause, the orb is a clickable button that restarts the cycle, pattern pills swap the phase list, hovering the orb swaps the hint to "PHASE · n seconds". Respect prefers-reduced-motion by halving the scale amplitude, freezing particle drift and disabling the sheen spin. All CSS in one inline style block, all JS in one IIFE at the end of body.

Original prompt · 082-letterpress-invitation.txt

Hand-build a single self-contained HTML page that reads as a physical letterpress wedding invitation, with no external assets and no occurrence of the substring "http" anywhere. Ground: warm cotton paper #f7f4ec with two soft radial lights and a fine repeating-linear-gradient paper fibre texture, plus a ui-monospace masthead row ("No. 082 — Letterpress" / "Cotton 600gsm · Foil &amp; Wax") in #8c8577. Centre a closed envelope (clamp 276px–540px wide, aspect-ratio 1.52) built from four stacked layers inside a perspective:1500px preserve-3d wrapper: a cotton back panel, an invitation card (inset 6%/8%), an envelope front clipped with polygon(0 0, 50% 42%, 100% 0, 100% 100%, 0 100%), and a top flap (height 58%) whose face is clipped polygon(0 0, 100% 0, 50% 100%) with transform-origin 50% 0. A wax seal (#7c3a2d radial gradients, 1px inner ring, Georgia monogram "A") sits at the flap tip. Clicking the envelope rotates the flap to rotateX(-180deg) over .95s cubic-bezier(.5,0,.2,1) while the card translates translateY(-58%) scale(1.015) over 1.05s to slide out and settle. Card typography: foil-gradient monogram "A&amp;R" via background-clip:text with background-position tied to a --mx variable, an inline-SVG botanical rule with hover-rotating leaves, a tracked system-ui 500 kicker, italic Georgia names with a dual letterpress text-shadow (0 1px 0 white over 0 -1px 1px ink), small-caps Georgia date lines, and a ui-monospace wax-red RSVP line. Pointer movement over the room tilts the envelope (rotateX/rotateY via --rx/--ry, damped 12deg/9deg) and moves a radial gloss across the card, so the emboss and foil catch the light. Seal presses on load with a scale/rotate keyframe and an expanding ring. Respect prefers-reduced-motion by disabling the seal animation and shortening transitions. All CSS in one inline style block, all JS in one IIFE at the end of body.

Original prompt · 083-radar-scope.txt

Hand-author one self-contained HTML file (no external assets, no occurrence of the substring "http") that renders a cold-war sonar operator console. Ground: near-black green #04100a with a phosphor #39ff88 / mint #0affc3 / amber #ffb000 palette, a fixed CRT overlay of repeating horizontal scanlines plus a heavy vignette, and ui-monospace type everywhere. Layout: a tracked-caps header row (Sonar Array SECTOR 7 · Passive / Uptime T+00:00:00), a two-column deck, and a tracked-caps status footer (Sweep 12 rpm / Filter ALL / Contacts n / local clock). Left column: a square scope (max 62vmin, centred) whose outer ring carries eight counter-rotated bearing labels (000…315) placed by rotate(var(--a)) boxes, with the circular screen inset 7% and clipped by overflow:hidden. The screen stacks a CSS conic-gradient sweep layer (transparent for 180deg, ramping to 0.72 alpha at the leading edge) rotated by a --sw custom property, a DPR-scaled canvas (canvas.width = cssW * devicePixelRatio, ctx.setTransform) that draws four range rings, 24 bearing spokes, a crosshair, pulsing ring highlights, phosphor noise specks that scale with gain, and the contact blips as radial-gradient glows with a hard 1.8px core; plus a glass highlight overlay. Right column: a bordered panel with an oversized tabular-nums bearing readout (clamp 38px–74px), range/ID line, strength meter, a live contact list, a range input and a draggable gain knob. Contacts are a 12-slot array (id, bearing, drift, km, strength, kind, ttl) with phosphor decay brightness exp(-angleSinceSweep/62), polar-to-cartesian mapping x = cx + sin(b)*r, y = cy - cos(b)*r, slot reuse on ttl expiry and DOM rows re-sorted by bearing every 2.2s. Interaction: hover a contact row highlights its blip, click a blip or row locks it (amber crosshair, readout updates), F or 1-4 cycles ALL/NEAR/FAR/STRONG filters, the range slider rescales the scope, the knob drags vertically to change gain, arrows nudge gain, Escape clears the lock. Respect prefers-reduced-motion by halving sweep speed.

Original prompt · 084-constellation-maker.txt

Hand-author one self-contained HTML page (no external assets, no occurrence of the substring "http") that turns the viewport into a night sky you can draw on. Ground: fixed full-screen sky (#050810) layered with two soft radial glows and a rotated, blurred milky-way band, plus 74 CSS-only dust specks with staggered twinkle animations generated once via an innerHTML string. A fixed glass panel (rgba(30,41,59,.72) + backdrop-filter blur, 14px radius, 1px #94a3b8/18 border) sits top-right with the title "Constellation Maker", a tracked mono subtitle, a text input and a cyan Save button, a "Named figures" list, and a footer showing how many stars are placed. The sky itself holds an absolutely-positioned star layer and an SVG link layer (viewBox 0 0 100 100, preserveAspectRatio none, all strokes vector-effect non-scaling-stroke) with an edges group rebuilt by assigning an innerHTML string and a static dashed temp line used during dragging. Clicking empty sky drops a star: a 30px transparent hit box with a radial-gradient core whose size, twinkle duration and delay are inline custom properties; stars twinkle between scale .7/.6 and scale 1.14/1.0. Dragging from one star to another draws an edge as two paths — a 5px translucent glow and a 1.15px bright line in #7dd3fc — animated in with stroke-dashoffset from 12000 to 0 (a dash far longer than any on-screen line, so the visible stroke stays solid under non-scaling-stroke) over .75s cubic-bezier. Typing a name and pressing Enter or Save assigns every unassigned star and its edges to a new group, turns them amber #fde68a, and adds a list entry with a 38px auto-normalised SVG glyph that rotates 360deg over 48s. Clicking a list entry highlights that figure (its stars scale to 1.4 with an amber halo, its lines turn amber, everything else drops to .26 opacity); Escape or a second click clears it. Double-clicking a star removes it and its edges. Respect prefers-reduced-motion by stopping the glyph rotation, star scaling and edge draw animation. All CSS in one inline style block, all JS in one IIFE at the end of body, state is session-only.

Original prompt · 085-museum-exhibit.txt

Hand-author one self-contained HTML page (no external assets, no occurrence of the substring "http") that reads as the exhibition page of a small design museum. Ground: warm gallery wall #f4f1ea with ink #1d1d1f, brass #b08d57, grey #6b7280 and a deep red accent #8c1c13. Type: Georgia 400 for display (hero title clamp 38px–112px with an italic brass "Useful"), system-ui 500 uppercase letterspaced labels, ui-monospace captions. Structure top to bottom: a fixed frosted top bar with the institution name and a "Plan your visit" pill that scrolls to the footer; a hero with kicker, two-line title, a serif lede, a brass hairline and a mono meta row; a decade timeline rail (1px track, brass fill that scales in on reveal, six circular nodes that act as decade filters); a collection section with a filter row of pills and a responsive auto-fill card grid; a spotlight section pairing a canvas armillary sphere on a clipped trapezoid plinth with curatorial copy and a "drag the object to turn it" hint; and a four-column visiting footer with a fine-print line. Each of the six exhibit cards carries a CSS-drawn catalogue plate: a 4:5 gradient field with a hairline inner frame, a paper-fibre overlay, a mono plate number, and one of six geometric forms (stacked bars, a masked conic arc, a ringed disc, a modular grid, a clipped triangle, a scattered dot field) in a per-card --f colour. Cards lift 9px on hover and a brass underline scales in from the left. Clicking a card opens a dialog sheet that clones the plate's palette and form, shows the title, category, caption, a paragraph of curatorial text and a provenance line, and closes on Escape, backdrop click or the round close button. The armillary canvas is DPR-scaled (canvas.width = cssW * devicePixelRatio, ctx.setTransform) and draws three 48-segment brass rings, six node studs and a shaded core sphere with a perspective projection (p = 1/(1 + z*0.34)), per-segment alpha and width derived from depth; it auto-rotates slowly and can be dragged to spin with inertia. Reveals use IntersectionObserver and move elements with translateY only, never opacity. Respect prefers-reduced-motion by stopping auto-rotation, shortening reveals and using instant scroll.

Original prompt · 086-candy-pastel-cards.txt

Build a single self-contained HTML page: a candy pastel card deck on a #fff1f5 ground. Background is a fixed layer of four soft radial blooms (#ffb3c6 pink, #b8e0ff blue, #d6f5c8 mint, #ffe08a lemon) at ~50% alpha in the page corners. Centered column, max-width 860px: a ui-monospace uppercase kicker "confections · deck 06" at 11px/.36em tracking in #b3788f; an 800-weight display title "Candy Deck" at clamp(34px,7.4vw,62px), letter-spacing -.035em, filled with a 102deg gradient (#ff8fb1 → #d3a4ff → #7ec8ff → #8ed9ab) via background-clip:text; a two-line 15px #836072 subtitle; then a 300–410px-tall stage containing a perspective:1200px deck of five absolutely positioned cards, width clamp(146px,37vw,204px), aspect-ratio 3/4, rounded 22px, each with a radial-gradient face (white → var(--c1) → var(--c2) per flavor), an inner glossy .shine radial highlight, a 54%-wide spherical candy orb with inset light/shadow, a Georgia flavor name and a monospace "no. 0X" tag. Card backs are a white→#ffe6ef gradient with repeating-radial ring texture, the flavor blurb in Georgia, and a kcal line under a hairline rule. Flavor colors: Strawberry #ffb3c6/#ff6f96, Blueberry #b8e0ff/#6fb4e8, Mint #d6f5c8/#9fd98a, Lemon #ffe08a/#f5c14e, Taro #e4d4ff/#b79aef. Below the stage an italic Georgia flavor read-out, then a centered bar with a pill Shuffle button (white→#ffd9e5 gradient, #8a2b4d uppercase 12.5px, 999px radius, layered pink shadow) and a monospace counter "N in deck"; a final monospace hint line. Motion: the deck bobs 9px on a 7s ease-in-out loop; cards sit in a tight rotated stack and fan out on stage hover (spread = min(110, (stageW - cardW)/4), rotate 6.4deg per step, slight arc lift); Shuffle scatters every live card to a random radius/rotation with transitions off, reshuffles the order array, then springs them back with 46ms per-card stagger on cubic-bezier(.2,1.32,.34,1); clicking a card flips its preserve-3d inner 180deg to reveal the back; dragging past ~130px throws the card off-screen and out of the deck. Use only one inline style block and one inline script at the end of body, system font stacks, no external resources, no createElementNS.

Original prompt · 087-terminal-portfolio.txt

Build a single self-contained HTML page: a full-viewport terminal emulator styled as a real desktop window, on a #06080c page ground. The window is min(1080px,100%) wide and min(86dvh,760px) tall, 13px radius, background #0b0e14, 1px #232a35 border, deep drop shadow. Title bar 42px tall with a linear-gradient(180deg,#161c25,#0f141c) fill, three traffic-light dots (#ff5f57, #febc2e, #28c840), a centred ui-monospace 12px title "guest@portfolio — zsh — 96×30" in #8b949e with the shell name in #e6e6e6, and a right-aligned bordered chip button labelled "theme". Below it a scrollable screen region with 14–15px ui-monospace text in #e6e6e6, line-height 1.62, overlaid by two pointer-events:none layers: a radial vignette (transparent centre → rgba(0,0,0,.62) at the edges) and a 3px repeating-linear-gradient scanline layer that drifts 6px over 3.2s. The footer holds a dim 11.5px hint line ("try: help · whoami · ls projects · cat resume · open sunflower · theme") and the prompt row: green "guest@portfolio", dim ":", accent "~", dim "$ ", the typed text, and a blinking block cursor built as a .62em×1.04em span whose background alternates #7ee787/transparent on a 1.06s steps(1) loop; while output streams the cursor turns #58a6ff and the prompt dims. Palette: #0b0e14 terminal, #e6e6e6 text, #58a6ff accent, #7ee787 green, #30363d dim, #f0b429 warn. A .light class on the root flips every custom property to a paper palette (#f8f9fb bg, #1c2128 text, #0a66c2 accent, #146c2e green, #d4dae2 dim) with a .45s colour transition. Implement a real command registry (help, whoami, ls, cat, open, theme, neofetch, history, date, echo, pwd, cd, sudo, exit, clear, banner), a whitespace parser, a history stack with up/down recall, Tab completion of command names and of sub-targets (ls/cat/open/theme), ctrl+L clear, ctrl+C cancel, and a streaming output queue that appends one character at a time into per-segment spans at ~7ms/char with a 42ms gap between lines — no eval anywhere. Boot prints a wordmark, a rule, "shell ready · 12 commands registered" and the hint, then focuses a 1px transparent input that captures all keystrokes. All CSS in one inline style block, all JS in one IIFE in one inline script at the end of body; system monospace stack only; no external resources; no createElementNS.

Original prompt · 088-morphing-icons.txt

Build a single self-contained HTML page: a 3×3 grid of interactive line-icon tiles on a #101216 ground, overlaid by a fixed layer of two soft radial glows (#7dd3fc at 13% top-left, #f9a8d4 at 10% bottom-right) and a faint 26px grid of rgba(255,255,255,.028) lines. Container max-width 980px, centred. Header row (flex, space-between, wrap): left column with a ui-monospace 11px/.3em uppercase eyebrow "icon set · 09 glyphs · 02 states each" in #7dd3fc, an 800-weight system-ui headline "MORPHICONS" at clamp(32px,7vw,58px) with "ICONS" in #8b95a3, and a 15px #8b95a3 lede; right column with a pill "MORPH ALL" button (transparent, 1px #262b34 border, 12px/.18em uppercase, fills #7dd3fc on hover and lifts −3px) and a monospace counter "N pinned" whose number is #f9a8d4. The grid uses repeat(3,1fr) → repeat(2,1fr) at 760px → 1fr at 430px, gap clamp(10px,1.7vw,18px). Each tile is a square button, aspect-ratio 1, 20px radius, background linear-gradient(158deg,#191d24,#12151a), 1px #262b34 border, containing a corner index number (01–09), a 38–54px inline SVG glyph with 2px round-cap/round-join strokes, and a one-line monospace label that slides vertically to reveal the alternate word. Hover lifts the tile −7px with a cyan border and glow; pinned tiles turn #f9a8d4. The nine icon pairs: play↔pause, plus↔minus, sun↔moon, lock↔unlock, chevron-right↔chevron-down, speaker↔mute-X, eye↔eye-off, download↔upload, check↔cross. Implement the morph in JS, not CSS: every subpath is sampled to exactly 24 points by an arc-length resampler, so state A and state B have identical point counts and can be linearly interpolated; each frame rebuilds the `d` attribute string from lerped coordinates. Shapes are built from helpers (lineA, circleA, arcA, eyeA for a two-arc lens, crescentA which solves the two-circle intersection to carve a filled moon from the sun disc). The morph is driven by requestAnimationFrame with an easeOutBack spring (c1=1.28) over 540ms; a stroke-dashoffset "ink" sweep (pathLength=1) runs on each morph. Tiles enter with a transform-only rise animation staggered by --i*48ms. Footer rule with "equal point counts · spring easing · no dependencies" and "tab to walk the set". All CSS in one inline style block, all JS in one IIFE in one inline script at the end of body; system fonts only; no external resources; never call createElementNS.

Original prompt · 089-solarpunk-dashboard.txt

Build a single self-contained HTML page: a solarpunk community dashboard on a #f2f7ee ground, with a fixed backdrop of three soft radial blooms (leaf #8bc34a at 20%, sun #f4b942 at 20%, sage #6b8f71 at 18%) in the corners. Content max-width 1180px, centred. Header: a 46px inline-SVG mark (a stem with two leaves and a sun dot inside a thin ring), a ui-monospace-free system-ui eyebrow "Rua das Figueiras co-op · live" at 11px/.26em uppercase in #6b8f71, and a Georgia 700 headline "Solarpunk dashboard" at clamp(26px,4.4vw,40px) with "punk" in the leaf green; on the right a segmented season pill (4 buttons in a white capsule, active button filled #2f6b3f). Below, a bento grid of 4 columns with grid-auto-rows minmax(150px,auto) and organic asymmetric card radii (26px 22px 30px 24px), 1px rgba(47,107,63,.13) borders and soft green shadows. Cards: a 2×2 "Sunlight captured" hero with a 220-unit radial gauge (track circle, sun-coloured progress arc with round caps starting at 12 o'clock, 12 rotating rays behind it, a Georgia kW readout in the middle) plus an hour scrubber range input; a 2×2 "Community harvest" vine chart where twelve leaf shapes sit along a hand-computed sine stem, sized and coloured by monthly kilograms; four 1×1 stat cards — water saved (an organic blob whose liquid fill height is a CSS variable), plants grown (a cluster of 12 CSS leaf shapes at hand-placed positions), carbon avoided (six gradient bars), energy shared (a small arc dial); and a full-width community feed with four avatar rows. Footer: a seed-sprout SVG and "planted by 214 neighbours · dashboard v2.4". Typography: numbers Georgia 700, labels system-ui 500 uppercase 10.5px/.24em, body system-ui. Season switching swaps the whole palette through @property-registered custom properties (--ground, --leaf, --sun, --forest, --sage, --track, --card) transitioned over .75s, and re-tweens every number with a requestAnimationFrame ease. Hover a card to lift it and slide its detail line into place; hover a leaf to read its month, click to pin it. All CSS in one inline style block, all JS in one IIFE in one inline script at the end of body; system fonts only; no external resources; no createElementNS.

Original prompt · 090-calligraphy-strokes.txt

Build a single self-contained HTML page: a calligraphy practice sheet on a warm #f6f1e7 paper ground, with a fixed backdrop of a soft white centre glow, a warm edge vignette and a 4px laid-paper line texture. Centred column, max-width 920px: a ui-monospace 11px/.34em uppercase eyebrow "practice sheet · sheet 04" in #6b7280, a Georgia 700 headline "Ink & Brush" at clamp(28px,5.4vw,46px) with "Brush" in seal red #9c2b1f, and a 14.5px grey caption. Below, a 420px square practice sheet (aspect-ratio 1, 3px radius, 1px rgba(20,20,20,.16) border, soft drop shadow) containing, in order, an inline SVG 米字格 guide (dashed #c9c2b4 square, centre cross, both diagonals) and two stacked canvases: #ink (the pale tracing guide plus completed strokes, never cleared except on rebuild) and #live (the in-progress stroke and drying ink, cleared every frame). The character is drawn from hand-authored stroke data in a normalised 0–100 space: 一 (one stroke), 十 (2), 人 (2), 大 (3), each stroke a list of [x, y, pressure] control points. A Catmull-Rom sampler resamples each centreline to ~100 points; for every sample the tangent gives a normal, and the outline is built as a left/right offset polygon whose half-width is 4.6 × brushScale × pressure × a taper profile (blunt 52% entry over the first 7.5%, exit tapering to 30% over the last 10%). Ink bleed comes from three layered fills of the same outline at widths ×1.62 (alpha .13), ×1.30 (alpha .20) and ×1.00 (alpha .96), with a round tip circle at the moving end. The drawing runs on requestAnimationFrame with an easeInOut progress over 760–880ms per stroke and a 250ms brush-lift gap; a completed stroke is committed to the ink canvas while a wet copy stays on the live canvas and fades out over 900ms so the ink visibly dries; the seal presses when the last stroke lands. Stroke-order badges (numbered circles at each stroke's start point) sit at 28% opacity and brighten on sheet hover, popping to full as each stroke completes. Controls below: character chips (one/ten/person/big with stroke counts), a brush-size range slider (0.6–1.7×) that rebuilds the geometry live, and a REPLAY pill button; keys 1–4 switch character. A seal button at the sheet's bottom-right is a red rounded square with carved paper-coloured marks that re-runs a press animation. All CSS in one inline style block, all JS in one IIFE in one inline script at the end of body; system fonts only; no external resources; no createElementNS.

Original prompt · 091-mondrian-lab.txt

Build a single self-contained HTML page called "Mondrian Lab". Full-viewport fixed frame inset by clamp(14px,3.2vw,54px) on a #e7e4da page, the frame itself #f2f0e8 with a multiply-blended paper grain made from two repeating-linear-gradients plus a white radial highlight. Model the composition as a row/column grid: an array of normalised x positions [0,0.18,0.52,0.74,1] and y positions [0,0.24,0.56,1]. Render each rectangle as an absolutely-positioned div whose left/top/width/height are percentages derived from the animated line positions, and render each interior line as an absolutely-positioned div (vertical lines width clamp(6px,0.8vw,12px) translateX(-50%), horizontal lines matching height) filled #1a1a1a with a transparent ::before hit-strip ~32px wide. Give each line a spring: velocity += (target-current)*0.24, then *0.74 damping, driven by one requestAnimationFrame loop that only runs while something is moving (dirty gate) and re-renders geometry each frame. Dragging uses pointer capture; the raw fraction is clamped between neighbours (min 3/20 gap) and snapped with Math.round(f*20)/20. Handles are round #f2f0e8 knobs with a 2px #1a1a1a border, children of each vertical line positioned at the intersection's y%, revealed with a scale transform on hover/drag. Clicking a rectangle cycles its colour through ['#f2f0e8','#d62828','#1d4ed8','#f6c500'] with a 0.5s background-color transition. Shuffle regenerates 3-5 interior vertical and 2-3 interior horizontal snapped lines plus a mostly-paper colour assignment and rebuilds the DOM (new cells bloom from paper to their colour); Reset restores the home composition. A dark #141414 HUD card bottom-right shows a tweened 0-100 composition score (balance from the coefficient of variation of areas, colour mix from normalised Shannon entropy over four colours, proportion from closeness to 1:1 or 1:1.618 aspect ratios, tension from the largest block's area share) with three mono metric bars, plus Shuffle and Reset buttons. Mark "Mondrian Lab" top-left in mix-blend-mode multiply. Keys S and R. Respect prefers-reduced-motion by snapping instead of springing. No external assets and no external references of any kind.

Original prompt · 092-waveform-viz.txt

Build a single self-contained HTML page called "Waveform Viz". Full-viewport dark #05070d grid: a header row (badge "092", title "Waveform Viz", a mono frequency readout), three equal stacked panels separated by 1px #1b2a44 hairlines, and a bottom synth strip. Each panel holds one canvas absolutely filling it, sized to cssW*devicePixelRatio with ctx.setTransform(dpr,0,0,dpr,0,0), re-measured through a ResizeObserver. One requestAnimationFrame loop drives all three: panel 1 draws a time-domain oscilloscope as 340 points stroked three times (wide 8% alpha cyan, 2.6px 30% alpha, 0.9px #b7f6ff core) with a centre hairline; panel 2 draws 64 spectrum bars with fast-attack/slow-release smoothing (0.44 up, 0.13 down), a pink-to-yellow vertical gradient fill and falling yellow peak caps; panel 3 draws 260 particles orbiting a centre, angle advanced by high-band energy, radius wobbled by bass energy, coloured #fde047 / #38e8ff / #ff2d78 by per-particle hue with alpha from total energy. Each panel's background grid is stroked in canvas with alpha 0.05 + energy*0.13 so the grid pulses. Audio: a lazy AudioContext created only inside a user gesture, wrapped in try/catch, with master gain -> AnalyserNode (fftSize 2048, smoothing 0.82) -> destination. Four voices - sine 55Hz bass, triangle 220Hz mid, square 880Hz through a lowpass 2600Hz high, detuned sawtooth 110Hz through a lowpass 430Hz drone - each an oscillator plus gain ramped with setTargetAtTime. Buttons play/pause the master, toggle the four tones (keys 1-4), and a range input sets gain. Dragging across the scope spawns a lazily-created sawtooth lead through a bandpass, mapped exponentially 45Hz to ~1800Hz, released on pointerup. When the analyser is silent or absent, blend in a procedural multi-sine idle signal so the panels always look alive in a frozen render. Respect prefers-reduced-motion by slowing particles and grid pulse. No external assets and no external references of any kind.

Original prompt · 093-cyber-samurai-editorial.txt

Build a single self-contained HTML page called "Cyber Samurai". A two-column editorial grid (minmax(0,1.02fr) / minmax(0,.98fr)): the left column is a sticky 100dvh dark scene (#0d0b12 with a cyan and a pink radial wash), the right column is a #f2e8d5 paper column with #0d0b12 text. In the scene: a gold sun disc built from a radial-gradient in mix-blend-mode screen with a 9s scale pulse, two layered clip-path mountain ridges (#141220 and #0a0810), and a hand-authored inline SVG samurai bust (kabuto dome, brim, flame crest, profile head, neck, shoulder armour plates) drawn once inside <defs> and rendered through four <use href="#samurai"> elements - one filled #07060b, one stroked gold at 55% alpha, and two neon outlines (#38e8ff at stroke-width 8 / 30% alpha and stroke-width 2 at full) that reveal on scene hover. A separate pink path is the eye slit and a gold path is a katana blade. The figure breathes with a 7.5s scaleY keyframe from a bottom transform-origin. Sixteen petals fall with per-petal --x, --s, --d, --dl and --dx custom properties driving a drift keyframe. Scroll progress is tracked by an IntersectionObserver over three article sections; each change fires a katana slash - a skewed gradient blade that scales across in 0.8s - plus a diagonal clip-path wipe overlay, and re-positions the sun and ridges via data-cut on the scene. The paper column carries a flickering italic 900 wordmark ("Cyber" with a neon text-shadow flicker, "Samurai" as a stroked outline), a vertical-rl Georgia text column that the mouse wheel scrolls via a translateY transform, three cut sections with Georgia italic headings and pull quotes, and a mono credits strip. A red seal button top-right toggles a neon-off body class that swaps the pink/cyan accents for gold/paper. Reduced motion disables petals, slashes, breathing and transitions. No external assets and no external references of any kind.

Original prompt · 094-saas-landing-minimal.txt

Build a single self-contained HTML page: a minimal, premium SaaS landing page for a fictional product called Cadence. Palette #ffffff paper, #0f172a ink, #6366f1 indigo, #a5b4fc soft, #f1f5f9 panel, with a full dark theme (paper #0b1120, ink #e8eefb, panel #141d33) toggled by a data-theme attribute on <html> and CSS custom properties. A fixed, pointer-events-none gradient mesh sits behind everything: four radial gradients in indigo and soft violet on an inset -25% layer, drifting with a 34s alternate transform keyframe (no blur filter). Content shell max-width 1140px. A sticky nav that gains a translucent background and hairline border past 12px scroll (rAF-throttled), with a mono uppercase link row and a sun icon button. Hero: eyebrow pill, a clamp(34px,5.6vw,68px) 700 headline with the word "cadence" in an indigo-to-soft background-clip gradient, lede, two CTAs (the primary has an ::after gradient sweep that translates on hover) and a mono meta line. Beside it a pure-CSS product mock: a browser chrome bar, a 118px sidebar of mono nav items, a 14-bar chart whose bars keep their full inline height and only pulse scaleY with staggered delays, and a three-row metric list. Then a mono text logo strip, three feature cards with inline stroke SVG icons that lift on hover, a five-item FAQ accordion animated with grid-template-rows 0fr to 1fr, a single wide pricing card split into plan and inclusions halves with a monthly/yearly toggle that tweens the price number through rAF, and a four-column footer. Section reveals use IntersectionObserver but animate transform translateY(28px) to 0 only - never opacity - so a frozen render shows the complete page. Labels use ui-monospace uppercase with wide tracking. Reduced motion disables mesh drift, float, bar pulse and reveals. No external assets and no external references of any kind.

Original prompt · 095-mosaic-portrait.txt

Build a single self-contained HTML page called "Mosaic Portrait" on a #101014 base with a fixed radial vignette and a warm halo behind the portrait. The portrait is a plate with aspect-ratio .78, clipped to a hand-authored 33-point polygon bust (head, jaw, neck and shoulders in percentage coordinates) defined once as a CSS custom property and mirrored as a JS array for a point-in-polygon test. Inside it, build a grid of absolutely-positioned tiles sized calc(100% / var(--cols)) by calc(100% / var(--rows)); only tiles whose centre falls inside the polygon are created, so the count stays in the hundreds. Colour each tile by a procedural luminance field: distance falloff from a light source at upper-left, a vertical shading term, a Gaussian cheek highlight, a forehead highlight, a jaw shadow and a shoulder shadow, plus a deterministic sine hash dither, then quantise into five zones - #101014, #2b3a67, #e07a5f, #f2b880, #f5f0e6. Each tile is an outer element positioned by transform translate3d(col*100%, row*100%, 0) with an inner element that carries the colour and a 3.6s sub-pixel jitter keyframe (only about 42% of tiles get the class, with random negative delays) so idle shimmer costs no JavaScript. Scatter and snap-back run through a single dirty-gated rAF loop: velocity += (target - x) * 0.17 * dtScale, then * 0.78 damping, per-tile frame waits for stagger. Pointer movement over the grid pushes every tile within 4.4 cells away with a squared falloff force of up to 30px; leaving the grid springs everything home. A Scatter button flings all tiles 22-100px in random directions with staggered returns, the tile-size slider rebuilds the grid between 8 and 48 columns (rows = cols * 1.28), pressing Space re-snaps, and pressing-and-dragging rotates the plate up to 11 degrees with pointer capture, easing back on release. A 9s light sweep crosses the portrait via a skewed gradient. A light caption plate sits bottom-right and a dark control bar at the bottom holds the scatter button, slider and live tile count. Reduced motion disables jitter, sweep and spring easing. No external assets and no external references of any kind.

Original prompt · 096-forest-canopy.txt

Build a single-file, dependency-free full-viewport artwork of a forest canopy seen from directly below. Compose a canvas scene: a radial sky gradient opening at 40% width / 22% height that runs from a warm sun core (#f2e8a0 blended to #2f6b3f) out to deep forest (#0f2417); seven additive light shafts crossing from the upper-left at ~56 degrees, each a pre-rendered soft-edged gradient sprite drawn with globalCompositeOperation 'lighter' and alpha shimmering on a per-shaft sine phase; roughly 180 leaves placed on a golden-angle spiral whose radius is biased outward (Math.pow(k,0.4)), each a bezier lens shape with a bright vein stroke, drawn back-to-front by depth so far backlit leaves are pale #a8d5a2 and near leaves are near-black #1a3d28; a forest-floor band across the bottom 20% with drifting dappled light blobs; and ~140 pollen motes as additive radial sprites drifting upward. Palette: #0f2417, #2f6b3f, #a8d5a2, #f2e8a0, #1a3d28. Typography: Georgia serif for the title "Forest / Canopy" (italic second line), ui-monospace for the tag, birdsong indicator and light readout. Sticky stage inside a 240dvh wrapper so scrolling tilts the scene via rotate/scale on the scene wrapper. Wheel interpolates the whole palette between morning and dusk. Click spawns an expanding ring that pushes leaves outward with a spring. Respect prefers-reduced-motion by freezing the clock and damping sway to 30%.

Original prompt · 097-celestial-atlas.txt

Build a single-file antique celestial atlas: a circular star chart of the northern hemisphere rendered as inline SVG on a deep indigo plate (#101a33) with gold (#c9a227) constellations, a zodiac ring, an eight-point compass rose, a parchment cartouche and a constellation legend. The chart lives in a 900x900 viewBox: a radial sky gradient disc, concentric declination circles in #6b7a99 at 12-20% opacity, radial spokes every 30 degrees, and a 360-tick zodiac scale between r=372 and r=430 where every fifth tick is longer; the zodiac ring carries the twelve three-letter names (ARI TAU GEM CAN LEO VIR LIB SCO SAG CAP AQU PIS) placed tangentially with a rotate(angle+90) transform and spins once every 420 seconds via a CSS keyframe on a transform-box:view-box group. Twelve hand-authored constellations (Ursa Major, Orion, Cassiopeia, Cygnus, Lyra, Draco, Scorpius, Pegasus, Andromeda, Cetus, Aquila, Perseus) are defined as polar [radius, degrees] star lists with explicit link pairs, converted to cartesian points, and injected as innerHTML strings into existing SVG groups - never createElementNS. Each constellation is one group containing a wide transparent hit path, a 30%-opacity gold polyline, star circles and an italic serif label. A comet with a gradient tail crosses the chart every 32 seconds. Parchment (#f2e8d5) cartouche at the top with small-caps letterspaced Georgia, a two-column legend at the lower left with ui-monospace coordinates, and an aged vignette of inset shadows and a slowly drifting grain layer. Palette: #101a33, #c9a227, #f2e8d5, #6b7a99, #8c1c13.

Original prompt · 098-domino-cascade.txt

Build a single-file domino cascade toy on a full-viewport canvas. The table is pre-rendered once per resize to an offscreen canvas: a #1a1410 base, a warm radial key light, 170 seeded wood-grain curves in #5e422a and black at 20-24% opacity, nine darker broad streaks, and a heavy vignette. Render the dominoes with a fake 3D projection: screen x = cx + (wx - cam.x) * scale, screen y = cy + ((wy - cam.y) * 0.60 - wz) * scale. Each domino is 26 wide, 8 thick and 52 tall, defined by a base edge (two corners along the perpendicular of its heading) and a top edge displaced by height*sin(theta) along the heading at height*cos(theta). Draw shadow ellipse, then the navy top cap (#2b3a67), then the cream face (#f2e8d5) with a hairline stroke and a bright top edge, then pips mapped through a bilinear interpolation of the projected quad - red #d94f2b in one half, blue #2b3a67 in the other, layouts 0-6 as classic dice patterns. Depth-sort by world y. Physics is 1D rotational: theta'' = 27*sin(theta) with damping, a bounce clamp at 90 degrees, and a contact test that fires an impulse into the next standing domino when a falling domino's tip reaches it. Seed the scene with an arc-length-resampled Archimedean spiral (radius 70 to 235, ~160 dominoes at 32-unit spacing) fitted to the viewport, auto-tipped 2.4 seconds after load. Toolbar in system-ui and ui-monospace with Place / Line / Curve / Clear, a domino and fallen counter, Tip all, Slow-mo and a Sound toggle. Audio is synthesized in WebAudio (no files): every tile impact plays a short wooden clack - a sine body at 176-234 Hz plus a band-passed noise click at 1.2-2.2 kHz, +/-15% detune, 30 ms throttle, into a compressor bus - and a quiet high-passed tick accompanies placements; the audio context is created and resumed on the first user gesture.

Original prompt · 099-type-specimen-variable.txt

Build a single-file variable type specimen as a two-column editorial sheet: a 232-340px control rail on the left (slightly warmer paper #f2efe8) and the specimen on the right (#f7f5f0), separated by a hairline #e5e3dc rule. The rail holds a mono kicker "S20 / 099", a bold "Variable Specimen" heading, three custom range sliders (Weight 100-900, Width 0-100, Optical 0-100) with live red #ff4d2e numeric readouts and min/mid/max tick labels, a small 74px axis plot SVG showing a crosshair dot positioned in weight-by-width space, Play and Baseline buttons, a text input that sets the specimen word, a monospace readout line, and an arrow-key hint. Sliders use -webkit-slider-runnable-track with a CSS custom property --p to paint the filled portion and a circular thumb that scales up on hover. The specimen side shows a hero word sized in JavaScript to fit the container width (fit = width / (chars * 0.53), clamped 26-172px, multiplied by the optical axis), scaled horizontally with transform: scaleX(var(--sx)) and letter-spaced with a computed em value; then a justified multi-column lede with a hairline column rule, a tabular-numeral row 0123456789, and a hairline-bordered glyph grid of A-Z, a-z, 0-9 and punctuation whose cell size and column count reflow with the optical axis. All three axes are exposed as CSS custom properties (--w font-weight, --ls letter-spacing, --sx scaleX, --cell, --ledeSize, --bl baseline step) updated on every input event.

Original prompt · 100-metamorphosis-finale.txt

Build the finale of the collection as a single-file full-viewport canvas particle piece with a five-state machine: scatter, assemble, flap, dissolve, fin. Use ~1100 particles, each holding a butterfly target in normalised space (nx, ny), a seed, an alpha, a size, a base sprite and a bright sprite, plus a random switch threshold. The butterfly silhouette comes from two hand-authored closed polygons - a forewing and a rounder hindwing - sampled by rejection with a point-in-polygon test, mirrored to both sides; add an elliptical body and two quadratic-bezier antennae. Colour the forewing by |x| interpolated from violet #a78bfa to pink #f472b6, the hindwing deeper violet, the polygon-boundary particles gold #fde68a, the body white, and a ring of 110 dust particles orbiting outside the wings. Render every particle as an additive drawImage of a 48px radial-gradient sprite with globalCompositeOperation 'lighter', using a small colour LUT (9 violet-to-pink steps plus gold, body and dust sprites) so only ~16 sprites exist. Flap by scaling each target's x by 0.24 + 0.76*|cos(phase)| and shearing y with sin(phase)*|nx|. Dissolve to a wide starfield, then resolve the word "fin" by rendering the text into a 900x320 offscreen canvas with Georgia, reading its pixels with getImageData, and assigning 66% of the particles to sampled glyph points while the rest scatter as stars. Motion is a spring toward the target (k 0.9 scatter, 3.4 assemble, 4.4 elsewhere) with damping, per-particle sine noise and pointer repulsion. Palette: #05060d, #a78bfa, #f472b6, #fde68a, #f8fafc.