Fable 5.1 100 HTML Files

Design a single-page, self-contained landing hero for a fictional product called "Lumen — ambient light OS", an operating system that tunes every lamp in a home to the time of day. The page must be one HTML file with all CSS in a <style> tag and all JavaScript in a <script> tag, no external fonts, images, or libraries. The mood is midnight and glacial: a deep indigo sky (#070a1c, with a subtle radial lift to #101a48 near the bottom) over which three aurora ribbons drift. Build the aurora purely from CSS: one huge conic-gradient disc with transparent gaps rotating slowly (48s linear), one radial-gradient cloud that translates and rotates back and forth (62s ease-in-out alternate) while its hue rotates through 360 degrees, and one elongated linear-gradient streak in amber and rose (#ffc46b, #ff7ab6). All ribbons are blurred 60–70px, set to mix-blend-mode: screen at 40–55% opacity. Add a static starfield built from tiny radial-gradient dots that twinkles by opacity, and a faint SVG feTurbulence grain overlay at 6% opacity via a data URI. Accent palette: violet #8b7dff, teal #4ee6c7, rose #ff7ab6, amber #ffc46b. Ink is #eef0ff with dimmed variants at 62% and 38% alpha. Glass surfaces use rgba(255,255,255,0.055–0.09) fills, 1px borders at rgba(255,255,255,0.14), backdrop-filter blur 18–22px with saturate 140–160%, and an inset 1px top highlight to imply a lit edge. Typography is a pure system sans stack (ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue"). The headline "Light that listens to the room." is clamp(42px, 6.4vw, 88px), weight 600, letter-spacing -0.035em, line-height 0.98, with the word "listens" filled by an animated gradient text shimmer cycling white → violet → teal → rose. Above it sits a pill eyebrow with a pulsing teal LED dot reading "Lumen OS 3 · Now in private beta". Below is a lede paragraph and two CTA buttons: a primary gradient pill (violet→teal, dark ink text) with a blurred glow pseudo-element that intensifies on hover and lifts 2px, and a ghost glass pill whose arrow icon slides right on hover. Navigation: brand mark (inline SVG sun with gradient core) on the left, a frosted pill containing four links (Features, Scenes, Hardware, Journal) in the centre, and a "Request access" outlined pill on the right. Hide the centre links under 640px. The hero's right column is a "stage" with four floating frosted panels: a large "Now playing" card with a slowly spinning conic colour ring representing the current scene, a small colour-temperature card showing a live Kelvin value and a warm-to-cool bar with a white thumb, a schedule card listing tonight's three scenes, and a glowing teal-violet orb. Each panel has a data-depth attribute; on pointer move the page eases each panel toward an offset proportional to its depth (lerp factor 0.08 inside requestAnimationFrame), producing layered parallax. Disable this for coarse pointers and prefers-reduced-motion. Below the hero is a "Three ideas behind Lumen" section with three glass feature cards (Circadian by default, Scenes that blend, Local silent yours). Each card has a top-right uppercase tag, a glass icon tile with an inline SVG that lifts and tilts on hover, and a cursor-following radial spotlight (CSS variables --mx/--my set from pointer position). A thin footer shows copyright and a live "Local light" Kelvin readout computed from the clock with a cosine curve peaking at 5 600 K near 13:00 and bottoming at 1 900 K near 23:00. Layout: max-width 1240px (1480px above 1800px), two-column grid that collapses to one column under 960px, three-column features collapsing to two and then one. Everything must remain legible from 360px to 4K. Under prefers-reduced-motion all keyframe animations and parallax are removed and aurora opacity drops.

Create a single self-contained HTML page presenting a nine-clause manifesto about honest interface design, in an uncompromising neo-brutalist style. All styles live in a <style> tag and all behaviour in a <script> tag; no webfonts, images, or external assets of any kind. Palette is strictly four colours: off-white paper #f2efe9, ink #0a0a0a, acid yellow #e8ff47 and signal red #ff2e1f. Every structural edge is a 4px solid black border. Shadows are hard, unblurred black offsets (6px and 10px). Two typefaces only, both system: a heavy condensed display voice ("Helvetica Neue", "Arial Narrow", Impact, Franklin Gothic fallback) used at weight 900, uppercase, tight negative letter-spacing and line-height under 0.9; and a raw monospace (ui-monospace, Menlo, Consolas, "Courier New") for all body copy, labels, buttons and form controls. Top of page: a sticky black marquee strip with acid-yellow uppercase phrases ("Honest design is not a style", "Show the seams", "Weight is information", etc.) separated by red ✦ glyphs, scrolling left infinitely via a translateX(-50%) keyframe on a duplicated track. Under it a three-column meta header (Document / Issued / Status) with 4px dividers; the Issued date is filled from the real clock. Hero: a two-column grid (5fr / 3fr). Left holds a gigantic headline "HONEST DE-SIGN OR NOTHING" at clamp(52px, 12vw, 190px), horizontally compressed with transform: scaleX(0.82), with the word "sign" struck through by a rotated red bar and "Or" boxed in acid yellow with a hard shadow. Below is a monospace lede and two brutal buttons (paper and signal-red) that jump up-left on hover with a bigger shadow and slam flat on active, using stepped transitions rather than smooth easing. Right column is a diagonal hatch background with an oversized rotating asterisk (clamp 220px–560px, 18s linear spin) and an acid stamp-box in the corner reading "* Terms apply to everyone, including us". Manifesto body: a twelve-column CSS grid with deliberately asymmetric spans (7/5, 4/4/4, 3/6/3, then a full-width 12). Each clause card shows an outlined numeral (transparent fill, 3px -webkit-text-stroke) at up to 120px, a condensed uppercase heading with one key phrase highlighted in acid, a monospace paragraph of real copy, and a tiny uppercase tag in the bottom-right corner via attr(data-tag). On hover or focus the card inverts in two hard steps: background to black, text and numeral stroke to acid, highlighted phrase to signal red on paper. The ninth clause is full width, acid background, horizontal layout, and inverts to black on hover. Cards are focusable and Enter/Space toggles a pinned inverted state for keyboard and touch users. Below: a signatories section (1fr / 2fr) with a black left panel ("Add your name") and a form on the right: a monospace input with an inset acid focus ring joined to a black button with acid text that turns red on hover. Submitting validates locally (minimum two characters, no duplicates), prepends a new outlined badge to a wrapping roll of signatories with a three-step "slam" scale-in animation, and prints a status line. Footer: small monospace colophon on the left with thick underlined links, and on the right a round red rubber stamp (150px, 4px red ring with a second inner ring via inset box-shadow) rotated -14deg reading "Approved for public disagreement", given a worn, distressed texture by masking it with a data-URI SVG feTurbulence noise. The stamp tilts toward the cursor and scales up on hover. Responsive: below 1100px spans redistribute; below 760px everything stacks to single column, the headline compression is removed, and hero right column becomes a 300px band. Provide prefers-reduced-motion rules that stop the marquee, asterisk spin, slam animation and stepped transitions.

Build a fully self-contained HTML page that presents a four-channel soft-UI audio mixer called "Softdesk 4" in a neumorphic style. All CSS is in a <style> tag and all JavaScript in a <script> tag; no external assets, no audio APIs, all controls change in-page state only. The entire surface is a single pale warm grey, #e0e5ec, with a slightly lighter variant #e6ebf2 for gradient highlights. Depth comes only from dual soft shadows: a white highlight (#ffffff) offset up-left and a cool grey shadow (#a3b1c6, deeper #8d9bb0) offset down-right. Raised elements use 9px/18px (large) or 5px/10px (small) outer shadows; recessed elements use the same pair as inset shadows. Text is slate #3d4a5c with softer #6b7a90 and #97a4b8 tiers. Two accents: coral #ff7a59 for knob pointers, active toggle thumbs and the selected scene, and teal #4fd1c5 for knob arcs, fader fill, focus rings and the play button. LED colours are #5ee36a green, #ffc857 amber and #ff4d4d red. Typography is a system sans stack for labels and a system monospace stack for numeric readouts. Header: a raised rounded badge with an inline SVG bar-graph icon, the title "Softdesk 4" and a subtitle, plus a recessed monospace readout pill showing sample rate, buffer size and a fluctuating CPU load. Layout: a CSS grid of five columns: four channel strips (Vocal, Keys, Bass, Drums) and a wider master section. Each strip is a raised rounded card (28px radius) containing, top to bottom: a channel name; two rotary knobs (Gain in percent, Pan shown as L/C/R); Mute and Solo toggle switches; a vertical fader beside a 14-segment LED meter; and a recessed dB readout. Knobs are 72px raised discs with a smaller inset centre disc, a coral pointer that rotates through 270 degrees (from -135 to +135) via a CSS custom property, and a teal conic-gradient arc ring masked to a 3px stroke that sweeps to match the value. While being dragged a knob switches to inset shadows and scales to 0.97 so it reads as pressed. Faders are 42px-wide recessed troughs with a dark centre track, a teal fill from the bottom, and a raised 34x46px cap with three grip lines; the cap position is driven by a --pos variable and the cap inverts to inset shadows while dragged. Meters are recessed pills whose segments light green, amber for the top five and red for the top two, with a decaying peak hold. Master section: a recessed monospace timecode display (HH:MM:SS.FF at 25 fps), a four-button transport (return to start, stop, play, record) of raised squares that sink to inset when pressed and tint teal for play and red for record, a larger Stereo Width knob, a master fader flanked by left and right meters, a dB readout, and three raised scene buttons (Verse, Chorus, Bridge) that sink when selected and smoothly animate all four channel faders to stored positions over 600ms with an ease-out cubic. Interactions: pointer drag with pointer capture on knobs (180px of vertical travel per full rotation, Shift for fine control) and faders (travel matched to the trough height); mouse wheel and arrow keys adjust values, Home/End jump to extremes, double-click resets to a sensible default. Toggles are real buttons with aria-pressed and a sliding thumb that turns coral when on. Spacebar on the page body toggles play. A requestAnimationFrame engine synthesises fake per-channel signals from layered sines (slow envelope, beat pulse, jitter) scaled by gain, respects mute and solo, pans into a stereo sum, applies stereo width as mid/side and master fader gain, and drives all meters; when transport is stopped meters fall to zero and the CPU readout drops. Responsive: five columns above 1000px, two columns (master spanning both) between 480px and 1000px, single column under 480px, with larger knobs and text above 1800px. Include prefers-reduced-motion rules that remove transitions and make scene recalls instant. Provide a hint line describing the drag, double-click and keyboard controls with styled kbd keys.

Create a single self-contained HTML file that simulates the boot screen and command console of a fictional cyberpunk operating system called "KESTREL//OS v9.4.1 Nightjar". All CSS must be inline in a <style> tag and all JavaScript in a <script> tag, with no external fonts, images, libraries or network calls. Everything is monospace using a system stack (ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New"). Palette: near-black background #05060a with a faint radial lift to #10142a at the top; neon magenta #ff2bd6 and neon cyan #00f0ff as the two primary glows; amber #ffb830 for warnings; mint #5cff8a for OK states; dim slate #6b7390 for timestamps and secondary text; pale blue #d8e6ff for body text. Panels are rgba(10,12,22,0.82) with 1px neon borders at 25–30% alpha and soft outer glows. Full-screen CRT treatment: a fixed repeating-linear-gradient scanline overlay (2px clear, 1px dark) in multiply blend, a slowly sweeping cyan refresh band that travels top to bottom every 7 seconds, a 2% white flicker layer stepping at 0.12 seconds, a radial vignette, and a perspective-tilted neon grid floor (rotateX 62deg) at the bottom whose horizontal lines scroll toward the viewer. Layout: a two-row grid (header, main) filling the viewport. The header is a panel with chamfered corners via clip-path, holding the title "KESTREL//OS" in bold uppercase with 0.18em tracking and a cyan glow (the slashes in magenta), and a status row with a blinking green LED, node id and a live clock. The header title randomly triggers a 0.42s chromatic-aberration glitch every 2.5–8.5 seconds: stepped keyframes offset a magenta and a cyan text-shadow in opposite directions, apply small translate and skewX, and briefly clip-path slices of the text. Main is a grid of a wide console panel and a 280–340px telemetry sidebar. Both panels have a floating uppercase label in magenta cut into the top border via attr(data-label) and four small cyan corner brackets. The console has a scrollable log region and a bottom prompt row reading "operator@kestrel:~$" in glowing magenta with a transparent text input. Boot sequence: on load, print a cyan ASCII-art "KESTREL" banner, then type out system checks line by line with a blinking cyan block cursor at the end of the line being typed (timestamps in dim slate at the start of each line, 14ms per character with random jitter and occasional two-character bursts), each ending with a green [ OK ] or amber [WARN] tag. Include two animated progress bars (cyan-to-magenta gradient fill with a percentage) for "Hydrating memory lattice" and "Loading operator profile". When finished, print a welcome line and enable the prompt with focus. Commands: help (prints a two-column table of commands), status (subsystem table with coloured states), scan (progress bar, then types three detected signals with hex ids, names, dBm and classification, followed by a summary line and a forced header glitch), about (three lines explaining the page is a single offline file), clear (wipes the log). Unknown commands print a red error pointing to help. Keep a history navigable with up/down arrows; disable the input while an async command runs; clicking anywhere in the console refocuses the input. Sidebar: a "Core assembly" canvas 180px tall (240px above 1800px) drawing a rotating icosahedron wireframe with perspective projection, depth-shaded cyan edges (brighter and glowing when nearer), magenta vertices, a static magenta outer ring plus a dashed rotating arc, and a small corner readout of the current angle. The canvas must handle devicePixelRatio (capped at 3) and resize. Below it two gauges (Core temp, Flux) with cyan values and thin magenta meter bars that update every 1.4 seconds. Then a "Memory · 0x7f3a" hex dump of 14 rows with magenta addresses, eight random bytes with about 12% highlighted in glowing cyan, and an ASCII column; rows recycle from top to bottom every 220ms and fade out at the bottom via a mask. Responsive: under 860px the page becomes scrollable, the sidebar moves below a 60vh console and one status item hides; under 480px the header stacks and progress bars shrink. With prefers-reduced-motion, typing becomes instant, the glitch, flicker, sweep, grid scroll and caret blink stop, the wireframe renders a single static frame and the hex dump slows to 1.5 seconds.

Create a single self-contained HTML page whose entire viewport is a canvas of liquid chrome: several mercury-like bodies drift, merge and separate as metaballs, shaded to look like polished liquid metal reflecting a studio horizon. All CSS in a <style> tag, all JavaScript in a <script> tag, no libraries, no external images or fonts. Background is a dark charcoal radial gradient (#232428 centre, #1b1c1f mid, #101113 edges) with a subtle darker floor gradient over the bottom 38% and a 7% opacity SVG feTurbulence grain overlay from a data URI in overlay blend mode. The mood is quiet, monochrome and sculptural. The metaball field: maintain 5 (under 600px wide) or 7 bodies, each with position, velocity, a radius between 9% and 19% of the shorter viewport side, and a random seed. Every frame compute, for every pixel of a low-resolution offscreen buffer, the field f = Σ r²/d² and its analytic gradient. The surface is the threshold f = 1. Anti-alias the edge with alpha = (f − 1)/|∇f| + 0.5 clamped to 0–1 so the boundary is about one buffer pixel wide. Build a surface normal from the normalised gradient direction, with tilt magnitude (1/f)^1.6 so edges (f ≈ 1) have horizontal normals and deep interiors face the viewer. Reflect the view vector (0,0,1) about the normal and sample a 256-entry environment lookup table by the reflected Y component. The LUT is a chrome horizon: near-black ground (#0e0f12) rising through dark greys (#282a30, #585a60), a razor-thin bright horizon band (#d2d0cc to #fafafc at 49.5–50.5%), then cool grey-blue sky (#bec4ce, #808996, #484e5a) darkening to #1a1c22 at the top, with smoothstep interpolation between stops. Multiply by a slight left-to-right studio falloff based on reflected X, add a cool-tinted Fresnel rim proportional to tilt³, a hard specular highlight from a key light at normalised (−0.45, −0.62, 0.64) raised to the 48th power, and a faint diffuse term. Write pixels through a Uint32Array view of the ImageData for speed. Render the buffer at half resolution (adaptive between 28% and 60% of CSS pixels, capped at 420 000 field pixels so 4K stays smooth) and upscale to the DPR-aware main canvas with imageSmoothingEnabled and high quality. Before compositing the chrome, paint a soft radial contact shadow beneath each body so the metal appears to rest above the floor. Measure frame time each frame; if frames exceed 26ms for twenty frames reduce the buffer scale by 15%, and if they stay under 14ms for 240 frames raise it by 10%. Motion: each body accelerates by layered sines of time and its seed for wander, a weak spring toward the viewport centre, soft pairwise repulsion when closer than 85% of the summed radii so they breathe apart rather than collapsing, and damping of 0.985. Clamp positions to the viewport with a bounce. When the pointer is active, every body is attracted toward it with a force that eases in and out via a smoothed strength value and falls off with distance. Pointer down adds a new body at the cursor (it swells in over 900ms with a smoothstep), up to twelve, after which the oldest is removed. Press R to reseed, Space to pause and resume. Typography overlay, all pointer-events: none: a top row with two small monospace uppercase labels ("Liquid metal study · 05" and "Metaball field · environment mapped") at 11px with 0.32em tracking in 55% white; a centred giant thin-weight title "MERCURY" in a system sans at weight 200, size clamp(48px, 13.5vw, 300px), 0.05em tracking, pure white with mix-blend-mode: difference so it inverts wherever the chrome passes behind it; a footer row with a short descriptive paragraph on the left and a live monospace stats readout (fps, body count, buffer scale percentage) on the right. A centred hint "Move to attract · click to add" fades out after the first interaction. The title animates in over 2.4s from blurred, transparent and widely tracked to sharp. Responsive from 360px to 4K: the title scales with viewport width, the footer stacks under 640px and the second label hides. With prefers-reduced-motion the simulation is settled offline for four seconds of simulated time and rendered once as a still composition, re-rendering only on pointer movement, click or resize; the title entrance animation is disabled.

Build a single self-contained HTML page called "Constellation": a full-viewport interactive particle field rendered on a 2D canvas over a deep space-navy background (#060b1f, with a deeper #03061a vignette at the edges and faint radial washes of rgba(66,79,160,0.22) rising from the bottom and rgba(120,90,200,0.10) at the upper-left). Populate the canvas with roughly 90 to 420 softly glowing particles, scaled to viewport area (about one per 5200 square pixels). Each particle is a small white or periwinkle-tinted (#a9b4ff) dot with a radial-gradient halo about six times its radius, and each twinkles on its own sinusoidal phase. Particles drift on a slow curl-noise-like current, wrap around the edges with a 20px margin, and never fall fully still. Draw hairline threads (0.8px, periwinkle rgba(169,180,255,x)) between every pair of particles closer than a user-controlled connection distance; the thread's opacity falls off as the square of (1 - distance/threshold) so near pairs glow and far pairs fade to nothing. Use a spatial hash grid so the link pass remains fast with hundreds of particles. The cursor acts as a gravity well with a 220px reach and a quadratic falloff, gently attracting particles by default; a two-segment toggle switches the field to repel. Clicking or tapping releases a ripple: two expanding concentric rings (outer periwinkle, inner white at 40% of the alpha) that fade over 1.6 seconds and physically push particles outward when the wavefront passes them; a click also births four fresh particles flung outward from the click point. A soft pulsing halo follows the cursor. Typography uses only system stacks. The title "Constellation" sits top-left in a thin (weight 300) light serif — 'Iowan Old Style', Palatino, Georgia — at clamp(2.6rem, 8vw, 7.5rem) with 0.18em letterspacing and a faint periwinkle text-shadow glow; beneath it a tiny uppercase monospace subtitle "Field study no. 006 · a slow gravity" with 0.42em tracking. Top-right is a monospace stamp showing live particle count, thread count, and fps. Bottom-left is a three-row legend (dot, line, ring glyphs built in CSS) explaining particle, thread, and ripple. Bottom-right is a frosted glass control panel (rgba(6,11,31,0.55) with 14px backdrop blur, 1px border rgba(236,239,255,0.18), 4px radius) containing a custom-styled range slider for Connection distance (40–260, default 120, thin 1px track filled periwinkle up to the thumb, a 12px white thumb with periwinkle glow that scales to 1.35 on hover with a springy cubic-bezier) and a segmented Attract / Repel toggle whose highlighted pill slides between segments with a 0.45s ease-out. UI elements enter with a staggered "settle" animation (fade, 14px rise, blur-to-sharp) over 2.4s. On screens under 640px the header stacks, the legend hides, and the panel goes full width. Respect prefers-reduced-motion by disabling the entrance animations and freezing the particle drift (ripples still respond). Canvas must handle resize and devicePixelRatio (capped at 2). The mood: quiet, cosmic, contemplative — an observatory at 3am.

Design a single self-contained HTML page that reads like a feature spread from a premium print journal in the vein of Kinfolk or Monocle. The publication is called "Margin — A journal of slow places", Issue 14 ("Overcast"), and the feature is an original essay titled "The Quiet Architecture of Fog" by Ines Halloran, with plates credited to Studio Nordvik. The essay itself must be real, well-written prose of roughly 1,000 words in four numbered sections (I. Walls without footings, II. The ceiling that breathes, III. The city as a scale model, IV. Demolition, daily) that treats coastal fog — the Pacific marine layer at Point Reyes and the Scottish "haar" on the Firth of Forth — as a form of architecture that is built each morning and demolished by noon, referencing Pallasmaa and Zumthor. Palette: cream paper #f4efe6 with a slightly deeper #ece5d8 and faint radial highlights to suggest paper stock; ink black #151311 for headlines and body; softer ink #3d3934 for the standfirst; muted #857d72 for captions and folios; a single cool slate accent #6d7f8a for kickers, pull-quote marks, and small-cap labels; hairline rules at rgba(21,19,17,0.18). Typography is system-serif only — 'Iowan Old Style', Palatino, Book Antiqua, Georgia — for headlines and body, with a system sans (ui-sans-serif, Helvetica Neue) reserved for tiny uppercase tracked labels (0.66–0.7rem, 0.2–0.34em letterspacing). The headline is enormous: clamp(2.9rem, 9.5vw, 8.4rem) at weight 400, line-height 0.92, letterspacing −0.03em, with an italic light-weight deck at 0.42em nested beneath it. The standfirst is italic at ~1.2–1.4rem. Body copy is set at clamp(1rem, 0.35vw+0.92rem, 1.15rem), line-height 1.55, hyphenated, with orphans/widows control. Layout: a max-width 1320px page with generous clamp() padding. A masthead row (journal name, issue, section) sits above a 1px black rule. The opener is a two-column grid on wide screens (7fr/5fr): headline on the left, standfirst and byline on the right, aligned to the baseline. Beneath it a 21:9 "photograph" rendered entirely in CSS. Then the body: CSS multi-column text (1 column below 760px, 2 to 1180px, 3 above) with a 1px column rule; the first paragraph opens with a floated drop cap at 5.1em. Two pull quotes use column-span: all to break across every column, framed by a 1px black top rule and hairline bottom rule, set in light italic serif at clamp(1.6rem, 3.3vw, 3rem) with slate-coloured curly quote marks and a small tracked citation to the right. After the essay a 5fr/7fr "spread" grid holds a square plate, a wide plate, and a "Field glossary" aside (definition list with small-cap terms, hairline left border). A colophon closes the page. Fixed folios sit at bottom-left ("14 Margin — Overcast") and bottom-right (essay title and a page number that drifts from 42 to 47 as the reader scrolls); a 2px black reading-progress bar spans the top. The three plates are abstract duotone compositions in slate and bone built only from gradients and clip-path: Plate I is a fog bank over a jagged dark ridge (layered radial gradients plus a polygon clip-path silhouette); Plate II is a row of six dark pier pylons dissolving upward into a pale haze gradient; Plate III is a divided window — a radial glow behind a dark frame with a vertical and horizontal mullion. Each plate has a subtle repeating scanline texture via a ::after overlay in overlay blend mode, a long soft drop shadow, and scales up by 1.2% on hover over 1.2s. Every block carries a "reveal" class that fades and rises 18px into place when it enters the viewport (IntersectionObserver, 1.1s ease-out with optional --d stagger delay). Under prefers-reduced-motion all reveals are shown immediately and hover transforms are disabled. Mood: hushed, literary, printed.

Create a single self-contained HTML product page for a fictional Nordic watchmaker, "Halden" (Est. Oslo, 1962), presenting the "Meridian 38 · Automatic · Calibre H-11", reference 38.02, limited to 250 pieces, priced at € 4,850. The page is an exercise in restraint: a near-black background (#0a0a0b with a barely visible central radial highlight of white at 3.5% opacity), warm off-white type (#ece9e2) at three levels of dimness (55%, 22%, and 12% for hairlines), and a single warm gold accent (#c9b48a) for the seconds hand and hour indices. Typography uses only system stacks: a serif — 'Iowan Old Style', Palatino, Georgia — for the brand name (set uppercase with 0.55em letterspacing), the product name at clamp(2.8rem, 5vw, 4.6rem), the spec values, and the lede; a system sans for all tiny uppercase labels at 0.62–0.7rem with 0.26–0.34em tracking. Layout: a 1440px-max shell with a three-row grid (nav, main, footer) filling the viewport. The nav holds the brand at left, three links with a left-to-right underline reveal on hover, and "Est. Oslo · 1962" at right. Main is a single column that becomes two equal columns above 960px: the watch on the left, the copy on the right. The watch is a fully working analog timepiece: a 1:1.55 container holds two leather strap segments (CSS: dark base colour, fine repeating vertical grain, edge shading, dashed stitch lines via repeating-linear-gradient pseudo-elements, a steel buckle on the lower strap) and a circular case. The case's brushed steel bezel is a CSS conic-gradient (dark #2b2a28 through bright #efede7 across the circle, with a repeating-conic hairline pattern for brushing), plus a ribbed crown at 3 o'clock. Over it sits an inline SVG (viewBox 0 0 400 400) that draws: a faint linear sheen, dark and light edge rings, a dial-edge ring and dial disc coloured by CSS custom properties, a radial vignette, a 60-mark minute track generated by JavaScript (hour marks longer and gold, omitted where Roman numerals XII / III / VI / IX sit), the brand name and "MERIDIAN · AUTOMATIC" in small tracked type, a subtle sub-dial ring and "SWISS MADE" at 6, a cream date window at 4:30 with the real date, and three hands: a broad hour hand and slimmer minute hand (each with a dark inset channel), and a hairline gold seconds hand with a counterweight ring, all with a soft SVG drop-shadow filter. Hands are driven by requestAnimationFrame from the real system clock so the seconds hand sweeps continuously (under prefers-reduced-motion it ticks once per second instead). A clipped, rotated elliptical glass reflection gradient sits over the upper-left of the dial and a fine 14%-white ring outlines the crystal. The whole watch floats up and down 8px on a 9s loop. The copy column stacks: an eyebrow line, the H1 with a tracked sans sub-line, a serif lede of two sentences, a "Dial & strap" radio group of four circular swatches — Fjord (graphite dial, black strap), Glacier (pale silver dial, slate strap, dark hands), Deep (midnight blue, navy strap), Moss (deep green, tan strap) — each a 20px gradient disc inside a 1px ring that scales to 1.18 when selected; choosing one updates the CSS custom properties --dial, --dial-edge, --strap, --accent, --hand so dial, bezel inner ring, straps, indices and hands cross-fade over 0.9s with a cubic-bezier(0.22,1,0.36,1) ease, and the variant name output fades and swaps. Arrow keys move between swatches. Below is a six-cell specs grid (2 columns on phones, 3 above 560px) with hairline dividers: Case 38 mm, Thickness 9.4 mm, Movement H-11, Reserve 72 h, Water 100 m, Strap 20 mm, each with a small sub-line. Then the price with "Delivery from October" and a bordered "Reserve" button whose fill wipes in from the left on hover (background inverts to off-white, text to black) and which, once clicked, becomes "Reserved · <variant>" with a gold border and disables itself. The footer carries the company name, a live tabular-numeral local time, and the reference. Everything must be precisely spaced; nothing should move quickly.

Build a single self-contained, full-viewport HTML page called "Breathe": a dreamlike living gradient mesh with film grain and a slowly changing single-word typographic statement. Five enormous circular blobs (48–70vmax in diameter) sit inside a fixed container that overflows the viewport by 20% on every side and is blurred with filter: blur(clamp(50px, 7vw, 120px)) saturate(1.15); the blobs use mix-blend-mode: screen so their colours add into luminous overlaps. Each blob follows its own independent orbit computed in JavaScript every frame: an eased sine wave (sign(sin) · |sin|^0.8, which produces a breathing hesitation at the extremes) with separate x and y periods between 23 and 53 seconds, individual phase offsets, a slow rotation, and a gentle ±8–14% scale pulse. The movement must be slow enough that the eye never catches a blob "moving", only notices the composition has changed. Three palettes, each with a base background colour and four blob colours, switchable via a pill-shaped segmented control in the footer and via the 1/2/3 keys: Dawn (base #1a1030; coral #ff6b57, violet #7b4dff, teal #14b8a6, gold #f5b942), Reef (base #03131f; aqua #00c2c7, ultramarine #2748ff, mint #5be7a9, pink #ff7ab6), and Ember (base #1c0a0a; vermilion #ff4d2e, wine #9c1a5b, orange #ff9f1c, saffron #ffd166). Palette changes are written to CSS custom properties (--c1..--c4, --base) so every blob and the page background cross-fade over 2.2 seconds. Each palette button carries a tiny four-quadrant conic-gradient dot showing its colours, which spins and enlarges on hover with a springy bounce; the active button has a soft white tint. Above the mesh, a fixed full-screen canvas generates monochrome film grain: pre-render four frames of random mid-grey noise (values 110–200) at up to 1.5× devicePixelRatio and cycle them at roughly 20fps for a flicker; the canvas sits at 22% opacity with mix-blend-mode: overlay. Rebuild it on resize (debounced). A radial vignette darkens the corners. Centred on screen, a giant light italic serif word — 'Iowan Old Style', Palatino, Georgia at weight 300, clamp(3.4rem, 15vw, 15rem), letterspacing −0.02em, with a wide soft white text-shadow glow — cycles every 5.2 seconds through "breathe", "drift", "soften", "become", "linger", "unfold", "return" using two stacked layers: the outgoing word fades up 12px, scales to 1.015 and blurs to 10px while the incoming word fades from 12px below, scale 0.985 and 8px blur to sharp, both over 1.6s with ease-out curves. Beneath it a small tracked uppercase sans caption gives each word a one-line instruction ("in through the nose, four counts", "let the thought pass like weather", and so on) that fades out and back in on each swap. A monospace header shows the title, "A living gradient · no. 009", and the current palette name; the footer holds the palette control, a round outlined pause/play button (inline SVG icons, springy hover scale) that freezes blob motion, grain flicker, and word cycling, and a hint "space · pause 1 2 3 · palette". On phones the secondary header/footer text hides and the pill shrinks. Under prefers-reduced-motion, the blobs are placed once and not animated, grain is a single static frame, and words cycle every 9 seconds with a shorter crossfade. Mood: premium, meditative, slightly hallucinatory — a breathing exercise rendered in light.

Build a single self-contained HTML page called "Valley of Paper": a full-viewport layered paper-cut landscape at dusk, constructed entirely from one inline SVG (viewBox 0 0 1600 900, preserveAspectRatio xMidYMax slice, oversized by ~6% on each side so parallax never reveals edges) sitting over a CSS sky gradient. Stack eight sheets from back to front, each a group with a soft CSS drop-shadow (drop-shadow(0 10px 8px rgba(20,10,40,0.35)) for distant sheets, a deeper 18px/14px shadow for the two nearest) so every silhouette reads as a piece of cut card lying on the one behind it: (1) a field of 140 tiny twinkling stars generated in JS with a seeded random; (2) a paper sun (70px disc with a wide radial glow) that sinks as time passes; (3) a crescent paper moon (disc with a masked bite) that rises; (4) three drifting paper clouds built from cubic-bezier blob paths, animated with translateX keyframes on 140–190s loops; (5) far jagged mountains; (6) mid mountains; (7) rolling hills with a row of small pines drawn from a single reusable <use href="#pine"> symbol; (8) nearer hills with larger pines that sway ±0.8° on a 6s ease loop, each with a staggered delay; (9) a front ridge carrying a paper cabin (walls, gabled roof, chimney, two windows and a door) and two pines; and (10) a foreground ground strip with a paper deer facing left (elliptical body, curved neck, small head with ears, stroked antlers, four legs — two slightly splayed — and a tail) plus two large pines at the edges. Dusk palette (top of sky to foreground): sky #3b2a5c → #c9698a → #f7b26a, sun #ffd28a, clouds #f7d5c4, sheets #8b6a9c, #6a4f83, #4f3a6b, #3a2a54, #2b1f44, #1c1533, #130f26. Night palette: sky #050a1e → #0f1c44 → #24356a, sun #ff9a5a (as it sets), clouds #3a4a7a, sheets #2b3a6b, #1f2c55, #182243, #111935, #0c122a, #080c1f, #050815, and a cabin window that warms from a faint rgba(255,200,110,0.15) to a bright rgba(255,160,70,1.0). Every colour lives in a CSS custom property; a JavaScript function linearly interpolates each hex pair with a smoothstep curve and writes the results as the slider moves, while also driving --stars (fades in between 35% and 85% of the slider), --sun-y (sun descends 620px), --moon-y (moon rises 700px), and the window glow. Sheets use 0.6s fill transitions so slider scrubbing feels buttery. Parallax: pointer position (normalised −1..1) sets a target offset up to 40px, smoothed each frame with exponential easing (6% per frame) and written to --mx/--my; each layer translates by that offset times its own --p factor (0.1 for stars up to 1.15 for the foreground; vertical movement is 60% of horizontal) with a 0.9s ease-out transition, so near sheets glide more than far ones. On coarse-pointer devices, offer device-tilt parallax: iOS shows an "Enable tilt parallax" pill button that calls DeviceOrientationEvent.requestPermission(), other devices attach the deviceorientation listener directly, mapping gamma and beta (centred on a 45° holding angle) to the same target; touch-drag on the scene also pans when no tilt data is present. UI: a top-left paper label (cream #f6ead6, dark ink #3b2a2a, 6px radius, long soft shadow, tilted −1.2°, a translucent strip of paper tape over its top edge) holding the title "Valley of Paper" in a bold warm rounded system sans (ui-rounded, 'SF Pro Rounded', 'Hiragino Maru Gothic ProN', 'Arial Rounded MT Bold', Segoe UI, system-ui) at clamp(1.5rem, 3.4vw, 2.4rem) with the uppercase tracked subtitle "A cut-paper dusk · move to look around"; on hover it straightens and lifts 2px with a springy ease. A bottom-right paper panel (tilted +0.8°) holds the "Time of day" slider (0–1000) whose track is itself a gradient from gold through rose and violet to midnight, a 22px paper-coloured thumb with a dark ring that grows on hover, a live monospace clock readout that runs from 18:40 to 23:59 as the slider moves, tick labels "Golden dusk / Twilight / Blue night", and a hint line. The label and panel darken slightly toward night too. Both UI cards settle in with a rise-and-fade on load. Under 640px the panel goes full width. Under prefers-reduced-motion, cloud drift, tree sway, star twinkle, entrance animations, and the smoothing loop are disabled (the slider still recolours everything).

Design a single self-contained HTML page that recreates the attract-mode screen of a late-1980s arcade cabinet as seen through a curved CRT tube. The whole page is a dark room (radial gradient from #1b1b22 at the bottom to #050507) with a centered cabinet bezel: a 5:4 rounded-rectangle of brushed charcoal (#2a2a2e to #141416 to #0b0b0d) with inset highlights, a huge soft drop shadow, two amber (#ffb347) pilot lamps pulsing on either side, and a tiny etched manufacturer badge ("Voltage Works · Model VW-25 · Made in Osaka") beneath the glass. Inside the bezel sits the screen: near-black phosphor (#020603) with elliptical rounded corners to suggest tube curvature, a heavy inner vignette, and layered overlays that fake a CRT: 3px horizontal scanlines, an RGB aperture-grille of red/green/blue 1px stripes at low opacity, a slow vertical "roll bar" of light drifting top to bottom every 7 seconds, and a diagonal glass reflection sheen. All screen text uses a monospace system stack ('Courier New', ui-monospace, Menlo) in phosphor green (#39ff6a) with dim green (#1f8a3c) for inactive elements and a text-shadow glow; saturated 8-bit accents are cyan (#2bd8ff), magenta (#ff3cac), yellow (#fff35c) and amber (#ffb347). The entire content layer subtly flickers every few seconds via a stepped opacity keyframe. At the top, a pixel-art logo reading "NEON DRIFT" is drawn from a 5x5 bitmap font rendered as a single element with hundreds of box-shadows, each glyph a different accent color, with a slow hue-rotate animation. A cyan tagline "// ATTRACT MODE — 1987 //" sits beneath it. The middle is a two-column panel (stacking to one column under 640px): the left box is a SELECT menu with four options (1P START — PADDLE, VIEW RANKINGS, SHUFFLE TABLE, CREDITS). The selected row is bright green, shifted right, with a blinking magenta triangle cursor; hovering also selects; activating flashes the row inverted (green background, black text) twice as sound-free feedback. The right box is TODAY'S HI-SCORES: a table of rank, three-letter initials in amber, seven-digit score in cyan, showing five rows at a time and cycling through three pages every four seconds with a stepped slide-in animation, with a magenta label indicating the current rank range. The footer shows a blinking yellow "INSERT COIN", an amber credit counter, and a dim copyright line. Choosing 1P START (requires at least one credit, added by clicking INSERT COIN or pressing C) hides the panel and reveals a playable canvas paddle game: a faint green grid, three rows of eight glowing colored bricks, a yellow square ball with a fading green trail, and a glowing green paddle at the bottom. Arrows or A/D move the paddle; dragging or touching the canvas also positions it. Each paddle hit adds 5 points and slightly speeds the ball; each brick 25; clearing all bricks respawns them with a STAGE CLEAR toast. Three lives are shown as diamonds; losing them all shows GAME OVER and returns to attract mode. A large magenta toast overlay in the center announces events (READY, MISS, CREDIT n, SHUFFLED). The canvas handles devicePixelRatio and resize. Reduced-motion users get no roll bar, no flicker, no blinking.

Build a full-viewport, self-contained HTML page that presents the solar system as a CSS 3D scene. The background is near-black (#02030a) with a JavaScript-drawn canvas starfield (density scaled to viewport area, a mix of blue-white, warm-white and faint orange stars of varying radius and alpha, plus a few hollow ring "distant galaxies") and two faint nebula washes (violet rgba(60,30,120,0.25) bottom-left, teal rgba(20,70,120,0.22) top-right) layered as radial gradients. A perspective container (perspective: 1400px) holds a camera pivot at the exact center whose transform is scale3d(s,s,s) rotateX(pitch) rotateY(yaw), with transform-style: preserve-3d throughout, where pitch starts at 62° and yaw drifts slowly at 1.5°/s until the user takes over. At the center is the Sun: a 90px disc with a radial gradient from #fff9d6 through #ffe28a, #ffb428, #ff7a12 to #ff4d00, four stacked box-shadow glows expanding to 320px, a gentle 5-second brightness pulse, and two blurred conic-gradient corona layers (one counter-rotating) that spin slowly behind it. Eight orbit rings are thin 1px circles (rgba(255,255,255,0.13) with faint blue inner/outer glow) laid flat via rotateX(90° + inclination), each using the planet's real orbital inclination (Mercury 7°, Venus 3.4°, Earth 0°, Mars 1.9°, Jupiter 1.3°, Saturn 2.5°, Uranus 0.8°, Neptune 1.8°) at radii of 105, 140, 180, 222, 300, 380, 450 and 512 px. Every planet is a billboard disc positioned by a wrapper transform rotateX(inc) rotateY(angle) translateX(radius), and the disc itself applies the exact inverse rotations plus the inverse camera rotation so it always faces the viewer; angular speed is truly proportional to real orbital periods (one Earth year = 12 seconds at 1×; Mercury laps in 2.9 s, Neptune takes about 33 minutes), and the speed slider runs from 0× to 40×. Surfaces are pure CSS: Mercury a grey radial gradient (#cfc9bf to #46423d) with two crater shadows; Venus creamy gold (#f6e3b4 to #9c6a3a) with faint diagonal cloud streaks; Earth a blue sphere (#3b7be0 to #0a2a66) with green continents (#4a9a3e, #3c8a3a) and a white cloud highlight; Mars rust (#e6845a to #6a2810) with a dark basin and white polar cap; Jupiter horizontal repeating bands in #d7bd9c, #b18866, #ecdcc7, #a56b4d and #cfa781 plus an oval Great Red Spot (#c8583c); Saturn pale-gold bands with a separate flattened ring element (230% size, rotateX(74°), radial gradient with a Cassini gap); Uranus a smooth cyan (#d6f6f7 to #3a9aa3); Neptune deep blue (#6d95f5 to #142f8f) with subtle bands. A grey Moon circles Earth at 18px every 27.3 Earth-days of simulated time. Each disc has an ::after terminator shadow: a radial gradient whose light point is set each frame via CSS variables computed from the disc's screen position relative to the Sun, so the lit side always faces the Sun. UI uses a serif display (Georgia / Iowan Old Style / Palatino) for the title "Orbit." with an amber (#ffb52e) period and a sans system stack (ui-sans-serif, system-ui, Helvetica Neue) for body and controls; text is #e8ecf5 on frosted panels (rgba(10,14,30,0.72) with backdrop blur, 1px rgba(255,255,255,0.10) borders). A pill toolbar at the bottom holds the speed slider with an amber thumb, a Labels toggle (aria-pressed) that fades small uppercase names beneath each planet, and Reset view. Clicking or keyboard-activating a planet or the Sun slides in a glass info card from the right (bottom sheet under 640px) with type, name, diameter, day length, year, moon count, mean temperature and a one-paragraph real fact. Dragging anywhere else rotates yaw and pitch (clamped 2–89°), the wheel adjusts pitch, and Escape closes the card. Reduced-motion disables the corona spin, pulse and auto-yaw.

Create a self-contained HTML page that behaves like a generative sumi-e (Japanese ink wash) studio. The layout is a two-column grid: a 300px sidebar on the left in warm off-white (#faf7f0) separated by a hairline rule (rgba(22,22,26,0.12)) that fades at both ends, and a canvas stage on the right that fills the remaining viewport. Under 760px the sidebar collapses into a compact top bar and the prose disappears. Typography is a serif system stack (Georgia, Iowan Old Style, Palatino, ui-serif) for the title "Sumi Field" at 34px and the italic lede, with tiny uppercase tracked labels (0.28em letter-spacing) in a sans system stack (ui-sans-serif, system-ui, Helvetica Neue) in soft grey (#55555c). Ink color is #16161a. The sidebar contains: a large six-digit seed number in tabular figures, editable inline (Enter to apply, turns seal-red #b8321e on focus); a palette radio group rendered as three gradient swatch tiles — Ink (#16161a to #4a4a52), Indigo (#1b2a5e to #4a63b8), Vermilion (#7a1e10 to #d94a2a) — where the checked tile gets a double ring and hover lifts it 2px; a Turbulence range slider (0.6–5, default 2.4) with a thin 1px track and hollow round thumb; and three outlined buttons whose fill wipes upward from the bottom on hover (Regenerate, Save PNG, and a full-width "Flow · live particles" toggle that stays filled when pressed). Below sits a live status line and a short explanatory paragraph; the sidebar ends with a small about text. The stage is rice paper: a canvas whose background is generated per seed — a base tint (#f3eee3 for Ink, #eef0ec for Indigo, #f7f1e6 for Vermilion) with per-pixel grain noise of ±9 levels, hundreds of faint short fibre lines, and a soft warm vignette. A seeded mulberry32 PRNG drives a hand-written 2D simplex noise implementation; the vector field angle at any point is a two-octave blend (0.7 base + 0.3 at 2.3× frequency) multiplied by π times the turbulence value. Painting happens in three passes queued and drawn progressively in 1,800-stroke batches per animation frame while a 2px progress bar grows across the top edge: about 260 pale wide washes (7–16px, alpha 0.025–0.06) in a lighter wash tone, 1,400 mid strokes (1.4–4px, alpha 0.12–0.3), and 2,600 fine hairs (0.35–1.1px, alpha 0.3–0.7), scaled by canvas area. Each stroke walks the field in short steps, tapers to 15% of its width, fades to 45% alpha, jitters its width slightly and randomly skips segments with increasing probability toward the tip to fake a dry brush. Tones are drawn from a three-shade set per palette (e.g. #16161a, #2a2a30, #3d3d45 for Ink). A red seal stamp (chop) sits in the bottom-right of the stage: a narrow vertical rectangle with an inner white border, vertical upright text showing the seed, slight −2° rotation, multiply blending, and a bouncy scale-in "stamp" animation each time a new painting begins; the seal color switches to black on the Vermilion palette. Flow mode spawns roughly 480 particles that step along the same field two segments per frame, laying down accumulating ink on top of the painting and respawning when they die or leave the canvas. Save PNG downloads the current canvas via toDataURL. Keyboard shortcuts R and F regenerate and toggle flow. The canvas handles devicePixelRatio (capped at 2) and repaints the same seed on resize; reduced motion paints synchronously and removes the transitions.

Write and typeset an original nine-stanza poem about the sea at night ("Nocturne for the Sea") as a single self-contained HTML page where scrolling is the choreography. The page is a warm black (#0e0c0b) with bone-white text (#ece6d9, dimmed variant rgba(236,230,217,0.42)) and a single accent of deep sea teal (#146c73 with a brighter #2aa3ab for glows and highlights). Type is a serif system stack (Georgia, Iowan Old Style, Palatino, Book Antiqua, ui-serif) at a fluid size clamp(1.5rem, 1rem + 3.6vw, 4.4rem) with 1.22 line-height and balanced wrapping inside a 22ch column; labels use a tracked uppercase sans stack (ui-sans-serif, system-ui, Helvetica Neue) at 10–11px with 0.22–0.32em letter-spacing. Each stanza is a full-viewport (100svh) grid-centered section with a small teal roman numeral above it that fades in as the stanza centers. Atmosphere: a fixed moon (radial gradient from #f7f1e1 through #d8d0bd to #8f8877 with two crater shadows and a double bone glow) that rises off-screen, shrinks and dims as global scroll progress increases; a fixed blurred teal "water" glow along the bottom that swells slowly on an 11-second alternating loop and grows stronger toward the end of the poem; and a faint overlay film grain made from two repeating radial gradients at 6% opacity with overlay blending. A vertical progress rail on the right shows a 1px track with a glowing teal fill proportional to scroll, nine clickable dots that scale up when current or hovered, and a vertical "III / IX" counter. A "Scroll" hint with a dripping line animation fades out immediately once scrolling begins. Choreography, one per stanza, driven by two CSS custom properties written per frame by JavaScript — --t (a smoothstep of how centered the section is in the viewport) and --p (monotonic 0→1 as the section travels through the viewport) — plus an IntersectionObserver that toggles an .in class at 35% visibility for staggered entrance transitions: (I) letters split into spans rise from 1.1em below with an 8° tilt, staggered 26ms per letter; (II) words slide in from opposite sides, odd from −30vw and even from +30vw, staggered 55ms; (III) letter-spacing stretches continuously to 0.42em with scroll while the final italic line stays tight; (IV) lines hinge up in 3D from 85° rotateX with 900px perspective and a translateZ recede, bottom-origin; (V) text is filled like liquid using background-clip: text with a gradient whose teal lower half rises through the glyphs as --p increases; (VI) words surface from a 14px blur and 1.25 scale, staggered 70ms; (VII) words are scattered with random per-word offsets (up to ±30vw, ±25vh, ±30°) stored in custom properties and converge to their places as --t approaches 1; (VIII) letters ripple with a CSS sin() wave whose phase is driven by --p and letter index, damping as the stanza centers, with the phrase "almost your name." in teal; (IX) the closing lines scale from 1.35 to 1 and tighten their tracking from 0.2em as they arrive, with the phrase "dripping light." in teal and a small colophon beneath. Arrow keys, Page Up/Down and Space step between stanzas. Under prefers-reduced-motion, all text is shown settled with no transitions and the water and hint animations stop.

Build a self-contained HTML page showing a single toy-like city block rendered entirely with CSS 3D transforms, living through a two-minute day/night cycle. The stage is a 540×540px ground plane tilted into isometric view with transform: rotateX(60deg) rotateZ(45deg) and transform-style: preserve-3d, scaled to fit any viewport with a JavaScript-computed --s factor (0.42 to 1.7). The ground is painted with layered background gradients: grass (#b9d59a), a light sidewalk cross (#d9d3c7), two 90px asphalt roads (#5b5f6b) crossing in the middle with cream dashed center lines, a thick concrete curb via box-shadow rings (#c9c2b4) and a soft drop shadow. Small round trees (radial gradient #8ac27a to #4f8a48) with a trunk stand at translateZ(10px). Twelve buildings are hand-placed cuboids, each a .slot with CSS variables --x, --y, --w, --d, --h and a pastel concrete color: Harbor Tower (#a9b7c9, 220px), Marigold Flats (#e9c1a0), Linden Court (#b9d4c2), The Prism (#c9bfe0), Cobalt Works (#9fb8d8), Night Market (#e6a49a, low and long), Pillow Bank (#e8dcc4), Ferris Apartments (#dcb3b8), Saltbox Studios (#c3ccb0), Aurora Spire (#a8cfd0, 260px tallest), Tin Roof Diner (#ecd9a1) and Meridian House (#cfc5d6). Each cuboid is composed of three faces: a top (translateZ(--h), lightened by a white overlay with a subtle inset rim), a south face (translateY(--d) translateZ(--h) rotateX(-90deg), brightness 0.96) and an east face (translateX(--w) translateZ(--h) rotateZ(90deg) rotateX(-90deg), brightness 0.74), all with transform-origin 0 0. Each vertical face has a CSS grid of window cells (JS fills them from data-rows and --cols) with bluish glass gradients; a ::after layer in warm amber (#ffd58a, with occasional cream #ffe9b8 and cool #cfe6ff variants) fades in as the --night variable rises, only for windows carrying an .on class, which JavaScript randomly toggles on a handful of windows every 380ms so the block flickers alive at night. A dark door sits at the base of every south face. Each building casts a blurred footprint shadow on the ground offset by unitless --shx/--shy per 100px of height, so shadows swing long at dawn and dusk and fade at night. Hovering or focusing a building springs it up 24px with a bouncy cubic-bezier(0.2, 1.3, 0.3, 1) and reveals a frosted paper tag above the roof — counter-rotated with rotateZ(-45deg) rotateX(-60deg) to face the screen — naming the building, its floors and its use; a fixed caption mirrors this for assistive tech. The sky is the body background, a vertical gradient from --sky1 to --sky2 driven by JavaScript interpolating through nine keyframes (deep night #0c1028/#1e2246, violet dawn, peach sunrise #ff966e/#ffd7aa, clear day #5faaff/#e1f2ff, amber dusk, plum evening) with smoothstep easing; --night rises to 1 at night, dimming the ground and faces through rgba(18,24,66) overlays and revealing a fixed field of tiny radial-gradient stars. A glowing sun and a pale moon travel opposing arcs across the sky and fade below the horizon. Three soft CSS clouds drift across on 90–130 second loops. Four cars — flat glowing rounded rectangles in coral, teal, yellow and periwinkle with a white headlight and red taillight whose glows strengthen at night — run continuously along the two roads via linear keyframe animations at 8–12 seconds each. Above the Night Market hovers a neon marquee: a dark plum plate (#2a2038) with italic serif pink text (#ff5fb8) stacked with three text-shadows, bobbing up and down and flickering via stepped opacity. A bottom pill toolbar (frosted white, rounded) offers Pause cycle (aria-pressed), Rain (adds a fixed overlay of two slanted, falling radial-gradient streak layers plus extra ground darkening and denser clouds) and Skip to night/day; a serif clock in the top-right shows the simulated time and phase. Space pauses, R toggles rain. Reduced motion pauses the cycle and stops cloud, neon and rain animations.

Build a single self-contained HTML page called "Ether": a full-viewport interactive fluid and smoke canvas on a near-black background (#04050a) where dragging the cursor injects glowing colored dye and velocity into a real 2D fluid simulation. Implement a Jos Stam "stable fluids" solver on a 96x96 interior grid (with a one-cell boundary ring) using Float32Arrays for horizontal velocity, vertical velocity, and three separate dye channels (red, green, blue). Each frame run the classic steps: diffuse velocity with a few Gauss-Seidel iterations, project to enforce incompressibility (16 pressure iterations), semi-Lagrangian advect velocity by itself, project again, then diffuse and advect each dye channel and multiply it by a dissipation factor so color fades slowly. Apply a gentle 0.995 global velocity damping. Render by writing the dye grid into a 96x96 ImageData, multiplying by a brightness constant and clamping, then draw that tiny buffer scaled with high-quality smoothing so the square simulation cover-fits the viewport. The screen canvas must handle resize and devicePixelRatio (capped at 2). Dye color cycles continuously through hue: convert HSL (hue, 95% saturation, 55% lightness) to RGB and add it in a Gaussian falloff disc around the pointer. Drag velocity comes from pointer deltas scaled by 8; faster drags produce larger splats. Hovering without pressing leaves a very faint trail so the canvas always feels alive. Include two slow orbiting ambient emitters with hue offsets that stir the fluid when nothing is happening (toggle button "Auto"), disabled under prefers-reduced-motion. Seed the scene with a ring of 24 outward-pointing splats in cyan-blue hues so the page opens with a quiet bloom. Typography: the title "Ether" sits in the top-left in Georgia / Iowan Old Style / Palatino serif at clamp(34px, 5vw, 64px), letter-spacing 0.14em, filled with a vertical gradient from white through #b7c4ff to #6d7fd6 via background-clip: text, with a soft cyan drop-shadow glow. Beneath it a tiny uppercase tagline "a fluid you can touch" at 11px with 0.32em tracking in dim lavender-white (rgba(232,230,242,0.55)). A centered bottom hint "drag anywhere to breathe color into the void" breathes in opacity and fades out permanently on first pointer down. HUD: a frosted-glass card bottom-right (background rgba(14,16,28,0.55), 1px border rgba(255,255,255,0.10), backdrop-filter blur 18px saturate 140%, 18px radius, deep shadow plus 1px inner highlight). Header row shows "Stable fluids · 96²" and a live tabular-numeral fps readout in accent #8ad4ff. Two custom range sliders (Brightness 0.4–3, default 1.40; Dissipation 0.94–0.999, default 0.988) with a 2px gradient track and a white 14px thumb with a cyan glow that scales 1.25x on hover, each with a live output value. Actions row: "Clear" (zeroes dye and velocity), "Auto" toggle, and a small glowing swatch circle that shows the current dye hue. Buttons have a pointer-tracking radial highlight via CSS custom properties --mx/--my. Add a multiply-blended radial vignette overlay to darken edges. Entrance animations: title and HUD rise 14px and fade in with cubic-bezier(0.22,1,0.36,1). On phones under 480px the HUD stretches edge to edge and the hint moves above it. Mood: nocturnal, luminous, meditative — ink dropped into black water.

Design a single-file data-art dashboard titled "A portrait of one heartbeat" that visualizes the fictional but realistic vitals of "Subject 07". The mood is clinical yet beautiful: a deep navy stage (#050914 to #0a1226 with faint radial washes of mint and coral), ultra-thin system sans typography (font-weight 100–300, ui-sans-serif / system-ui / Helvetica Neue), tabular numerals everywhere, tiny uppercase labels with 0.24–0.32em letter-spacing in dim blue-white (rgba(233,240,255,0.32)). The accent color is mint #7df9c2 in Resting mode, soft coral #ff8a7a in Active mode, and periwinkle #9db4ff in Sleep mode; the accent is a CSS custom property swapped via a body[data-mode] attribute so the entire palette, grid color, gauge gradient, chart fill, and orb glow cross-fade together over roughly 0.8s. Layout: a 12-column CSS grid inside a 1440px max-width wrapper. Top header with the headline (the words "one heartbeat" in the accent color) and a pill-shaped segmented control with three buttons — Resting, Active, Sleep — where a glowing accent pill slides beneath the pressed button using left/width transitions with cubic-bezier(0.22,1,0.36,1). Cards are subtle glass panels: 1px rgba(255,255,255,0.07) border, faint top highlight line, 18px radius, vertical gradient from 3.5% to 1.2% white, staggered fade-up entrance animations. Card 1 (full width): Lead II ECG. A huge 100-weight BPM numeral (clamp 56–112px) with a small beating heart SVG whose animation duration equals 60/bpm seconds; a meta row with R–R interval, HRV (RMSSD), QT interval, and sweep speed. Below it, a canvas (devicePixelRatio-aware, capped at 2, resized on window resize) draws a fine 8px/40px ECG paper grid in the accent tint and a synthetic PQRST waveform composed from Gaussian bumps (P at phase 0.16, Q, tall R at 0.275, S, T at 0.52, tiny U) that writes left to right in real time onto an offscreen trace canvas with a 10px shadowBlur glow. A strip 14px ahead of the writing head is cleared each frame so the old trace disappears just before the pen returns, and a radial-gradient glow marks the pen tip. Heart rate wanders toward the mode's target (72 / 138 / 54 bpm) with respiratory sinus wobble and slow drift, and the readouts update at 4 Hz. Card 2: SpO2 ring gauge in SVG — a 270-degree track (stroke-dasharray on a circle rotated 135°) with a rounded-cap accent arc animated via stroke-dashoffset transitions, 55 procedurally generated tick marks (every ninth one major), a 48px thin numeral, "% SpO₂" and a perfusion-index label. Card 3: Respiration — a glowing accent orb that scales between 0.55 and 1.3 following a cosine breath cycle at the mode's breath rate (14 / 28 / 11 per minute) inside two thin concentric rings, with an Inhale/Exhale label and tidal volume. Card 4: three additional vitals (blood pressure, core temperature, skin conductance) with 100-weight numbers, a one-word trend, and a 2px progress bar whose width eases over 1.2s. Card 5 (full width): a 24-hour heart-rate area chart in SVG (viewBox 1000x240, preserveAspectRatio none) built from 288 five-minute samples generated by a seeded LCG with a circadian sine, sleep dip, a morning run spike, lunch bump, and evening gym spike; drawn as a polyline stroke with drop-shadow and a polygon filled by a vertical accent gradient fading to transparent, shaded sleep windows, hour and bpm gridlines, and a hover cursor with dot and text readout. Footer shows a disclaimer and a live clock. Respect prefers-reduced-motion by disabling entrance animations and the heart pulse. Responsive down to 360px: cards stack, the vitals card becomes a single column.

Create a self-contained HTML page that generates Bauhaus-style poster compositions inside an inline SVG. The page is split into two columns on a near-black ink background (#17161a): a left editorial column and a right stage that displays a portrait A-series poster (viewBox 420x594, aspect ratio 1:1.4142) on warm off-white paper (#f2ecdd) with a deep drop shadow and a faint feTurbulence paper-grain overlay multiplied on top. The strict palette is Bauhaus primary red #d8342b, blue #1e4f9e, yellow #f2c233, black #17161a, and the paper off-white. Left column typography: a small red rule followed by a letter-spaced uppercase kicker "Staatliches Bauhaus · Weimar · Dessau · Berlin"; a massive 800-weight uppercase geometric sans headline in Helvetica Neue / system sans, stacked in three lines — "KOMPO" in red, "SITION" as outlined text (transparent fill with a 1px paper text-stroke), and "NR. 01" in yellow where the number increments with every new composition; a caption "1919–1933 · Fourteen years of form follows function" in small tracked caps with tabular numerals; and a short lede paragraph about Kandinsky's shape-color questionnaire. A dashed vertical divider separates the columns. Four bold outlined buttons in a 2x2 grid — "New composition" (solid red, hovers to yellow), "Shuffle colors", "Toggle grid" (aria-pressed toggle), "Download SVG" — each with a tiny circle/square/triangle/bar glyph on the right and a wipe-in paper-colored fill that slides in from the left on hover with cubic-bezier(0.22,1,0.36,1). A seed readout in yellow sits beneath. Keyboard shortcuts: space or N for new, C for colors, G for grid. Composition algorithm: a 6-column by 9-row grid with 30-unit margins. Use a mulberry32 seeded PRNG so each seed is reproducible; the seed advances by a linear congruential step on every "New composition". Reserve one row (top or bottom, chosen by seed) for typography. Place one dominant 2–3 cell anchor shape (circle, square, or quarter-circle fan) in the first palette color; 1–3 thick bars (horizontal or vertical, thin or wide variants) in black; 3–6 medium shapes (circle, square, triangle, half-disc, ring) of 1–2 cells with random 90° rotations and random palette indices; 2–5 small accents (dot, inset square, triangle, 45° hatched square using an SVG pattern); and 1–3 diagonal lines spanning between random grid intersections at stroke widths 1.5, 3, or 6 with square caps. Occupancy is tracked in a map so shapes never overlap. Typography inside the poster: a bold uppercase title word chosen from German Bauhaus vocabulary (Form, Bühne, Licht, Rhythmus, Ordnung, Gleichgewicht, Raum, Bewegung, Kontrast, Fläche) aligned left or right, a 2-unit rule, a tiny "1919–1933" caption on the opposite side, and a micro-caption with the composition number and seed. Every regeneration re-renders all shapes with a staggered spring-eased pop animation (scale 0.2 and -25° rotation to identity, cubic-bezier(0.34,1.56,0.64,1), 0.9s, 60ms delay per shape via a --d custom property, transform-box: fill-box). "Shuffle colors" permutes the palette order and re-renders. "Toggle grid" fades in a red dashed overlay of the layout grid with monospace row letters and column numbers. "Download SVG" clones the inline SVG, strips the overlay and animation classes, sets xmlns and physical 420mm x 594mm dimensions, serializes with XMLSerializer, encodes it into a data:image/svg+xml URL, triggers a download named komposition-NN-seed.svg, and shows a yellow "Exported" toast. Stack the columns under 900px and single-column the buttons under 480px; disable the pop and settle animations under prefers-reduced-motion.

Build a full-viewport, self-contained HTML zen garden called "Karesansui". The entire screen is a canvas of fine warm sand: generate the bed as a diagonal linear gradient from #e9dcc3 through #e4d4b8 to #dccbab, overlay a seeded per-pixel grain texture (a 256px tile of randomly light or dark pixels whose alpha follows a power-2.4 curve so most grains are faint and a few are crisp, repeated as a canvas pattern), and add six large soft radial washes alternating warm-light and cool-shadow to suggest gentle undulation of the bed. Draw all of this once into an offscreen sand layer that is rebuilt on resize and devicePixelRatio changes (cap dpr at 2). Raking: dragging the pointer draws grooves onto a separate persistent groove layer. For each pointer segment, compute the perpendicular normal and offset it by (tine index − center) × 9px for 1, 3, or 5 tines, subdividing fast moves into 4px steps so strokes stay continuous. Each groove is embossed with three strokes: a 3.2px shadow stroke offset +1.1px toward bottom-right in rgba(96,74,46,0.30), a 2.2px highlight ridge offset −1.3px toward top-left in rgba(255,250,236,0.55), and a 1.6px groove floor in rgba(120,96,62,0.28), all with round caps — light comes from the top-left. Tines whose endpoints fall inside a stone (with a 6px pad) are skipped, so the rake lines stop at the stones. Stones: three draggable smooth stones as rotated ellipses (sizes proportional to min(viewport), rotations −0.35, 0.6, 0.1 rad) rendered each frame on top: a blurred contact shadow (shadowBlur 22, offset 6/10), a radial gradient body from warm charcoal (#5b544b / #4e463d / #655c52) to near-black, an 18%-alpha specular sheen ellipse near the upper-left, and a faint light sand ring at the base. On load, three concentric elliptical ripple rings are pre-raked around each stone and a slow 3-tine sine wave crosses the upper fifth of the garden so the scene is never blank. Pointer-down on a stone begins a drag (with offset preserved); pointer-down on sand begins raking. Ambient: an extremely slow shadow of an unseen branch drifts across the sand — drawn from the upper right with canvas filter blur(9px) (shadowBlur fallback) at 16% alpha in #3a2c1a: a 26px main limb bezier, two 12px secondary limbs, and five leaf-cluster ellipses, all swaying by sums of very slow sines (periods of roughly a minute to several minutes) so motion is felt rather than seen. Under prefers-reduced-motion the shadow is static and "Smooth sand" clears instantly. Typography and chrome: serif system stack (Iowan Old Style, Palatino, Georgia, ui-serif). Top-left heading "Karesansui" at clamp(22px, 2.6vw, 34px) with 0.08em tracking and an italic one-line meditation beneath it. Top-right vertical text label (writing-mode: vertical-rl) reading "枯山水 raked sand · three stones · one afternoon" in ink rgba(43,36,28,0.55) with 0.42em letter-spacing and a fading 1px rule. A small vermilion (#b3402a) seal square with the character 静 sits bottom-right, rotated −3°. Bottom-left toolbar: a pill group of three toggle buttons showing 1, 3, and 5 vertical tine glyphs (pressed state inverts to ink with sand-colored lines) and a "Smooth sand" pill button whose ink fill wipes in from the left on hover. Native cursor hidden and replaced by a custom SVG cursor — a faint circle plus tine lines matching the current rake width — whose ring turns vermilion while dragging a stone. A centered hint "drag to rake · move the stones · let it be" fades out on first touch. Inner box-shadow frame vignette on the whole viewport. All chrome fades up on load with cubic-bezier(0.22,1,0.36,1). Under 640px hide the paragraph, hint, and custom cursor and move the vertical label above the toolbar.

Create a self-contained HTML page presenting a museum-grade generative glitch portrait titled "Signal Loss". No photographs: the subject is a procedural face drawn to an offscreen 600x800 canvas from a seeded mulberry32 PRNG. Derive a palette from a random hue — background hsl(hue, 25–45%, 6–12%) fading to near-black, skin hsl(18–40, 30–50%, 45–75%) with darker shade and lighter highlight variants, hair from the complementary hue at 6–20% lightness, iris hue offset by 120–200°, lip a desaturated darker skin tone, and an accent rim light at hue+40 with 90% saturation. Paint: a gradient background with a radial accent rim; a dark torso half-ellipse; a gradient neck; a head ellipse (width 150–190, height 200–240, slight random tilt) shaded by a radial gradient from highlight to shade plus a jaw shadow gradient; one of three hair silhouettes (bob, long, cropped) with arced accent sheen strokes; two almond eyes with radial iris/pupil gradients, catchlights, lid strokes and thick round-capped brows; a soft gradient nose plane; a two-curve lip shape with a dark seam; warm radial cheek glows; and a final per-pixel film grain pass of ±11 levels via getImageData. Build three channel-isolated copies of the portrait by drawing it and multiplying with pure red, green, and blue. Live glitch pipeline, each animation frame, into a work canvas then presented on the visible canvas (which is devicePixelRatio-aware, capped at 2x, and resized with the frame): (1) RGB channel split — black fill, then the three channel canvases composited with "lighter" at horizontal offsets of up to ±18k px (occasionally doubled) and slight vertical jitter; (2) datamosh smearing — 1–7 horizontal bands copied from the previous frame's buffer at 55–95% alpha with small offsets, so motion bleeds; (3) horizontal slice displacement — up to 14 random slices 2–60px tall shifted up to ±220k px, some underlined with a 1.5px cyan (#3de9ff) or magenta (#ff3d9a) tear line; (4) macroblock corruption — 16px-aligned blocks either copied to wrong positions or filled solid with skin, acid green #c8ff3d, or hair color; (5) scanline noise — dozens of faint 1px white lines plus an occasional band of full random ImageData static at alpha 140; (6) occasional inversion of a band or the whole frame using the "difference" composite with white; (7) a radial vignette. k, the effective corruption, equals the slider intensity times (0.35 + burst), where burst is a randomized envelope with quick attacks every 0.4–3 seconds and a 0.9/s decay, so corruption arrives in violent bursts and settles. Reduce k to 35% under prefers-reduced-motion. Chrome: dark UI (#07070a body, #0d0d12 panel) with a fixed 3px repeating scanline overlay in overlay blend. Thin monospace labels (ui-monospace, SF Mono, Menlo, Consolas, Courier New) at 11–12px uppercase with 0.04–0.18em tracking. Top bar: a blinking acid-green status dot (magenta and static when frozen), "Signal Loss · live corruption", a subject hex readout 0xNNNN derived from the seed, and a running frame counter 0xNNNNNN. Center: the portrait in a 3:4 frame with a 12px panel matte, acid-green corner brackets, and a small REC ● tag (HOLD ■ when frozen). Right: a museum plaque with a serif title (Georgia / Iowan Old Style / Palatino, clamp 30–44px) that changes per subject from a list such as "Woman in Static" or "The Last Keyframe" with an italic "(subject NNNN)" suffix, a two-column meta list (Medium: Procedural pigment on unstable signal; Year 2026; Dimensions; Edition 1/1 with seed), and a short serif statement. Controls: a "Corruption intensity" range slider 0–1 with a 1px acid-to-magenta gradient track and a 6x18px rectangular thumb; two bordered buttons "Freeze frame" (aria-pressed toggle, turns magenta, relabels "Resume signal") and "New subject" with small square indicator dots that glow acid green on hover; and a six-cell readout grid with dashed separators showing cyan hex values for Slice, Split, Blocks, Smear counts, the skin Palette hex, and the Burst envelope. Keyboard: space toggles freeze, N generates a new subject. Footer bar: "Rendered entirely in-browser · no images · no network" and "Museum of Unstable Media · Gallery 4". Stack the plaque under the frame below 860px. Mood: eerie, beautiful, a face that refuses to stay in focus.

Build a single self-contained HTML page presenting a premium gallery of six collectible "holographic foil" trading cards called the Aurelian Codex, Series I: Six Elemental Wards. The page sits on a dark velvet background composed of layered radial gradients (#3a1a5c glow at the top, #2a0f3f at the lower right) over a vertical gradient from #170b24 to #0b0611, with a fixed pseudo-element of two repeating diagonal linear gradients at very low opacity to suggest velvet nap. The header uses a monospace eyebrow ("Aurelian Codex · Series I") in gold #d9b04c with 0.32em tracking, a large Georgia/Palatino serif headline with a vertical gold gradient (#fff6d5 → #d9b04c → #8a6a1f) clipped to the text, an italic word, a muted lavender lede (#b9a9d6), and a thin gold hairline rule. The gallery is a responsive CSS grid (auto-fit, centered) of six 280×400px cards (250×358 under 640px, 228×326 under 360px) with perspective. Each card is a 3D object with transform-style: preserve-3d and a front and back face using backface-visibility: hidden. The card's transform is driven entirely by CSS custom properties: --rx and --ry for tilt (clamped to ±16°), --mx/--my for pointer position as percentages, and --flip (0deg or 180deg) for the flip state. JavaScript listens to pointer events, computes the pointer position within the card's bounding box, and schedules a single requestAnimationFrame update per frame to write these variables. While the pointer is over the card the transition is a fast 80ms linear; on leave it eases back over 550ms with cubic-bezier(.2,.8,.2,1). When the card is flipped, the horizontal tilt is mirrored so it still follows the cursor. Each front face is layered: an art panel with a per-card radial gradient background and decorative inline SVG (flames, ripples, wind lines, crystals, lightning, orbits), a large inline SVG emblem with its own gradient that scales up slightly on hover, a rainbow foil layer (115° linear gradient of magenta/gold/aqua/blue/violet at 55% alpha, background-size 300%, background-position tied to --mx/--my ×1.6, mix-blend-mode: color-dodge, opacity 0.38 rising to 0.62 on hover), a sparkle layer built from five tiny radial-gradient dot patterns with different tile sizes whose background-position also follows the pointer in different directions (mix-blend-mode: screen), and a specular glare (radial gradient of white centered at --mx/--my, mix-blend-mode: overlay) that fades in on hover. A gilded frame is drawn using a masked gradient border (mask-composite: exclude) of #fff2c2/#d9b04c/#8a6a1f, with its background-position also following the pointer so the gold catches light, plus an inner 1px hairline. The title plate (name and 01/06 number), a pill "type" label (Fire · Legendary, etc.), and a stats panel with an italic flavor line and three bars (Might/Guard/Swift) whose fills scale in from the left when the card scrolls into view via IntersectionObserver. The six cards: Ignis the Ember Wyrm (fire, orange/red), Undine of the Still Deep (water, aqua/navy), Sylph Herald of the High Wind (air, white/sky blue), Gnomon the Patient Stone (earth, green/dark), Fulgur the Split Second (storm, yellow/violet), Umbra the Kept Shadow (void, purple/black). Each back face shows a gold serif name, a monospace "Found · location" origin line, a lore paragraph with a drop cap, a small gold sigil SVG, and a "tap to return" hint, on a dark plum background with fine diagonal gold crosshatch. Interactions: click/Enter/Space flips a card; on touch, a tap without drag flips while a drag tilts. An idle shimmer sweeps the foil highlight across one card every 3.2 seconds when nobody is interacting. prefers-reduced-motion disables tilt and transitions, leaving only the flip. Everything is inline; no external assets.

Create a single-file scroll-driven storytelling page called "Descent" that carries the reader from the sunlit surface of the ocean down to the Challenger Deep at 10,935 metres. The entire world is fixed to the viewport and updated from scrollY inside a requestAnimationFrame loop; the scrollable document is a sequence of seven sections (a hero, five ocean zones, and a finale), each tagged with a start and end depth in metres. The current depth is computed by finding which section the viewport centre is in and smoothstep-interpolating between that section's depth range, then lightly smoothed frame to frame so the readout ticks rather than jumps. The background is a full-screen linear gradient whose top and bottom colours are interpolated across keyed depth stops: 0 m #7fe0ef → #1f8fb8 (sunlit turquoise), 200 m #1a7fb0 → #0d3f78, 1,000 m #0b2a5e → #061234 (indigo), 4,000 m #050a1e → #02040e, 6,000 m #02030a → #000104, and pure black at 10,935 m. Above the fold sit a blurred, shimmering surface band, four skewed soft-light "god rays" that sway on a 14-second alternate animation, and drifting caustic pools; all three fade out via a --rays custom property as the depth passes about 220 m. The typography is Iowan Old Style / Palatino / Georgia for headings and body, with ui-monospace / Courier New for HUD numerals and labels; text colour is #eaf6ff with an accent of #9be7ff. A HUD is fixed around the viewport: a vertical depth meter at the left with ticks at 0, 200, 1,000, 4,000, 6,000 and 10,935 m and a glowing round marker that slides down proportionally; a top-right readout showing depth in metres (large), pressure in atmospheres (1 + depth/10), water temperature (piecewise interpolation 24 → 12 → 4 → 2 → 1.6 → 1.1 °C), and remaining sunlight (exponential decay 100·e^(−d/32)); a centred zone label naming the current layer; and a "Scroll to descend" hint with a falling line that fades after the first scroll. Nine inline SVG silhouettes drift in a fixed stage layer with parallax: a sardine school, sea turtle and manta ray near the surface; a glowing jellyfish and lanternfish with pulsing photophores in the twilight; a 640px sperm whale and an anglerfish with a luminous lure in the midnight zone; a crimson Atolla jelly in the abyss; and a pale snailfish in the trench. Each has a document-relative anchor (data-y), a parallax speed factor (0.45–0.9), a horizontal position, and its own idle animation (swim sway, bob/rotate, pulse). They fade in only while within 400px of the viewport. A full-viewport canvas draws bioluminescent motes (mostly aqua hue 175–205, some magenta 320–340) that rise slowly, twinkle sinusoidally, and carry a soft radial glow on larger particles using 'lighter' compositing; they fade in between 700 and 1,500 m and remain to the bottom. The canvas resizes with devicePixelRatio capped at 2 and re-seeds particle count by viewport area. Captions are frosted glass cards (rgba(2,10,24,.38), 18px radius, backdrop blur, 1px white hairline) that slide up and fade in via IntersectionObserver, each with a monospace zone tag, a serif heading (Epipelagic, Mesopelagic, Bathypelagic, Abyssopelagic, Hadal), two paragraphs of real oceanographic copy, and a facts row (light, temperature, pressure). The finale at the Challenger Deep is a transparent card with a quiet italic closing line: "It is cold, and it is dark, and it is quiet, and it is alive." Provide prefers-reduced-motion handling that stops idle animations and smoothing, and make the layout work from 360px to 4K by hiding tick labels and the zone label on narrow screens.

Design a single-file weather dashboard for a fictional coastal town called Port Ellery, using simulated data for five switchable conditions: Sunny, Cloudy, Rain, Snow and Storm. A pill-shaped segmented control in the header changes the condition; the whole page palette is driven by CSS custom properties on body[data-condition] and cross-fades over 700ms. Sunny is warm apricot (#fbe9c8 → #f4c98a → #e8a35c background, ink #3b2a14, accent #e07a1f, accent2 #f6b352); Cloudy is cool pewter (#e9edf2 → #cfd8e3 → #aab8c9, accent #5f7d9d); Rain is steel blue (#cfe0ee → #8fb1cf → #4f78a3, accent #2b6aa8); Snow is pale porcelain (#f7f9fc → #e3ebf5 → #c8d6e8, accent #6f8fb8); Storm is a dark slate (#3a4256 → #232a3c → #14192a, ink #eef1f7, gold accent #f0c45a) with translucent white cards. Cards are frosted glass (backdrop-filter blur 14px, semi-opaque white, 1px light border) with a 24px radius and a soft, coloured long shadow; they lift 2px on hover. Typography: ui-sans-serif/system-ui for UI text, Georgia/Iowan Old Style serif for the big temperature and gauge values, ui-monospace for hour labels and compass letters. The layout is a 12-column CSS grid: an 8-column Current Conditions card with a 260px hand-built animated icon and a huge serif temperature (up to 128px, tight letter-spacing) plus description, feels-like, high, low and precipitation; a 4-column Wind compass; an 8-column Next 24 Hours chart; a 4-column Comfort card with three radial gauges; an 8-column Seven Days row; and a 4-column Sun card. Below 980px the 8/4 cards go full width, below 560px everything stacks and the seven-day row shows four days. The animated icon is a single 200×200 inline SVG with layered groups toggled by class: a sun with a radial-gradient core that breathes and two rings of rays rotating over 40 seconds; two cloud shapes with a white-to-#d5dde8 gradient that drift horizontally at different speeds; five rain streaks falling on a staggered 1.1-second loop; five snowflakes with a swaying 3.4-second fall; and a gold lightning bolt that flashes twice in a 3.6-second cycle. Groups fade in/out with 600ms transitions when the condition changes. The hourly chart is generated in JavaScript from 24 temperatures: points are mapped into an 800×220 viewBox and connected with a Catmull-Rom-to-cubic-Bezier smooth path, filled with a vertical gradient of the accent colour fading to transparent, and the stroke draws itself in over 1.6 seconds using stroke-dasharray equal to its measured length. Max and min points get dots and labels; hovering shows a dashed cursor line, a dot on the curve, and a tooltip with hour and temperature. The seven-day row renders from data with mini icons referenced via <use> from an inline symbol sheet (sun, cloud, rain, snow, storm, partly) and a range bar showing each day's low–high span within the week's overall span. The wind compass has 72 procedurally generated ticks, N/E/S/W labels, a two-tone needle that rotates to the wind direction with a springy 1.4-second cubic-bezier, and a central disc with speed, unit, origin and gusts. Humidity, UV and pressure are half-circle arcs whose stroke-dashoffset animates to the value. The Sun card shows a dashed 180° arc with a lit portion and a glowing sun orb positioned by time of day; a range slider (0–1439 minutes) initialised to the current local time moves the sun, and sunrise/sunset times change per condition (e.g., short snowy day 07:32–17:00). Include prefers-reduced-motion handling that collapses all animations. No external assets, fonts or libraries.

Build a single self-contained HTML page that renders a generative gothic stained-glass window from a Voronoi diagram, set into a dim stone wall and casting coloured light onto the floor. The page is a full-viewport grid (header, scene, footer) with overflow hidden. The wall is pure CSS: a stone gradient from #3a3531 through #2b2724 to #1d1a18, brick courses drawn with 220×92px repeating linear-gradient mortar lines (#17140f) offset every other row, a faint diagonal grain, a warm radial glow near the window, and a heavy radial vignette darkening the corners. The floor is a fixed 26vh band at the bottom (#14110f → #0d0b0a) with faint perspective flagstone lines; a second canvas sits on it, transformed with rotateX(62deg) scaleY(-1), blurred 22px, saturated, at 55% opacity with mix-blend-mode: screen, and receives a downscaled copy of the window each frame so the glass appears to spill colour onto the stone. The window itself is a canvas sized to a 1:1.75 lancet proportion (max 640px wide) that fits the available space, with devicePixelRatio handling (capped at 2). The clip shape is an equilateral gothic arch: straight sides up to a springing line at 42% of the height, then two arcs of radius equal to the window width centred on the opposite springing points, meeting at a pointed apex. Seed points (26–70, scaled by area, with Poisson-like minimum spacing) are scattered inside the arch. Voronoi cells are computed by half-plane clipping: each cell starts as the bounding rectangle and is clipped by the perpendicular bisector against every other site (Sutherland–Hodgman against a line). Each cell is drawn as glass: a radial gradient from a tinted highlight (32% toward white) offset toward the site and up-left, through the base jewel colour, to a 55% darkened rim, suggesting varying glass thickness; faint white diagonal streaks clipped inside the pane at 9% alpha give the glass grain; a 6px round-joined lead line in #17130f surrounds every pane with a 1.2px pale highlight; the whole arch gets an 8px outer lead frame and a thin pale reveal line. Three palettes: Chartres (cobalt and ultramarine blues #1b2f8f/#233fa8/#1a4fb5/#2b64c8, ruby reds #8f1626/#a91f30/#c0392b, gold #d8b25c, cream #e8d6a2, violet #4b2a7a, white #f1f0e8, teal #1d6e6b), Autumn (rust #a33d13/#c25a1c, ambers #d9931c/#e8b23a, oxblood #7a2a12, olives #6b6a1f/#8e8a2e, umber #4d2b1a, straw #e9c98a, #b3471a, #5b3a1e, #d97c2b) and Emerald (forest to sea greens #0b4a2a/#0f6b3c/#158a4a/#1e8f7a/#2ea78c/#116d5a/#3fbf9a, deep teal #0d3c3a/#0a2f26, gold #c9a44b/#e6d38a, ivory #f0ead2). Palette buttons at the bottom carry small dot swatches and recolour existing panes without changing geometry; Regenerate (or the R key) scatters new points. The glass is rendered once into an offscreen layer; every frame the main canvas composites that layer and then paints a slow diagonal sheet of warm light (rgba(255,250,235) at up to 26%) sweeping across over a 9-second period using soft-light and screen compositing, clipped to the arch. Clicking inside the arch adds a new site: the previous glass layer is snapshotted and the new pane grows from its centroid to full size over 620ms with cubic ease-out on top of it, after which the full diagram is redrawn. Typography is Georgia/Palatino serif with an uppercase, letter-spaced title "Rose of Cells" (accent gold #d7b36a), an italic subtitle, and small uppercase button labels. Respect prefers-reduced-motion by freezing the shimmer and skipping the growth animation.

Create a single self-contained HTML page that tells an interactive, branching noir detective vignette called "The Castellane Photograph" on a typewriter. The scene is almost entirely black and white (#050505 background, ink #17161a on paper #d9d5cc, UI text #cfcbc3) with exactly one colour: an amber lamp glow, #ffb648. Build the room in pure CSS. A hanging lamp shade (dark trapezoid via clip-path with an amber underline and a blurred bulb) sits upper right, casting a huge soft radial amber pool over the desk with mix-blend-mode: screen and an occasional stepped flicker. A rain-streaked window with a dark cross mullion occupies the upper left: two repeating-linear-gradient layers of slanted pale streaks translate downward at 1.1s and 0.8s, drips of tiny radial ellipses fall on a slow loop, and a masked skyline with a few warm pinprick lights sits behind. A venetian-blind light pattern (repeating horizontal amber bars at 10% alpha, skewed, screen-blended, feathered by a mask) falls across a perspective-tilted desk with faint wood grain. On the desk edge an ashtray holds a cigarette with a pulsing ember, from which five blurred radial-gradient discs rise and expand on staggered 6–7.6 second eased loops, drifting left and right as they fade—the smoke. Centre stage is a sheet of paper (max 720px, ruled with faint 28px lines, a dark shadow at the top where it emerges from the platen, a fade at the bottom) sitting on a dark rounded platen bar. Story text is typed character by character using ui-monospace / Courier New in 28px line height: each character is a span with a variable delay of 28–74ms, plus 20ms after spaces, 140ms after commas, 380ms after sentence ends, 60ms around quotation marks, and a 3.5% chance of a "sticky key" that pauses 260–500ms and gives the letter a brief blur-and-drop animation. A blinking block cursor follows the text. When the text reaches a new line or paragraph, a carriage return fires: the sheet translates upward with a 180ms eased snap so the latest line stays just above the platen, and the whole paper jolts 7px left for 90ms. Space or clicking the paper finishes the current passage instantly. The story is a real branching narrative with thirteen nodes: a client named Vera Castellane arrives at 2:14 a.m. with a photograph of her brother Danny, dead eleven months in a cannery fire, alive last Tuesday. Choice 1 leads to the Halloran Hotel (fire escape or night clerk), choice 2 to the burned cannery or tailing Vera; middle chapters reveal a forty-thousand-dollar policy and that a watchman named Ortiz died in Danny's place. Four endings: being shot in room 4C ("She always did buy the cheap ones"), walking away in the rain, writing a false report for money, or calling Lieutenant Moss and standing at Ortiz's reburial. After each passage, two choices appear as physical typewriter keys—dark rounded buttons with a round serif-lettered keycap (1 or 2) that depress 5px on click and glow amber on hover; pressing the 1 or 2 keyboard key also chooses. A bottom bar shows the chapter label, keyboard hints and a Start Over button; a serif italic title card sits top right. Over everything lay a heavy elliptical vignette and a film-grain overlay: a 240px SVG feTurbulence fractal-noise tile encoded as a data URI, sized 200% of the viewport, at 16% opacity with mix-blend-mode: overlay, jittering and slightly rotating in 6 discrete steps every 0.9 seconds. Respect prefers-reduced-motion by disabling grain motion, rain, flicker, smoke, cursor blink and the carriage jolt. Responsive from 360px (smaller window, hidden ashtray, compact keys) to 4K.

Design a single-page, self-contained HTML poster in the Swiss International Typographic Style for a fictional lecture series called "Form Follows Function?" hosted by an Institut für Gestaltung in the winter semester 2026/27. The poster is a white sheet (#ffffff) with an A-series 1:1.414 aspect ratio, floating on a neutral grey desk (#d9d9d9) with a deep, soft drop shadow. All type is set in a Helvetica-style system stack ("Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui) and is strictly flush-left, ragged-right. Use exactly one accent colour, the Swiss red #e30613, alongside ink black #111111, mid grey #8a8a8a and hairline grey #e9e9e9. The layout is a rigorous 12-column, 24-row modular CSS grid with fluid gutters and margins. Every element is placed by grid lines: a small uppercase kicker top-left (institute name and semester), a series note top-right in grey, a colossal red numeral "12" occupying the upper-left two-thirds of the sheet at roughly 44% of the container width with tight negative letter-spacing and multiply blend mode, a three-line title ("Form / Follows / Function?") in bold and light weights overlapping the numeral, a black plate and a translucent red plate placed as semi-transparent overlapping blocks behind the type, a short lede paragraph under a 1.5px rule, a six-row lecture schedule with red dates and speaker names, a "Practical" meta block, a thin vertical rule separating lede from schedule, and a footer with a small red square mark. Interactions: a "Show grid" button fades in a red 12-column overlay plus a cyan 8px baseline grid drawn with repeating linear gradients, so the underlying structure is revealed. Hovering or focusing a schedule row smoothly expands a speaker abstract using a CSS grid-template-rows 0fr→1fr transition with a delayed fade-and-lift of the paragraph. A "Poster variant" button toggles a class that re-assigns every block's grid-column and grid-row to a second composition (title top, red plate left, black numeral rotated 90 degrees bottom-right, schedule on the left), and because grid-column, grid-row, transform, font-size and color are all in the transition list, the blocks glide FLIP-like into their new positions over 0.7s with a cubic-bezier(.2,.8,.2,1) ease. A third button switches the baseline from 8px to 12px. Buttons are outlined black with a red wipe fill on hover, uppercase, letter-spaced. Keyboard shortcuts G and V trigger grid and variant. On load the numeral counts up from 1 to 12 with cubic ease-out (skipped when prefers-reduced-motion is set). On phones the grid collapses to full-width stacked placements while keeping the 12-column skeleton.

Build a self-contained HTML page that recreates a dim 1970s living room wall holding three retro lava lamps, rendered almost entirely with CSS and a single inline SVG filter. The wall is a brown wallpaper (#3b2417 base, #5a3420 diagonal stripes, #8a5a2b corner medallions) produced by stacked radial and repeating-linear gradients in a 120px tile, darkened toward the edges by a radial vignette and warmed at the bottom by an amber light pool. A dark wood floor (#1d120b to #2b1a0f) with faint plank lines runs along the bottom. The title "groovy glow" is a huge lowercase italic Georgia headline filled with a vertical gradient (#ffe08a → #ff9f3d → #ff5c8a → #c74bff) via background-clip text, with a hard dark drop shadow and a soft orange halo; each letter bounces on hover with a springy cubic-bezier(.34,1.56,.64,1). Each lamp is a tall button with a 190:560 aspect ratio. The cap and base are brass: horizontal metallic gradients (#3d2a0a, #7a5516, #f6e3a1, #c99b3c) shaped with clip-path trapezoids, machined grooves via a repeating gradient in multiply mode, and a light-leak glow at the top of the base. The glass is a clip-path trapezoid filled with a dark fluid gradient; inside, a "goo" layer holds a molten pool plus five circular blobs of different sizes. The layer uses filter: url(#goo), an SVG feGaussianBlur (stdDeviation 10) followed by feColorMatrix with alpha row "0 0 0 22 -9" so blurred blobs merge and split like real wax. Blobs animate on a keyframe "rise" that squashes at the bottom, stretches while ascending to -330% and settles back down, with per-blob durations (8–20s) and negative delays for desynchronisation. A warm inner glow at the bottom of the glass uses screen blend mode; a heat shimmer layer uses an animated feTurbulence + feDisplacementMap filter in overlay mode. Three palettes: Sunset (#ffb347 → #ff2e2e), Orchid (#ff6ad5 → #7a1fff), Lagoon (#c6ff3d → #00c2a8), each with a matching fluid color and floor glow. Clicking a lamp toggles it off: the animation freezes at its current transform, then transitions over 2.8s to a squashed blob at the bottom, the glass desaturates and darkens, the glow, floor halo and shimmer fade out, and the label appends "· off". Pill-shaped serif control buttons offer "All on", "Lights out" and "Turn up the heat" (which shortens every blob's animation duration to 45%). The page is responsive from 360px to 4K and reduces animation under prefers-reduced-motion.

Create a full-screen, self-contained mandala drawing tool called "Kaleido". The stage is a fixed canvas covering the viewport over a dark charcoal radial gradient (#1a1b1e center to #0d0e10 edges) with an additional CSS vignette overlay darkening the corners by 55%. Typography uses ui-sans-serif/system-ui for labels and ui-monospace for status readouts; the brand "KALEIDO" sits top-left in light weight with wide 0.32em tracking, with a tiny uppercase subtitle in muted grey (#8b8c91). A monospace status block top-right reports the current symmetry, mirror state, stroke count and palette, highlighting values in warm amber (#f0b35a). Drawing: every pointer stroke is replicated N times around the viewport centre (N selectable as 6, 8, 12 or 16) and optionally mirrored across each axis, giving 2N copies. Segments are rendered as quadratic curves between successive midpoints (control point at the actual sample) for smooth interpolation, with round caps, a soft shadowBlur glow the same colour as the stroke, and 92% alpha. Brush width is inversely proportional to pointer speed (slow strokes are thick, up to 14px; fast strokes thin to 1.2px) and low-pass filtered so it changes gracefully. Colour either follows a slowly drifting hue in HSL (85% saturation, 62% lightness) that advances every sample, or steps through a chosen palette: Ember (#ffb347, #ff7a3a, #ff5e3a, #e0335a, #c81d5a), Lagoon (#a7f3d0, #5eead4, #22d3ee, #3b82f6, #1e3a8a), Gilded (#fff6d5, #f7dd9a, #f0b35a, #c98a2c, #7a4b12) or Ivory (whites and warm greys). Strokes are stored as point arrays so Undo can pop the last stroke and re-render, and so the drawing survives window resizes with proper devicePixelRatio scaling (capped at 3x). Auto-draw mode generates a mandala by itself: a small value-noise function drives angular velocity and radial wobble of a path that orbits the centre at one of five ring radii, each stroke living 120–280 samples with a random direction, base width and spread before the next ring begins, so layered rings of filigree accumulate over time. The UI is a floating bottom pill toolbar with frosted glass (backdrop blur 18px, 6% white fill, 14% white border, deep shadow) containing Clear, Undo, Save PNG, a Symmetry popover with chip buttons, a Mirror toggle, a Palette popover with gradient swatches (including a conic hue wheel for drift), and an Auto-draw toggle that turns amber when active. Popovers rise from the toolbar with a translate-and-fade transition. Save PNG composites the drawing over the background gradient onto an offscreen canvas and downloads it. Keyboard shortcuts: A auto-draw, C clear, Z undo, S save, M mirror, Esc closes popovers. On narrow screens button labels collapse to icons only.

Build a cinematic, full-viewport hyperspace sequence on a single HTML canvas with a monospace HUD overlay. The palette is pure black (#000000) with electric blue (#3d8bff), pale ice blue (#7fc4ff), near-white (#f4f8ff) and a violet accent (#8a5cff). Letterbox bars of about 6vh sit top and bottom, a radial vignette darkens the edges, and a faint 1px scanline pattern in overlay blend mode gives the frame a projected-film texture. Stars: between 350 and 1400 points (scaled to viewport area) live in a 3D field with random x/y spread and z from 200 to 3000. Each frame they advance toward the camera by a z-speed proportional to the square of the normalised speed; they are projected with a 420px focal length and drawn as round-capped lines from their current position to a point further back along the same ray whose distance grows with speed, so streak length is proportional to velocity. About 12% of stars are violet, 55% blue, the rest white. The canvas is not cleared but faded with a translucent black rectangle whose opacity decreases as speed rises, leaving longer luminous trails. All drawing uses the "lighter" composite mode over a radial core glow at the vanishing point that swells from a faint 40px disc to a blinding white-blue bloom at maximum speed. Tunnel: 14 octagonal wireframe rings spaced along z recede toward the horizon, each slowly spinning (faster at speed), stroked in blue with a matching shadowBlur glow, with violet struts connecting every other ring to its neighbour. When a ring passes the camera it wraps to the far end. Interaction: holding the mouse button, a touch, or the spacebar sets the target speed to 1 and the speed eases toward it with an exponential approach (faster ramp up than decay); releasing lets it coast down. Above 75% speed a random per-frame screen shake grows to 6px and a chromatic split appears, drawing red- and blue-offset copies of each streak that separate by up to 6px scaled by projection depth. Crossing 93% triggers a brief white flash; the speed readout gains a white glow at 97%+. HUD: system-ui/ui-monospace, light-blue text with a soft blue text-shadow. Corners show vector, gate id, hull integrity (drops slightly at max), drive state (IDLE / BURN / COAST / MAX), live frame rate, star count, distance travelled in light-years, elapsed time and shake magnitude. Centered at the bottom is the big thin-weight speed number in "c" units (0.00–9.99) with a gradient progress bar and a stage label (sublight / warp entry / hyperspace / threshold). A centred SVG reticle has two counter-rotating dashed rings (14s and 22s), tick marks and a pulsing center dot. The title "JUMPGATE" in 0.5em-tracked ultralight uppercase sits at the top with a prompt line that fades once engaged. Reduced-motion users get no shake and static reticle rings.

Create a self-contained HTML page presenting an original animated seascape in the manner of Edo-period ukiyo-e woodblock prints, inspired by but not copying Hokusai. The print is a 3:2 sheet (1200×800 viewBox inline SVG) on a dark walnut desk (#2a231d with a soft radial highlight) with a deep shadow. The paper is warm cream (#efe3c6) under a sky gradient running from pale straw (#e9dcb9) through grey-beige to a cool sea-grey (#9fb0b3) at the horizon, with horizontal paper fibres from an anisotropic feTurbulence filter and a final multiply-mode grain layer (fractalNoise at baseFrequency 0.9, saturate 0, alpha slope 0.18) laid over the whole image. Composition: a faint sun disc upper right, a distant snow-capped mountain (gradient from cream snow to slate #3f5470) centred behind the swells with wind-blown cloud strokes, and three layers of water rendered as SVG paths whose points are computed every frame by JavaScript as sums of three sine harmonics per layer with different speeds and directions. The front layer includes an asymmetric Gaussian "great crest" 330 units tall on the left that breathes slightly and is steeper on its leading edge so it appears to curl forward. Each wave is filled with a Prussian-blue gradation (#6f9cc2 → #3d6d9a → #1b3a5c for the back, #4a7ba8 → #2f5a86 → #132c47 for the middle, #3a6b98 → #1b3a5c → #0f2540 for the front) and overlaid with a second copy of the same path filled with a diagonal line pattern to imitate carved water stripes; the front wave also carries a dark 2.5px key-line edge in #0b1d33. Foam claws are generated at every detected crest: clusters of three to five curling fingers made of shrinking circles hooking in the wave's direction of travel, plus a foam rim along the crest, all in cream (#f6efdc); the claw size scales with crest prominence. Three small wooden boats with four hunched rowers sit on the back swell, translated to the wave surface and rotated by the local slope plus a gentle rocking sine. Forty-six foam flecks drift up and forward, fading in and out over their lifetime. Typography and marks: a vertical Japanese title "波の夢" in bold serif with upright orientation on the right edge, with a smaller mixed-orientation vertical romanised caption beside it, set in Iowan Old Style / Palatino / Georgia. A red seal stamp (#b8322a, ink-bleed filter from feMorphology dilate + slight blur) top-left bears "NAMI / NO / YUME / MMXXVI" in cream capitals with an inner cream border. Hovering the print shifts the colour blocks out of register over 0.9s: the blue block slips +5,-3, the foam block -4,+2, the key block +2,+3 and the seal -3,-2 with a 1-degree rotation, imitating a misprinted impression. Below the print are three italic serif buttons — "Calm sea" and "Rising storm" ease the global amplitude multiplier to 0.45 or 1.6, and "Hold the block" freezes time. Under prefers-reduced-motion the print renders a single static frame.

Design an award-style, single-page portfolio for a fictional independent art director named Ines Varga, based in Lisbon and Berlin. The page must be rigorously monochrome: near-black ink (#0a0a0a), warm off-white paper (#f5f4f1) and exactly one warm grey accent (#a39e94) used for secondary labels, hairlines and the ghost layer of the name. No other hues are permitted anywhere. The mood is restraint, whitespace and motion finesse — everything should feel like a printed catalogue that has learned to move. Typography uses only system stacks: a humanist serif ('Iowan Old Style', Palatino, Georgia, ui-serif) for the giant name, project titles and pull quotes; ui-sans-serif / 'Helvetica Neue' for body copy; and ui-monospace / 'Courier New' for all small uppercase labels with 0.14em letter-spacing. The hero is a full-viewport section anchored to the bottom containing the name "Ines Varga" at clamp(64px, 17vw, 300px) with tight negative tracking (-0.045em) and line-height 0.86. Each letter is a separate span; on hover the letters shift subtly up/down/sideways by 1–2px in alternating directions and a warm-grey ghost copy of each letter (via ::before with attr()) fades in offset by a few hundredths of an em, giving a misregistered-print feeling. Above the name is a mono meta row ("Art Director — Independent" / "Lisbon / Berlin"); below is a hairline rule, a one-sentence positioning statement and a "Scroll" indicator whose thin line pulses in scaleX. The header is fixed with mix-blend-mode: difference so it inverts over the black footer; nav links get a left-to-right underline reveal. Sections are numbered with a mono index ("01 — Index", "02 — Practice", "03 — Contact") sitting on the same baseline as a large serif heading, separated by a solid 1px ink rule. The Selected Work section is a list of six rows (Nocturne Editions, Museu do Silêncio, Halbton Magazine, Aurel Watches, Ordinary Forms, Tide Table Records), each a 4-column grid: two-digit number, serif title, mono category tag, mono year. On hover a black background wipes down (scaleY from top), text inverts to paper, and the row indents 18px. Simultaneously a 320×400px floating "image" appears — a pure-CSS abstract composition unique to each project (radial discs, vertical stripe rhythm, conic checker, horizon with horizontal bars, diagonal lattice, concentric rings). The preview follows the cursor with lerp smoothing (factor ~0.09) offset to the upper right, tilts slightly based on cursor velocity, and scales from 0.9/-4deg to 1/0deg when active. The cursor is custom: a 14px black disc with mix-blend-mode difference, lerped at 0.28 toward the mouse. Over project rows it morphs into an 84px solid disc containing the mono word "View" that slides up into place; over links it grows to 40px. All custom cursor/preview behaviour is disabled below 720px and on coarse pointers (native cursor restored). The About section is a two-column grid: a large serif pull statement with a 2em text-indent and an italic grey phrase ("Design is not decoration. It is the discipline of leaving things out until only what matters remains — then giving that thing room to breathe."), beside two paragraphs of biography aligned to the bottom. Below is a definition-list of four facts (Founded, Based, Clients, Availability) in a responsive auto-fit grid with hairline rows. The Contact section is centred with a giant serif link "Let's make something quiet." with a 2px underline that draws in from the left on hover. The footer is solid ink with paper text: an infinite linear marquee (32s) of services in the serif — Art Direction · Brand Identity · Editorial Design · Typography · Exhibition Design · Motion · Consulting — separated by grey middle dots, duplicated via JS for a seamless loop, plus a mono meta row with copyright and coordinates. All sections use an IntersectionObserver-driven fade-and-rise reveal. The easing everywhere is cubic-bezier(0.22, 1, 0.36, 1). Respect prefers-reduced-motion by collapsing all animation and transition durations to near zero and making revealed elements visible immediately.

Build a self-contained, playable mini synthesizer called "NEON//OSC" in a synthwave visual language. Background is near-black violet (#05030a) with panels of deep aubergine (#0d0916). The three accent colors are hot pink (#ff2d95), lavender (#b78bff) and electric blue (#2de2ff); dimmed text is #4a3f66 and primary text is a pale lilac (#efe6ff). Add two very soft fixed radial glows (pink from the bottom, blue from the top) and a subtle 3px horizontal scanline overlay in overlay blend mode across the entire page. Typography is entirely system: ui-monospace/Menlo/'Courier New' for the logo, labels and readouts, ui-sans-serif/system-ui for body text. The logo "NEON//OSC" is set large in bold mono with a pink→lavender→blue horizontal gradient clipped to the text and a pink drop-shadow glow; beneath it a tiny letterspaced subtitle "POLYPHONIC WAVETABLE · MK II". Top right is a status pill with a dot that turns electric blue and blinks once the AudioContext is live, reading "Audio live · 48 kHz". Layout: a header, then a two-column "scopes" grid — a wide oscilloscope panel on the left and a square circular spectrum panel on the right (both rounded 14px, 1px lavender border at 18% alpha). Below that a responsive auto-fit grid of four control cards: Waveform (four segmented buttons with tiny inline SVG icons for sine/saw/square/triangle; the active one glows pink with a gradient fill), Filter Cutoff (an 84px skeuomorphic rotary knob with a blue indicator line, a conic-gradient progress ring masked to an arc from 225° spanning 270°, and a large blue readout like "4.0k HZ · LOWPASS"), Space (two pill toggles — "Feedback Delay" and "Sub Oscillator" — whose thumb springs across with an overshoot easing and glows pink when on), and Play (keyboard hints with kbd elements). Below that a full-width piano keyboard with 10 white keys (C4–E5) and 7 black keys positioned absolutely at 62% white-key width, styled as dark gradient slabs. Pressed keys fill with a pink→lavender gradient (blue→lavender for black keys) and cast a large neon glow; they nudge down 2px. Audio: The AudioContext is created lazily on first pointerdown or key press. Signal path: per-voice OscillatorNode (type from the selector) → per-voice GainNode envelope (12ms exponential attack to 0.35, decay to 0.22 sustain, 350ms exponential release) → shared BiquadFilter lowpass (Q 3, frequency from knob, 80–12000 Hz mapped logarithmically) → split to a dry gain and a DelayNode (0.32s) with a feedback gain of 0.42 and a wet gain toggled 0/0.5 → master gain → DynamicsCompressor → AnalyserNode (fftSize 2048, smoothing 0.82) → destination. The Sub Oscillator toggle adds a sine one octave down at half gain into each new voice. Changing the waveform retunes any held voices live. Z and X shift octave (1–7) and release all notes; window blur releases all notes. Input: white keys map to A S D F G H J K L ;, black keys to W E T Y U O P. Mouse/touch use pointer events with glide — dragging across keys releases the previous and triggers the new one via elementFromPoint. The knob supports drag (180px per full sweep), wheel, and arrow keys with proper ARIA slider attributes; toggles are role="switch" with keyboard support. Visualizers: the oscilloscope draws the AnalyserNode's float time-domain data as a 2.2px pink→lavender→blue gradient stroke with a pink shadow blur over a faint 8-column grid. Before audio is unlocked, or when no notes are held, it draws a synthetic animated version of the selected waveform so the panel is alive from the first frame. The circular spectrum places 96 rounded bars radially around a ring at 26% of the panel's minimum dimension, bar index mapped to FFT bins with a power curve so bass gets more resolution; each bar has its own blue→lavender→pink gradient and a glow proportional to magnitude. A pulsing radial core in the center brightens with average bass energy and shows the current octave and waveform name in mono text. Before unlock, bars gently undulate with layered sines. Both canvases size to their container × devicePixelRatio (capped at 3) and re-fit on every frame/resize. Under prefers-reduced-motion the idle animations throttle and micro-transitions are shortened.

Create an interactive physics laboratory page dedicated to the chaotic double pendulum, styled as an elegant antique scientific instrument. The background is warm charcoal (#1b1a18) with slightly lighter charcoal panels (#232220, #2c2a27). All accents are metallic: brass (#b8955a) and light brass (#dcc08a) for primary elements, copper (#b86f43) and light copper (#d9925f) for the secondary "twin" system and divergence figures. Text is cream (#e9dfcb) with a dimmed cream (#a89e8a) for captions. Hairlines use brass at 25% alpha. Typography is a thin system serif — 'Iowan Old Style', Palatino, Georgia, ui-serif — for headings, labels (in italics, e.g. "mass m₁", "length ℓ₁", "gravity g", "damping γ") and prose, with ui-monospace/Menlo/'Courier New' for numeric readouts and a small letterspaced uppercase brass "instrument plate" in the header reading "RK4 · Δt 1/240 s · Lagrangian". Layout is a two-column grid: a large simulation stage on the left (minimum 60vh) and a 340px laboratory sidebar on the right separated by a vertical brass gradient hairline; below 900px the layout stacks. The header holds the title "Double Pendulum Laboratory" with an italic subtitle "Chaos Instrument No. 7". The stage is a full-bleed canvas sized to its container × devicePixelRatio (capped at 3) and re-fit on resize. Draw a brass pivot with a hatched ceiling line, two dashed faint reference circles at radii ℓ₁ and ℓ₁+ℓ₂, brass-toned rods, and bobs rendered as radial-gradient metal discs (highlight top-left, brass midtone, dark edge) whose radius scales with √mass. The second bob leaves a fading rainbow ribbon: store up to N trail points with a hue that advances with simulation time; draw segment-by-segment with HSL stroke, width growing from 0.6 to 3.8px and alpha rising quadratically toward the newest point so the ribbon tapers and fades at the tail. A top-left mono HUD shows t, total energy E and (when the twin exists) Δbob in copper. Top-right brass buttons: Pause/Resume (primary, gold-tinted), Reset, and "Add pendulum" in copper which toggles to "Remove twin". Buttons have a 2px hard drop shadow, brass border glow on hover and a 1px press-down. Physics: integrate the standard Lagrangian equations of motion for θ̈₁ and θ̈₂ (with Δ = θ₁ − θ₂ and denominator 2m₁ + m₂ − m₂cos2Δ) using fourth-order Runge–Kutta at a fixed Δt of 1/240 s via an accumulator so simulation is frame-rate independent. Subtract γ·θ̇ᵢ for damping. Compute total energy T + V for the HUD. "Add pendulum" spawns a copper-tinted twin system with θ₁ offset by exactly 0.001 rad and identical velocities; its rainbow trail is hue-shifted 180°. The divergence readout is the Euclidean distance between the two second bobs in metres, shown in exponential notation when below 1 mm. Dragging on the canvas grabs whichever bob is within 30px (defaulting to bob 2), pauses integration, zeroes velocities, clears trails, and sets θ₁ (atan2 from pivot) or θ₂ (atan2 from bob 1) from the pointer; the twin mirrors with its offset. Release resets t and resumes. Space toggles pause, R resets. Sidebar: a "Parameters" section with brass-thumbed range sliders (copper→brass gradient track) for m₁, m₂ (0.2–4 kg), ℓ₁, ℓ₂ (0.3–1.6 m), g (0.5–25 m/s²), damping (0–0.5), trail length (50–2000 points), each with a live mono output. A "Readout" grid of six mono cells: θ₁, θ₂, ω₁, ω₂, Steps, Divergence (copper). A "Notebook" panel styled like ruled paper — repeating 28px horizontal rules in faint brass, a vertical copper margin line — containing the equations of motion rendered as styled HTML text: italic brass symbols, CSS flex fractions with brass rule, sub/superscripts, and dot/double-dot accents built with ::before pseudo-elements; followed by the RK4 update formula and an italic note explaining that two systems 0.001 rad apart diverge exponentially. Under prefers-reduced-motion, default trail length drops to 200 and button transitions are removed.

Compose a full-viewport, fixed vaporwave scene — a 1990s-nostalgia digital sunset — using only CSS, inline SVG and a small amount of JavaScript. The exact palette is hot pink #ff71ce, cyan #01cdfe, mint #05ffa1, violet #b967ff and pale yellow #fffb96, over a deep night purple (#12002a) with sky gradient stops of #0a0020, #2b0a5e and #7a2a9e. Typography is system only: a bold system serif (Palatino / 'Iowan Old Style' / Georgia) for the chrome title, ui-monospace for the LCD readouts and Japanese-style spaced captions, and system-ui for the faux-OS window. Sky: a vertical gradient from near-black indigo through violet to hot pink at the horizon (63–66%), then a hard cut to night purple where the ground begins. Scatter ten tiny radial-gradient stars in white, yellow, cyan and violet on the upper 66%, twinkling with a slow alternating opacity animation. A soft pink horizon haze band with blur(6px) sits across 60–72%. Sun: a circle of min(46vmin, 380px) centred at 20% from the top, filled with a vertical gradient from pale yellow through orange (#ffb347) to pink and violet. Cut horizontal stripes out of its lower half using mask-image: solid until 52%, then alternating transparent and opaque bands that grow wider toward the bottom (52–55, 63–67, 73.5–78.5, 83–89, 92–100 transparent). A separate glow element behind it carries two layered box-shadows (pink 80px/30px spread and yellow 200px/80px). Both drift down 4vh over 40 seconds and back. Ground: a CSS 3D plane (.floor) positioned at the horizon (top 66%), spanning 300% width and 130% height, with transform-origin at its top edge and rotateX(72deg) inside a .scene with perspective 520px and perspective-origin 50% 40%. Its background stacks a bright cyan vertical centre line, a repeating cyan vertical grid (2px every 80px) and a repeating pink horizontal grid (2px every 80px). Animate background-position of the horizontal layer from 0 to 80px so the lines scroll toward the viewer seamlessly; the duration is a CSS custom property --grid-speed (default 4s). Overlay a .floor-fade gradient adding pink glow at the horizon and darkening toward the bottom edge. Add a rotating checkered accent: a 60vmin circle at the bottom centre with a repeating-conic-gradient violet checkerboard (12% cells), rotateX(74deg), radial mask to feather edges, spinning 360° every 40s at 50% opacity. Palms: two inline SVG silhouettes (a curved trunk and seven frond paths) in night purple with a faint pink drop-shadow, anchored at bottom 33% at each edge, ~22vw wide, gently swaying ±1.3° from their base; the right one is mirrored with scaleX(-1) and offset in phase. Title: the full-width characters "ＬＵＮＡＲ　ＷＩＮＤ" as an h1 centred at 46% height, clamp(30px, 8.5vw, 132px), bold serif with .04em tracking. Chrome effect: a vertical gradient white → cyan → dark teal (#063a55) at 49% → hard white at 51% → pink → violet, clipped to text with background-clip: text, plus a 1px semi-white text-stroke, and three stacked drop-shadow filters (4px violet extrusion, 8px deep purple extrusion, and a 22px cyan glow that shimmers to a pink glow over 6s). Below it a mint mono subtitle "Ｓ Ｉ Ｄ Ｅ　Ｂ　·　１ ９ ９ ５" with wide letterspacing and mint text-shadow. Top right, a small mono caption "ＭＥＭＯＲＩＥＳ / ＯＦ　ＴＯＭＯＲＲＯＷ". Bust: an inline SVG classical bust (plinth, shoulders, neck, an ellipse head, hair cap, ears, and four thin violet strokes suggesting brows, nose and lips) filled with a linearGradient of white → lavender → violet "marble", positioned right of centre at 28% from the top, floating ±22px with ±2° rotation over 9 seconds and glowing violet via drop-shadow. Retro window: bottom-left, a 320px Windows-95-style panel — #c0c0c0 body with bevelled 2px borders (#fff top/left, #404040 bottom/right), 1px black and 6px translucent offset shadows; a title bar with a navy→blue gradient, a pink/cyan gradient icon, title "Lunar Wind Player" and three bevelled _ □ × buttons; a menu row (File View Options Help with underlined first letters); a black LCD display in mono mint text with pink labels showing NOW PLAYING, SPEED, GRID mode and an HH:MM:SS clock; a striped navy progress bar that fills over 20s; three bevelled buttons ▶ Play, ◂◂ Slow, ▸▸ Fast; and a two-cell status bar. Play toggles a playing state — pressed-in bevel, label becomes ❚❚ Pause, aria-pressed updates — and jumps the grid to "RUSH" speed; pause returns to "CRUISE". Slow/Fast step through four levels (DRIFT 12s, CRUISE 4s, RUSH 1.4s, HYPER 0.5s) by setting --grid-speed on :root, updating the LCD's speed multiplier and label. The clock runs only while playing. On fine pointers, a lerped mouse parallax subtly shifts the title (with slight rotateY), bust and sun in opposite directions. Under prefers-reduced-motion all keyframe animations and the parallax loop are disabled; on phones the caption hides and the bust shrinks.

Design a digital Art Deco gala invitation for a fictional event, "The Meridian Ball", hosted by The Meridian Society at the Halcyon Observatory on Saturday the 20th of December 2026 at nine o'clock. The page is a single centred card on a near-black page (#070605) with a card face of warm ink (#121010). The only accent is metallic gold built from a multi-stop gradient — #7a5c10 → #c9a227 → #f3dc8a → #c9a227 → #8a6a14 → #e2c46a at 135° — with #c9a227 as the flat gold for lines and small type, #f3dc8a as highlight and champagne (#f5e6c4) for body text. Typography is exclusively a tall system serif — 'Palatino Linotype', Palatino, 'Iowan Old Style', 'Book Antiqua', Georgia, ui-serif — with very wide tracking: the title "THE MERIDIAN BALL" in uppercase at clamp(30px, 7.2vw, 66px) with .22em letter-spacing, an italic gold sub-line "a night at the zenith" at .5em tracking, and 9–11px uppercase eyebrow labels tracked to .4–.5em. Everything must be strictly symmetrical and composed with Gatsby-era restraint. Structure the card as a 3D flip: a .stage with perspective 2200px containing a .card with transform-style: preserve-3d and a 1.3s cubic-bezier(.65,0,.2,1) rotateY transition. The front and back are .face elements with backface-visibility hidden; the back is absolutely positioned and pre-rotated 180°. JavaScript measures both faces and sets a shared min-height so the flip never clips. Both faces carry a deep drop shadow and an inset vignette. Framing: each face has a .frame with a 2px gold border, a 1px inner border inset 6px (::before) and a 1px faint outer border 8px outside (::after) to form a stepped geometric border. Above and below the frame run 10px chevron bands made from two crossed repeating-linear-gradients (45° and 135°, 2px gold lines every 10px) masked to fade at the ends. In each of the four corners place an inline SVG fan motif — four concentric quarter-arcs with six radiating spokes from the corner, stroked in gold at 1.4px — mirrored with scaleX/scaleY/scale(-1) so the corners are symmetric. Centrepiece: a sunburst of radiating lines behind a medallion. The .burst is a min(70vw, 300px) square; two overlaid .rays layers use repeating-conic-gradient (one: 1.2° gold lines every 7.5°; the other: 0.6° pale-gold lines every 15°, offset 3.75°) masked radially so they are hidden inside 34% and fade beyond 70%. They rotate very slowly in opposite directions (90s and 140s). The medallion is a 56% circle with a dark radial fill, 2px gold border, an inner 1px ring, a double halo via box-shadow (8px ink, 9px gold) and a soft gold glow; inside is an inline SVG eight-point compass star with cross ticks and a large shimmering serif "M". Copy and layout on the front: eyebrow "The Meridian Society requests the pleasure of your company"; burst/medallion; the shimmering title; a rule with a rotated gold square diamond flanked by gradient hairlines; an italic lede ("Beneath the great glass dome of the Halcyon Observatory, as the orchestra tunes and the last light leaves the skyline, we gather once more to toast the turning of the year in gold."); a three-column details block (Date / Hour / Venue) with gold hairlines top and bottom, small tracked labels, serif values and italic notes; a tracked dress-code line "Black tie & gold — masks welcome"; and the RSVP button — an outlined gold pill-less rectangle with diamond glyphs whose gold gradient wipes in from the left on hover, inverting the text to black. Below the frame a tracked footer "Admit two · Carriages at two". Shimmer: every gold text element with class .shimmer uses the gold gradient at 200% background-size, background-clip: text, and a 7s ease-in-out background-position sweep from 0% to 100% and back, giving a slow metallic sheen. Back face: eyebrow "Kindly reply before the first of December", shimmering heading "YOUR REPLY", rule, lede, then a reply form: an underlined Name input, a two-cell radio group ("Accepts with pleasure" / "Declines with regret") styled as gold-bordered tiles that fill solid gold when selected (:has(input:checked)), a Party select (one/two guests) and a Dietary notes input. "Send reply" composes a personalised italic thank-you line that fades up ("Wonderful, <name> — two places will be kept beneath the dome." or a regretful variant); "Return" flips back. Focus is moved to the first field after the flip completes. Background: a fixed full-window canvas of faint champagne bubbles — 40–90 depending on viewport area — each a thin pale-gold ring with a tiny highlight dot, rising at 0.25–0.85px/frame with a sinusoidal drift, respawning at the bottom; the canvas honours devicePixelRatio (capped at 2) and resizes. Under prefers-reduced-motion the bubbles render once and stop, the rays and shimmer freeze, and the flip is instant. Below 520px the details stack to one column, chevron bands hide and the title tracking tightens.

Design a single self-contained HTML page called "Terrazzo Pattern Lab — Composite Stone Studio" that behaves like a small material-design laboratory for generating seamless terrazzo textures. The page should feel like a warm, sunlit gallery: a paper-toned background (#f4efe6) with a faint SVG turbulence grain overlay multiplied on top, soft radial washes of blush (#e8b9a8) in the top-left and sage (#8a9a7b) in the bottom-right, and charcoal ink text (#2b2620) with muted secondary copy (#6b625a). Headings are set in a classic serif stack (Georgia, 'Iowan Old Style', Palatino, ui-serif) with tight letter-spacing and an italicised accent word coloured terracotta (#c4674a); body and control labels use ui-sans-serif/system-ui; seeds, codes and footnotes use ui-monospace with wide tracking and uppercase. Layout: a header with a monospace eyebrow ("Composite stone studio · No. 036"), a large "Terrazzo Pattern Lab" title and a short lede, followed by a two-column grid (collapsing to one column under 960px). The left card holds "The Slab": a 512×512 canvas presented as a square tile with rounded corners, an inner hairline, a deep soft drop shadow, a soft-light diagonal gloss overlay, and a small frosted pill saying "seamless · wraps on all edges". The right card, "Mix Formula", holds the controls: range sliders for chip density (30–420), chip size (0.4×–2.2×) and speckle (0–100%) with gradient tracks running terracotta → ochre (#d2a34a) → sage and round ink-outlined thumbs that scale up when dragged; a 2×2 grid of palette buttons (Milano, Nordic, Tokyo, Bold), each showing five little chip swatches, a serif name and a one-line description, with an aria-pressed selected state; a pill-shaped colour picker for the base binder with the live hex code beside it and a "Palette default" reset; and two pill buttons, a filled ink "Regenerate pour" and a ghost "Download PNG", each with an inline SVG icon and a sliding sheen highlight on hover. Below both spans a full-width card "Applied to Objects" containing three CSS-drawn product mockups on cream gradient plinths with blurred shadow ellipses: a stoneware mug (body, elliptical rim with a dark coffee interior, and a handle built from a masked border), a phone case (rounded rectangle with an inset camera island with two lenses and a side button), and a canvas tote (arched straps plus a bag body with an italic "studio" label). All terrazzo surfaces read the canvas texture via a CSS custom property --tile-url populated from canvas.toDataURL(), tiled at 190px so the seamlessness is visible. Mockups lift and tilt slightly on hover. Generation algorithm: a seeded mulberry32 PRNG drives everything so each seed is reproducible (shown as "seed 0000" in the card header). Fill the base colour, add forty faint radial mottling blobs, then scatter chips using rejection sampling with toroidal distance so chips do not overlap heavily. Each chip is an irregular 5–8 sided polygon with random squash and rotation, painted nine times (centre plus eight neighbours offset by ±W/±H) to guarantee a seamless wrap. Chips get a soft offset shadow, a linear gradient from a lighter to darker shade of their palette colour, a hairline stroke, and, for larger chips, a translucent white vein curve. Speckle adds up to ~2,600 tiny grains in chip colours plus black and white. Finish with a diagonal polish sheen gradient. Palettes: Milano (#efe7db base; #c4674a, #8a9a7b, #d2a34a, #2b2620, #e8b9a8, #f6f1e7), Nordic (#e6e8e4; slate/mist greys), Tokyo (#f3ece4; #b52f2f vermilion, #1c1c1e ink, #d9c7a3 tatami, #e0857f, #6a7f6a), Bold (#12100e charcoal; #ff6b4a, #ffd23f, #2ec4b6, #e05297, #f2f0ea, #7a5cff). Interactions: every slider and the colour picker regenerate live; choosing a palette also resets the base colour; "Regenerate pour" picks a new seed and flashes the tile; keyboard R re-pours and S downloads; Download saves a PNG named terrazzo-<palette>-<seed>.png. Cards rise in with a staggered entrance animation. All animation and transitions are disabled under prefers-reduced-motion.

Build a single self-contained, full-viewport HTML page titled "Northern Lights — Lake Inari, 68.9° N" that renders a calm, realistic aurora borealis night scene entirely on a 2D canvas, with a minimal glass UI floating on top. The mood is hushed and immersive: a near-black indigo sky (#02030a at the zenith fading through #061021 to #0b1a30 at the horizon), a frozen lake occupying the bottom 30 % of the screen, a jagged black pine treeline (#02040a in front, #050a14 for a softer distant row) along the horizon, and curtains of light dominated by aurora green (#3cf5a0, hue ≈150–158) with violet (#a86bff, hue ≈285) and pink (hue ≈330) fringes at the top edges. Text is cool fog white (rgba(226,236,255,0.72)) with mint highlights (#c8ffe4). Aurora construction: render to a low-resolution offscreen canvas (about one third of the screen width) and upscale with smoothing so the light is naturally soft. Define four curtains, each with its own hue, saturation, drift speed and direction, spatial frequency, height and alpha. For every column of the offscreen canvas compute a brightness from a four-octave value-noise fBm sampled along x with a time offset, mixed with a slow horizontal sine sway and a slower "ribbon" sine, raised to a power of 1.8 so bright folds stay rare; compute a bottom edge that undulates around 72 % of the sky height and a top edge that reaches up by the curtain's height scaled by noise and the intensity setting; then fill a 1.6-pixel-wide vertical linear gradient that is transparent at the top, mid-alpha in the middle, brightest just above the bottom edge and transparent again at the base. Composite curtains with 'lighter' onto the offscreen canvas and draw that onto the sky with 'screen'. Add a faint green glow band rising from the horizon. Sky details: a few hundred stars sized by area, most tiny, 8 % larger, 20 % warm-tinted (#ffe7c4) and the rest blue-white (#dfe9ff), each twinkling on its own sine phase and dimming slightly as intensity rises. Occasionally (about once every eight seconds) spawn a shooting star: a short white gradient streak that travels at a shallow angle and fades over roughly a second. Lake: paint a dark water gradient (#08121f → #020409), then reflect the aurora by drawing the offscreen aurora canvas in 4-pixel horizontal slices from the horizon downward, sampling upward from the bottom of the sky image (mirror, slightly compressed by 1.3×), offsetting each slice horizontally with two summed sines that grow with depth to create a wavy distortion, and fading alpha with depth. Draw the treeline mirrored the same sliced way with a weaker wobble so the silhouettes shimmer. Sprinkle a dozen thin, slowly wandering horizontal highlight streaks for ripple glints. Finally draw the treeline itself, generated once by walking across the width and stamping pine shapes made of a trunk plus four stacked triangles whose heights and spacing are driven by 1-D noise. Snow: a light field of small white discs (0.6–2.2 px) falling at 12–38 px/s with a gentle sinusoidal drift, recycled to the top when they leave the screen, toggleable. UI: top-left a monospace eyebrow "Field observation · Kp 5" with a pulsing green dot; top-right the live local clock. Bottom-left a serif caption block (Georgia / Iowan Old Style / Palatino) with the headline "The sky breathing over Lake Inari" (italic mint accent word), a short scientific paragraph explaining oxygen green and high-altitude violet emissions, and a monospace meta row (68.9° N 27.0° E, −23 °C, wind calm, cloud 0/8). Bottom row: a frosted pill (blurred dark glass, hairline mint border, lifts on hover) holding an "Intensity" range slider 0–100 (default 62) with a gradient track from mint through green to violet and a glowing white thumb that springs larger when dragged, the numeric output, and a "Snow" toggle pill with aria-pressed; bottom-right a tiny wavelength legend (Oxygen 557.7 nm / Nitrogen 427.8 nm). The caption fades up on load. A CSS vignette darkens the corners. Handle devicePixelRatio (capped at 2), debounce resize and rebuild stars, snow and treeline; under prefers-reduced-motion render a single static frame and skip the shooting stars and snowfall.

Create a single self-contained HTML page called "Origami Fold Menu — Kami & Fold Paper Studio": a clean, minimal site shell whose only ornament is a five-section navigation that unfolds like a packet of creased paper using CSS 3D transforms. The page background is warm off-white (#f7f3ec) with a faint radial highlight at the top; text is deep brown-black ink (#2a2622) with muted secondary copy (#7a716a). Headings use a classic serif stack (Georgia, 'Iowan Old Style', Palatino, ui-serif) with an italic coral accent word; labels and metadata use ui-monospace with wide uppercase tracking; body copy uses ui-sans-serif/system-ui. Structure: a slim header with a small inline SVG logo (a folded triangle in kraft, dark kraft and coral) reading "Kami & Fold" and a pill toggle button labelled "Unfold menu" that shows an animated crease icon (two overlapping squares that rotate into a diamond when expanded). Below, a centred intro with the eyebrow "Navigation experiment · No. 038", the headline "A menu you unfold", and a short paragraph explaining the concept. The rest of the page is a stage with a 3D scene: five paper panels, each 176 px wide and three segments of 150 px tall, in kraft (#c9a677, back #a9865a), cream (#f3e9d6, back #d9ccb2), coral (#e8846b, back #c4644e), sage (#9fb096, back #7d8f75) and cream again. Geometry: the panels are nested hinge elements. Panel n is a child of panel n−1's hinge, positioned at left:100 % with transform-origin at its left edge and transform-style: preserve-3d, so when closed the panels alternate rotateY(±180°) and stack behind the first panel like a Z-folded concertina, each pushed back 1.5 px with translateZ in the rotated frame to avoid z-fighting. Inside every panel, the first segment is a fixed "cover" tab; the second and third segments hang from hinge elements with transform-origin at their top edge and fold up behind the cover with alternating rotateX(∓180°). Every segment has a front and a back face using backface-visibility: hidden, so the reverse side of the paper (darker shade) is what you see mid-fold. Paper texture comes from an SVG feTurbulence fractal-noise data URI multiplied over each face plus a faint repeating-linear-gradient of fibre lines; content segments also carry a soft inset shadow along the crease. Lighting: each content segment has a gradient overlay (dark at the crease edge lightening to a faint white sheen) whose opacity is a CSS custom property --f set to sin(angle) by JavaScript, so the paper darkens as it swings through 90° and clears as it lies flat; each panel likewise has a horizontal overlay driven by --fy from its rotateY angle. A blurred radial "ground" shadow sits beneath the stack. Animation: a small tween engine in JavaScript drives every hinge angle with cubic easing via requestAnimationFrame and writes the transform strings and lighting variables. Opening: panels 2–5 swing out in sequence (760 ms each, staggered 140 ms), then each panel's second segment drops (620 ms) followed by its third 170 ms later, with the panels staggered 140 ms left to right. Closing reverses: segments fold up first (right to left), then panels fold back onto the stack. Hovering the stage tilts the whole stack up to ±8° toward the pointer on fine-pointer devices. The scene scales down proportionally on mid-size screens; below 720 px the horizontal accordion is dropped (hinges become static blocks) and the five panels stack vertically while keeping their vertical paper folds. The menu unfolds itself once after load so the piece is seen. Content: 01 Studio (atelier in Kyoto since 2014; links Our story, People, Press), 02 Work (41 commissions; Lighting, Retail, Stage sets), 03 Process (crease, score, fold; Crease patterns, Materials, Workshops), 04 Journal (short essays; three dated titles), 05 Contact (address and hours; email, map, newsletter). Each third segment carries a tiny rotated monospace stamp naming the paper weight, e.g. "kraft 120g". Accessibility and keys: the toggle uses aria-expanded and aria-controls; each cover tab is a real button with aria-expanded controlling its own content segments; folded elements get visibility: hidden so they leave the tab order; Escape closes and refocuses the toggle; M toggles; visible focus rings; all transitions and the tilt are suppressed under prefers-reduced-motion, where the tweens complete instantly.

Build a single self-contained HTML page titled "Pixel Art Studio — Sprite Editor": a compact but complete pixel-art editor with a beautiful modern dark interface. The canvas of the app is near-black (#0d0e13) with two soft radial glows, violet (#8b7cff at 18 %) top-left and mint (#5ff2c1 at 12 %) bottom-right; panels are #151720 with hairline borders rgba(255,255,255,0.07) and 16 px radii; secondary surfaces are #1c1f2a; text is #e9ecf5 with muted #8a90a6; accent violet #8b7cff, accent mint #5ff2c1. Typography is ui-sans-serif/system-ui for labels and ui-monospace for coordinates, hex codes, shortcut keys and small-cap section headings. Every control is a pill: rounded-full buttons that lift 1 px on hover, compress on press, show a violet-tinted pressed state with an inset ring when active, and carry a tiny dark keycap showing their shortcut. The primary "Export PNG ×10" pill is a violet gradient with a coloured drop shadow. Layout: a sticky, blurred header with a 3×3 pixel logo mark, the title, and Undo / Redo / Clear / Export actions. Below, a three-column grid (220 px tools rail, fluid canvas stage, 300 px palette-and-preview rail) that collapses to two columns under 1100 px and one column under 720 px. The tools rail holds Pencil (B), Eraser (E), Fill bucket (G), Eyedropper (I), Line (L), a divider, and a Mirror X toggle (M), each with a small inline SVG icon; a Canvas card with a grid-size select (16, 32 default, 64) and a zoom slider (4–28 px per cell) with a gradient track and springy white thumb; and a Shortcuts card. The stage card shows a monospace status bar (hover coordinates, a colour dot with the active tool name, grid dimensions and zoom), a scrollable dotted-grid well containing the drawing canvas with a deep drop shadow, and a status line. The right rail has the Palette card (current colour tile with glow and hex, a 4×8 grid of round-cornered swatches that scale up on hover and show a white ring when selected, plus a native colour input with a "Use" pill) and the Preview card (1× and 2× actual-size canvases with image-rendering: pixelated, and a large square "hero" preview with a "CRT display" toggle). Editor behaviour: the drawing surface is a canvas sized N×zoom CSS pixels with a devicePixelRatio-scaled backing store so cells stay crisp; it draws a two-tone checkerboard for transparency, the filled cells, a faint grid when zoom ≥ 8, a mint centre line when mirroring, and a white hover outline (plus a mint mirrored outline). Pencil and eraser interpolate between successive pointer positions with Bresenham so fast strokes have no gaps; Line shows a live preview from the press point and commits on release; Fill is a stack-based flood fill over the contiguous region of identical colour (with a second pass for the mirrored region when Mirror X is on); Eyedropper picks a cell's colour then returns to the previous tool, and Alt-click or right-click samples at any time. Mirror X writes every edit to x and N−1−x. Undo/redo keep up to 80 snapshots; a snapshot is taken at pointer-down and only kept if the stroke changed something. Changing grid size resamples the current art with nearest-neighbour so nothing is lost. Export renders the sprite to an N×10 canvas with imageSmoothingEnabled = false and downloads it as sprite-NxN-x10.png. Keyboard: B E G I L M, Z undo, Shift+Z redo, Ctrl/Cmd+Z and Ctrl/Cmd+Y, [ and ] to zoom. The palette is the 32-colour PICO-8 set (16 standard: #000000 #1d2b53 #7e2553 #008751 #ab5236 #5f574f #c2c3c7 #fff1e8 #ff004d #ffa300 #ffec27 #00e436 #29adff #83769c #ff77a8 #ffccaa, and the 16 extended: #291814 #111d35 #422136 #125359 #742f29 #49333b #a28879 #f3ef7d #be1250 #ff6c24 #a8e72e #00b543 #065ab5 #754665 #ff6e59 #ff9d81). The starter document is a 16×16 pink slime character (outline #2b1d3a, body #ff77a8, highlight #ffccaa, white eyes #fff1e8 with navy pupils #1d2b53, blush and mouth #be1250) scaled 2× onto the 32×32 grid so the canvas is never empty. The CRT mode wraps the hero preview in curved corners, an inset vignette, multiplied horizontal scanlines, faint RGB sub-pixel stripes, a diagonal glass reflection and a subtle stepped flicker, and applies contrast/saturation/slight blur to the image. A floating toast pill at the bottom confirms actions. Heavy animation (the CRT flicker) and transitions are disabled under prefers-reduced-motion.

Create a single self-contained, full-viewport HTML page titled "Living Landscape — Animated Topographic Contours, Sheet 040" that looks like a survey map sheet whose terrain is quietly alive. A canvas fills the screen. JavaScript computes a heightfield on a coarse grid (cell size about 1/200 of the longer viewport edge, minimum 5 px) using five-octave 3D Perlin-style gradient noise with a light domain warp, where the third noise axis is time so the whole landscape drifts and ridges migrate. From the heightfield derive a hillshade by taking finite-difference gradients and dotting against a light from the upper left; write the shaded colour per cell into an ImageData buffer on an offscreen canvas and draw it stretched across the viewport with smoothing so it reads as a soft tinted relief. Then trace contours with marching squares at 26 evenly spaced levels (every 40 m from a 180 m datum), linearly interpolating crossing points along cell edges and resolving the two saddle cases with the cell's centre value. Minor contours are 0.7 px hairlines; every fifth level is an index contour drawn at 1.6 px and labelled with its elevation in metres: choose a few segment midpoints per level at least 150 px apart and away from the edges, rotate the text to the local line direction (never upside down), paint a small background-coloured rectangle first so the line appears to break for the label, then draw the number in bold 10 px system sans. Recompute and redraw at most 30 times per second; a "Flow" slider (0–100, default 35) scales the time step and a Pause/Resume button (also Space) freezes it. Cursor spotlight: while the pointer is over the map, draw a large soft radial highlight around it, a thin circle with four crosshair ticks in the accent colour, and a small boxed monospace reading of the interpolated elevation beside the cursor. A glass readout card in the bottom-left shows Elevation (m), Slope (degrees, from the gradient using 2.5 m per pixel at 1:25 000) and Aspect (eight compass points) in large serif numerals, plus a black-and-white scale bar labelled 1 km, a legend distinguishing 40 m and 200 m index contours, and the Flow and Pause controls. Palettes (buttons in the top-right, keys 1/2/3; each swaps the canvas colours and, via a data attribute on body, the CSS variables of the UI): Paper & Ink — warm paper #f3eee3 with hillshade as gentle sepia lightness variation, minor lines rgba(43,42,40,0.42), index lines rgba(43,42,40,0.92), labels #2b2a28, accent rust #b5482b; Terrain — hypsometric tint interpolated through valley green (62,110,74), grass (122,150,82), tan (200,178,122), brown (150,112,78), grey (120,104,92) and snow (242,239,230), multiplied by the hillshade, with dark brown lines and accent #8a4b2a; Night Blueprint — deep blue #0a1a33 brightened by hillshade, minor lines rgba(127,209,255,0.42), index lines rgba(217,236,255,0.95), labels #d9ecff, accent #7fd1ff. A faint 120 px CSS graticule is blended over the canvas (multiply on light palettes, screen at night). Cartographic UI: a top-left title card with a thin inner border like a map neatline, a monospace header row "Sheet 040 · Series L-7 / 1 : 25 000", the serif headline "The Living Landscape" with an italic accent word, and a two-sentence explanation of the contour interval. Labels and legend use small caps (font-variant: small-caps) with wide letter-spacing; numerals use tabular figures. In the bottom-right sits an inline SVG compass rose: two concentric rings with tick marks, a four-point star with alternating dark/light halves, a smaller rotated four-point star behind it, a rust north needle, a centre dot, and serif small-caps N, S, E, W; the rose sways ±1.2° over 12 seconds. All cards use translucent palette-matched glass with backdrop blur and 6 px radii. The layout is a fixed grid with the title and palettes on top, the readout and compass at the bottom; under 720 px the description and compass hide and the palette buttons become a bottom row. Handle devicePixelRatio (capped at 2), debounce resize (rebuilding the grid), and under prefers-reduced-motion render a static field that still responds to the cursor and palette changes without animating.

Create a single self-contained HTML page that renders a rotating spiral galaxy made of tens of thousands of particles on a full-viewport 2D canvas, presented as a quiet astronomical observatory instrument. The page is pure black (#000000) with a very faint starfield and a dozen distant, softly blurred background galaxies (tilted ellipses drawn as radial gradients) pre-rendered to an offscreen canvas. A radial vignette darkens the corners. The galaxy itself is built from roughly 42,000 points (drop to ~14,000 when prefers-reduced-motion is set). Eighteen percent form a spherical bulge using Gaussian scatter; the remainder are distributed along two logarithmic spiral arms using r = a·e^(bθ) with b ≈ 0.28, an exponential density falloff in radius (mean 0.32 of the disk radius), and angular scatter that widens with radius so arms are crisp near the core and diffuse at the rim. Each particle stores radius, base angle, vertical height (disk thickness ~0.06 scaled by radius), size and brightness. Colors are mapped by radius: warm white/yellow in the core (#FFEBBE to #FFCD82), blue-white along the arms (#CDD7FF to #91C3FF), and faint red-magenta dust at the outer edge (#AA7882 to #D25058). About six percent of arm particles are "hot" oversized blue knots at full brightness. Rotation is differential: angular velocity ω = 0.35 / (0.25 + r), so the inner disk visibly outruns the outer arms and the spiral winds over time. Project the 3D disk to 2D with a yaw rotation about the disk normal followed by a tilt rotation about the screen X axis; depth slightly scales point size. Render with globalCompositeOperation "lighter" for additive glow, drawing every particle as a pre-rendered 32px radial-gradient sprite tinted per quantized color and cached in a Map. Above the disk, a "nebula dust" layer of ~90 large soft radial-gradient ellipses follows the arms (warm peach near the core, cobalt and wine-red farther out) at 6–9% alpha, plus a warm radial core glow. HUD typography: designation line in a tiny uppercase monospace with 0.32em tracking (#6D7787), the galaxy name "NGC 7741 Meridian" in a large serif (Iowan Old Style / Palatino / Georgia) with the word Meridian italic in amber (#FFD9A0) and a soft amber text-shadow, and an italic serif classification paragraph. The bottom-left stats strip (Particles, Distance in Mly, Diameter in kly, Tilt, Zoom) uses tabular monospace numerals with the first three counting up over ~3.2 seconds with a quartic ease-out. The HUD fades in over 2.4 seconds. Top-right holds a small SVG compass whose needle rotates with the yaw. Right edge has four round glass buttons (zoom in, zoom out, pause, reset) with blur backdrop, scaling to 1.12 on hover and glowing amber at the border. Interactions: pointer drag changes yaw (horizontal) and tilt (vertical, clamped between near face-on and near edge-on); mouse wheel and two-finger pinch zoom between 0.35× and 6× with eased approach; Space toggles rotation; reset returns to the default oblique view. The canvas must handle window resize and devicePixelRatio (capped at 2). Mood: contemplative, precise, slightly reverent — a planetarium display at midnight.

Build a single self-contained HTML page that is a lovingly rendered 1950s Bakelite table radio you can actually tune. The page background is a deep smoky brown radial gradient (#2D2119 to #0A0705) with a tiny brass-toned brand line above the set. The cabinet is a rounded walnut box (42px top corners, 26px bottom) built from a layered gradient of walnut tones (#7A4525, #5A2F18, #3A1C0E) with a faint repeating diagonal grain, an inner top highlight, a heavy drop shadow, and a diagonal glossy sheen overlay. Inside sits a cream face panel (#EFE2C4 to #D9C79F) with soft inset shading, laid out as a CSS grid: a wide dial strip across the top, a woven speaker grille on the left, a display window on the right, and a knob row along the bottom. The dial is a dark glass slot (#1C1108) ringed by a thin brass bezel, lit from below by a warm amber radial glow (#FFB347) that flickers very slightly. Along it run frequency numbers (600–1500 kHz, monospace, amber with glow), fine tick marks made from repeating-linear-gradients, and italic serif city names in two staggered rows: Madrid, Luxembourg, Hilversum, Paris, Lisbon, Vienna, Stockholm, Athens, Warsaw, Oslo. A thin red needle (#C8322A, with a diamond head and glow) marks the frequency; when the needle lands within a station's capture range the city label lights white with a strong amber halo. The speaker grille is a rounded brass-framed panel whose woven fabric is made entirely of three stacked repeating-linear-gradients (two diagonal thread patterns over horizontal tan stripes #C9A97A / #A3835A), with a small inline SVG brass emblem in the centre. The display window is a black glass panel containing a canvas that draws chunky amber-tinted noise (half-resolution ImageData, random values shaded through orange-brown) with a slow rolling scan band; between stations it shows "searching" in tracked monospace. When a station locks, the noise fades to 8%, and a station card fades and rises into view: city name in a large tracked serif (#FFF1D6), frequency line in monospace (#E29A3D), and a fictional italic programme description for that night's broadcast. Beneath is a cream VU meter (inline SVG with an arc scale, red overload zone, small monospace numerals and a black needle) whose needle jitters randomly in static and swings gently on sine waves when a station is tuned. The knob row has a small fluted volume knob (left) and a large fluted tuning knob (right). Knobs are near-black radial gradients with a repeating-conic-gradient ridge ring masked to the rim, a cream indicator line, and a brass hover halo; they rotate via pointer drag around their centre (angle delta) or mouse wheel, and are keyboard accessible with arrow keys. Between them, ten slender vent slots glow amber from within with staggered breathing animations, and a blurred orange radial glow leaks behind them as if from warm valves. A pill-shaped cream "Power" button enables optional Web Audio: filtered white noise whose gain rises as signal falls, a 50 Hz sine plus 100 Hz triangle mains hum, and a soft low-passed sine pad with LFO vibrato that fades in when locked on a station. Audio is created only on click and stays silent until powered. Typography uses Iowan Old Style / Palatino / Georgia for labels and copy, and a system monospace for numerals. Mood: warm, tactile, nostalgic, a living room at dusk. Layout collapses to a single column under 640px with the display above the grille and the vents wrapping under the knobs. Respect prefers-reduced-motion by disabling flicker and vent breathing and throttling the noise redraw.

Create a single self-contained HTML page that reimagines Conway's Game of Life as a nocturnal botanical garden bed, presented like a plate from an old horticultural journal. The whole viewport is a canvas over a dark soil background: a radial gradient from warm umber (#241911) through soil brown-black (#16100B) to near-black (#0C0805), with a heavy radial vignette and a faint SVG fractal-noise grain overlay (data URI, overlay blend) for a paper-and-earth texture. Cells are not squares. Each living cell is a soft rounded bloom drawn from a pre-rendered sprite: a wide low-alpha radial glow, a filled circle body, a small white specular highlight, and for cells older than eight generations five faint petal discs around the centre. Sprites are rendered with additive "lighter" compositing so neighbouring blooms bleed light into one another. Colour is a function of age: seedling moss green (#7FB069) for the first two generations, blending to coral (#F28E7B) by age eight, to violet (#A687D1) by age twenty, and to elder gold (#E7B95A) by age forty-five. Newborn cells appear at 70% scale for a one-frame sprout. When a cell dies it leaves a brown stain (rgba 120,80,60) that decays by 7% per frame, so gliders drag fading trails through the soil. The grid wraps at all four edges (toroidal), and the cell size adapts from 11px on phones to 18px on 4K displays, preserving existing cells on resize. Typography is that of a botanical journal: Iowan Old Style / Palatino / Georgia. Top-left shows "Plate XIV · Cellular Horticulture" in tiny tracked monospace, the title "The Garden Automaton" (with Automaton italic in gold) at up to 40px, and an italic caption explaining the three rules as loneliness, company and crowding. Top-right holds Generation and Population counters in large tabular numerals with a tracked monospace label and an italic "blooms" unit. Bottom-left is an italic legend with four glowing colour dots. Bottom-right is the control cluster: a tempo slider (1–30 generations per second, gold thumb with glow), pill buttons for Pause/Grow, Step and Clear bed, and a "Seed drawer" button that pops a frosted-glass drawer scaling up from its corner. The drawer contains six seed packets laid out two-up, each with a serif name and an italic tagline: Gosper's glider gun, Pulsar, R-pentomino, Acorn, Wild garden (random 30%), and Diehard. Choosing one clears the bed, stamps the pattern in the centre (the gun offset to the upper left), closes the drawer and starts the simulation. Interaction: click a cell to toggle it, drag to paint living cells, a thin cream ring follows the hovered cell. Space toggles growth, Escape closes the drawer. The simulation uses a fixed-step accumulator so tempo is independent of frame rate, with Uint16Array age grids swapped each generation. Under prefers-reduced-motion the default tempo drops to four per second and UI transitions are removed. Mood: hushed, nurturing, slightly mystical — a greenhouse by lantern light.

Design a single self-contained HTML page for a fictional design studio called Apiary, whose entire navigation is a tessellated honeycomb filling the viewport. The background is a deep amber radial gradient (#4A2606 at the upper left through #2A1604 to #150A02), and a slow diagonal light sweep — a screen-blended linear gradient band of pale honey (#FFD27A at 16–28% alpha with a bright #FFF0C8 core) — glides across the whole comb every 14 seconds with a sinusoidal ease. JavaScript builds the grid: hexagon width adapts to viewport (64px on phones, 82px on tablets, 100px on laptops, 132px on wide monitors, 180px at 4K), height is width × 1.1547, rows are offset by half a step (odd-r layout) with a 4px gap and 3px vertical gap so the comb reads as wax walls. Each cell is an absolutely positioned div clipped with clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%), filled with a dark wax gradient (#6B3A0A to #3D2005) overlaid with a diagonal highlight, plus an inner rim pseudo-element inset 3px with the same clip. The body has perspective 1200px and the comb preserves 3D. On pointer move, every hex computes its distance to the cursor; within a radius of 3.2 hex widths a smoothstep falloff drives translateZ lift up to 34px, a scale from 0.96 to 1.02, brightness up to 1.55, saturation up to 1.3, and a subtle rotateX/rotateY tilt (up to 14 degrees) toward the cursor. Because each hex has a 0.5s cubic-bezier(.2,.8,.2,1) transition on transform and filter, the effect ripples outward and settles like a wave through wax. When the pointer has been idle for four seconds a phantom cursor wanders the comb on a Lissajous path so the surface never goes still. Six hexes forming a ring around the centre cell are navigation buttons: Work, Studio, Journal, Lab, People, Contact. They are honey-gold (#F0A83A to #C47A18) with a pale radial sheen, a thin-stroke inline SVG icon (briefcase, house, notebook, flask, people, envelope) and an uppercase system-sans label tracked 0.22em in near-black ink (#1C0F03). Hover brightens them; keyboard focus adds a pale ring. Clicking a nav hex opens its content panel by morphing: the panel is positioned exactly over the clicked hex (same size, same hexagonal clip-path), then in 0.7s it grows to a centred 880×620 card while its six-point clip-path interpolates into a rectangle and border-radius rounds to 24px. Meanwhile the rest of the comb dims to 22% opacity and flattens, the clicked hex fades out, and the hint line disappears. The panel's content fades up after 0.35s: a tracked kicker ("Cell 03 · Notes from the comb"), a large serif title up to 64px, two or three paragraphs of real studio copy (projects, people, journal essays, lab experiments, contact details) and a tag list bulleted with tiny hexagons. A round close button rotates 90 degrees on hover; Escape or the button shrinks the panel back into its cell and restores the comb. Typography: Iowan Old Style / Palatino / Georgia for headings and body, ui-sans-serif / system-ui for labels. The brand block sits top-left with "Apiary Studio" (Studio italic in light honey) and a tracked tagline. Under prefers-reduced-motion the sweep is static, transitions are near-instant and the idle wander is disabled. Mood: warm, tactile, sun through a jar of honey.

Create a single self-contained HTML page that autoplays a 72-second cinematic title sequence for a fictional film called "The Long Meridian". The whole page is black. Centred in the viewport is a letterboxed 2.39:1 frame sized to fit either the full width or the height minus a 96px control strip, with a deep black glow around it; everything outside the frame stays pure black. Inside the frame, layers are stacked: drifting fog, a thin horizon line, cast names, the title block, a lens-flare streak, a rolling credits column, an end card, a film-grain canvas and a heavy radial vignette. Fog is three enormous radial-gradient ellipses in cool grey-blue and warm grey (rgba 120,125,140 and 150,140,120 at ~40% alpha), blurred 40px, screen-blended, each animated on 38–52 second alternating drifts so the mist never repeats visibly. A one-pixel horizon at 58% height scales in from the centre during the cast chapter, gold-to-bone gradient, and fades before the credits. Film grain is a canvas at one-third resolution rendering random grey values 90–210 every frame, laid over at 16% opacity with overlay blending. Every layer receives a shared slow camera drift (sin/cos translate of a few pixels and a 1.2–1.6% breathing zoom) scaled by depth so fog moves most and the title least. Chapters: Dark (0s), Cast (5s), Title (24s), Credits (36s), End (66s). During Cast, four names fade up and settle over 0.9 seconds, hold 3.2 seconds and fade out, each with a thin sans kicker ("starring", "with", "and", "as the Cartographer"): Maren Solheim, Adaeze Okonkwo, Tomasz Wierzbicki, Juno Castellanos. Names are wide-tracked uppercase serif (Iowan Old Style / Palatino / Georgia, 0.32em tracking) in bone (#E8E2D6), kickers in a thin system sans at 0.5em tracking and 55% alpha. At Title, "THE LONG MERIDIAN" appears from a 6px blur while its letter-spacing expands from 0.10em to 0.38em over five seconds with a cubic ease-out; a bright light sweep travels through the letters using a gradient clipped to text (bone → white → bone, background-size 300%, position animated from 100% to -100%); a horizontal lens-flare streak with a soft gold and blue halo and a bright core passes behind the title from left to right while rotating from -4 to +4 degrees, its opacity following a sine bell. Above the title "A film by Ilse Varga" and below it "Autumn · MCMXCIX" fade in sequentially. Credits then roll upward for thirty seconds: ten role/name pairs (Casting, Music, Costume Designer, Production Designer, Editor, Director of Photography, Executive Producers, Produced by, Written by, Directed by) with tiny tracked sans roles above wide-tracked serif names, closing with "A production of Meridian Pictures · Nordlys Film". At End an italic serif closing line appears — "The meridian does not end. It only turns back toward the sea." — with a round outlined Replay button whose letter-spacing widens and fills bone on hover. Beneath the frame, a fixed control strip at 55% opacity (full on hover or focus) shows chapter buttons across the top (Dark, Cast, Title, Credits, End; the current one lit), a one-pixel timeline with chapter tick marks, a glowing round playhead and a bone progress line, and a transport row with timecode, Pause/Play, Replay and total duration in tracked uppercase sans. Clicking or dragging on the track seeks; arrow keys nudge two seconds; Space toggles play; R replays. The entire sequence is rendered from a single time value so scrubbing is exact and deterministic. Under prefers-reduced-motion the fog animation stops, camera drift is disabled and grain updates every fourth frame. Mood: hushed, cold, expensive; a northern art-house drama.

Design a single-file, fully offline color palette studio that feels like a light, airy design tool from a premium creative suite. The whole page should be tinted by the currently selected hue: the background is a soft near-white built from CSS custom properties (--h, --s, --l) so that as the user moves the base color, the page's warm/cool cast, borders, shadows, and headline italic accent all drift toward that hue with 500–700ms eased transitions. Default base is hsl(212, 62%, 52%) which renders as #3C7BD9. Cards are translucent white (rgba(255,255,255,0.78)) with a 14px backdrop blur, 18px radius, a 1px hue-tinted hairline, and a layered soft shadow (a 1px contact shadow plus a 40px ambient shadow tinted by the hue). Typography: a serif display headline in 'Iowan Old Style' / Palatino / Georgia with negative letter-spacing and an italic word in the base color, body text in the system UI sans stack, and all color values in ui-monospace. Layout is a two-column grid (1.15fr / 1fr) at 1200px max-width that collapses to a single column under 900px. Left column: a "Base color" card containing a large 16:10 hue/saturation plane (horizontal rainbow gradient from red through yellow, green, cyan, blue, magenta back to red, overlaid with a vertical grey-to-transparent gradient so saturation falls toward the bottom) with a 26px white-ringed draggable puck that scales up while dragging, plus a Lightness range slider whose track is a live gradient from dark to light in the current hue. Below it a "Harmony" card with five pill chips (Analogous, Complementary, Triadic, Split-complementary, Monochrome) — the active chip fills with the base color and glows — and a row of five tall (3:4) rounded swatches labeled Primary, Secondary, Accent, Surface, Ink. Swatches show HEX bold plus rgb() and hsl() in a monospace caption over a subtle gradient scrim, the text color flipping to dark on light swatches. Each swatch pops in with a staggered translate/scale entrance keyframe whenever the palette recomputes, lifts on hover with a stronger shadow and reveals a small copy icon, and copies its HEX to the clipboard on click, triggering a dark pill toast at the bottom that includes a small square in the copied color. Right column: a "Contrast check" card listing six text/background pairs drawn from the palette (ink on surface, primary on surface, surface on primary, ink on primary, surface on ink, accent on surface), each row showing an "Aa" demo tile, the role names and hex codes, the WCAG 2.1 contrast ratio to two decimals, and a colored pill reading AAA (>=7), AA (>=4.5), AA Large (>=3) or Fail. Then a "Live preview" card containing a small e-commerce mini UI ("Marigold Studio — Autumn collection is live") whose background, text, accent dot, progress bar, primary/ghost buttons and tag pills all re-theme from the palette via CSS variables with 600ms eased transitions. Finally an "Export" card with Shuffle and Copy CSS buttons and a read-only monospace textarea that prints a :root block of --color-primary etc. in HEX and HSL form with a comment noting the harmony rule and base. Interactions: pointer-drag on the plane (pointer capture, touch-action none), arrow keys nudge hue/saturation (shift for 10 steps), the lightness slider updates live, chips switch harmony rules, shuffle randomizes a pleasant base, all copies confirm with the toast. Respect prefers-reduced-motion by collapsing transitions and animations. Mood: calm, precise, studio-like; soft daylight rather than neon.

Build a self-contained, offline frosted-glass music player concept for a fictional album called "Lumen" by the artist Ondine Vale (2026). No audio is played; everything is visual state. Behind the interface sits a huge, slowly rotating disc (130vmax, 90-second linear spin) painted with a conic gradient of three accent colors and blurred by 70px so it reads as a shifting aurora of album-art color; a dark vignette hollows out its center and an SVG feTurbulence grain layer (data-URI) at 8% opacity adds film texture. The page background is #0b0a14 with two radial color washes mixed from the accents via color-mix(). Every track defines its own trio of accent colors (e.g. track 1: #ff7a59 / #ffd166 / #7b61ff; track 2: #4cc9f0 / #f72585 / #3a0ca3; track 4: #80ed99 / #38a3a5 / #22577a; track 8: #a8dadc / #f1faee / #1d3557), and switching tracks retunes CSS custom properties --a1/--a2/--a3 so the disc, vinyl label, progress fill, equalizer bars, play button gradient and active-track number all cross-fade over ~900–1200ms. The player itself is a glass slab: rgba(255,255,255,0.10) fill, 28px backdrop blur with saturate(1.4), a 1px rgba(255,255,255,0.22) stroke, an inner 1px highlight, and a diagonal sheen overlay. On phones it fills the full dynamic viewport height; above 760px it becomes a centered 420×860px device frame with 44px radii and a small black notch pill at the top. Typography: serif song title in 'Iowan Old Style' / Palatino / Georgia at 24px, system sans for everything else, ui-monospace for times and track numbers, text color #f6f3ff with a 62% muted variant. Content, top to bottom: a top bar with two round glass icon buttons and a letter-spaced "NOW PLAYING" label; a hero row with a 116px CSS vinyl record (repeating radial groove pattern, conic-gradient label, specular highlight) and a tonearm that swings from -32° to -12° when playing, next to the title, artist, album line in accent color, and an 8-bar equalizer whose bars animate between 15% and 100% height with staggered durations and pause when playback stops; a progress track with a gradient fill and a white knob that enlarges with a soft halo on hover or while scrubbing, plus elapsed/total times; a control row with shuffle, previous, a 64px gradient play/pause button with a colored drop shadow, next, and a like button; a volume slider with a filled track and numeric readout; and a scrollable track list of 8 songs (Salt & Static 3:42, Harbour Lights (Late) 4:14, Paper Moons 3:18, Glasshouse 4:01, Nineteen Winters 4:23, Tidal Arithmetic 3:07, Streetlamp Choir 3:56, Lumen (Reprise) 4:19) with a color dot per track, tiny animated bars on the active row, hover slide, and vertical fade masks at the list edges. Interactions: play/pause toggles a `.playing` class that starts the vinyl spin, equalizer, and a requestAnimationFrame timer that advances the progress bar in real seconds and auto-advances to the next track at the end; the progress track supports pointer-drag scrubbing (pointer capture) and arrow-key seeking; previous restarts the track if more than 3 seconds in, otherwise goes back; clicking a list row loads and plays it; the like button toggles a filled pink heart with a scale-bounce keyframe and a ten-particle burst (pink and gold dots flying outward via per-particle --dx/--dy variables) and remembers likes per track; spacebar toggles playback. Respect prefers-reduced-motion by disabling the spinning and equalizer animations. Mood: nocturnal, lush, tactile — the glass feels cool and the colors feel warm.

Create a single-file, offline brutalist digital archive index for a fictional "Institute for Ephemeral Media". The aesthetic is raw and uncompromising: pure white paper (#ffffff), pure black ink (#000000), one-pixel hairline rules everywhere, absolutely zero rounded corners and zero shadows (enforce it with a universal `border-radius: 0 !important; box-shadow: none !important`). Typography is the whole design: body copy and data in the system monospace stack (ui-monospace, SF Mono, Menlo, Consolas, Courier New) at 13px with tabular numerals; headlines in 'Helvetica Neue' / Helvetica / Arial bold with -0.05em tracking, uppercase, line-height 0.86. Selection color inverts (black background, white text). The sticky masthead spans the page: a huge title "ARCHIVE / 1972–2026" scaled with clamp(30px, 8.5vw, 132px), the slash set in light weight, and on the right a live HH:MM:SS clock with a small UTC offset superscript, a dateline (e.g. "Tue, 01 Sep 2026") and the line "Index · Fonds A–K · Holding 40 items". Beneath it a three-cell toolbar divided by hairlines: a borderless uppercase filter input ("Title, medium, year, id…"), a "Showing 40 / 40" counter, and a legend "Hover row → artifact · Click header → sort". The body is a two-column grid: a dense table on the left (columns ID, Title, Year, Medium, Size) with 40 fictional entries spanning 1972–2026 — items like "Concrete Poem for a Parking Structure" (offset print, 594 × 841 mm), "Hum of the Substation" (reel-to-reel, 18 min 40 s), "Floppy Poems v1.1" (3.5" diskette, 720 KB), "Fax Correspondence with a Bridge" (thermal paper, 9.4 m roll), "Terms and Conditions (Read Aloud)" (MP3, 3 h 48 min), "Municipal Pantone (Unofficial)" (swatch fan, 112 chips), ending with "Index of This Index" (living document, ∞). IDs are lettered by fonds (A-0001 through K-0166). Table headers are sticky beneath the masthead, uppercase 10px letter-spaced, and clickable: a sort glyph (· none, ↑ ascending, ↓ descending) follows the label and aria-sort is maintained; sizes sort by parsed magnitude with unit awareness. Rows are hairline-separated; on hover (or keyboard focus) the row inverts fully to black with white text, and filter matches are wrapped in <mark> which itself inverts inside a hovered row. Title cells use the Helvetica stack at 14px medium weight for contrast with the monospace data. On the right, a sticky aside occupying ~34vw holds a square "artifact" frame with a hairline border and, beneath a hairline, a caption block (title in bold uppercase Helvetica 18px, ID · year · medium line, and a description noting the FNV-1a hash and layer count). Hovering a row generates the artifact deterministically from the item ID: hash the ID with FNV-1a, seed an xorshift PRNG, pick one of six two-color palettes (black/white, black/#e6e6e6, #111/#ff3b00, black/#ffe600, #0033ff/white, black/#00b37a), then stack 3–5 absolutely positioned layers chosen from repeating-linear-gradient stripes, hard-edged radial discs, a diagonal half-plane in difference blend mode, repeating-radial rings, a conic quarter-pattern in difference blend, or a clipped dot grid — each with hashed angle, scale and offset — finishing with a small bordered ID label in the corner. The artifact frame sits at 35% opacity with "NO SELECTION" until a row is hovered, then snaps to full opacity. Below 860px the aside becomes a fixed bottom-right drawer that slides up when a row is active; below 560px the Medium column hides. The footer is an oversized black block: white type, the word "FONDS" set at clamp(56px, 18vw, 320px) with -0.06em tracking, plus two small uppercase columns for custodian details and a colophon ("No images were stored. All artifacts are procedural."), with an underlined "Back to top" link that inverts on hover. No animation beyond 60ms color snaps and the drawer slide; disable transitions under prefers-reduced-motion. Mood: institutional, exacting, a little dry, quietly witty.

Compose a calm, magical full-screen night meadow as a single offline HTML file. The sky is a vertical gradient from deep indigo #05081a at the top through #0d1a3d and #1a2f52 to a dusky #22344f at the horizon, scattered with a field of fifteen tiny radial-gradient stars (white, pale blue #cfd8ff and warm #ffe9c4) that twinkle slowly between 55% and 95% opacity. A full moon (clamp 64–130px) sits upper-right, rendered with a radial gradient from #fffbf0 to #d9cfb4, faint crater dimples, and a two-layer glow (40px and 140px soft shadows in warm cream); a wide radial "moonglow" wash tints the upper right of the sky. Two SVG hill silhouettes with vertical gradients (#1b2c4d→#101c36 far, #0f1a31→#080f21 near) roll across the lower half. Two mist bands — blurred 14px, pale blue-grey at ~20% alpha — hover just above the ground and drift left-right over 40 and 55 seconds in opposite directions. The meadow is three layers of grass built as inline SVG at runtime: 140 far blades in #0b1530 (blurred slightly, 55% opacity), 120 mid blades in #070f24, and 90 near blades in #03081a, each a tapered quadratic-curve path with random lean and height, seeded by a simple LCG so it is stable per load. Every blade sways with a CSS rotate/skew keyframe from -3.5° to +3.5° around its base (transform-box: fill-box), with a per-blade duration between 4 and 8 seconds and a negative random delay so the field ripples rather than moves in unison; far layers sway slower, near layers faster. Fireflies are drawn on a full-screen canvas that handles devicePixelRatio (capped at 2) and window resize. Their count scales with viewport area (28–90). Each fly uses wander steering: a slowly random-walking heading that is nudged back toward the meadow band (between 28% and 90% of the height) and the horizontal bounds, velocity damped at 0.94 per frame. Each pulses with its own phase and rate; brightness follows a squared sine so flies spend most of their time dim and bloom briefly. Rendering uses 'lighter' compositing: a radial-gradient halo ten times the body radius in hsl hue 78–90 (the #d4ff6a yellow-green family) plus a bright small core. The mouse is a gentle breeze — a soft translucent 120px disc follows the pointer (the native cursor is hidden over the scene) and any fly within 150px is pushed away with force falling off linearly. Clicking or tapping anywhere releases a swarm of 14–23 fireflies that scatter outward from the point and fade over roughly 17 seconds; a counter at the bottom reports the live number. A pill button at the bottom center toggles the moon phase: switching to "New moon" fades the moon almost out, kills the moonglow, dims and desaturates the whole scene via a 1.4s filter transition, thins the mist, brightens the stars, and makes fireflies read slightly brighter; the button's own tiny phase dot changes from a glowing disc to a crescent. A poetic caption in italic serif ("The field remembers every small light." with the small-caps line "a night meadow · late june") fades in over four seconds after a 1.2s delay near the top. Typography: 'Iowan Old Style' / Palatino / Georgia for the caption, system sans with wide letter-spacing for UI labels. Under prefers-reduced-motion, grass, mist and star animations are disabled and the fireflies move and pulse at a fraction of their normal rate. Mood: hushed, wide, faintly nostalgic — a summer field at midnight.

Build a single offline HTML page presenting a gallery of twelve live clocks, all reading the visitor's real system time via one shared requestAnimationFrame loop. The page frame is dark and elegant: background #0e0f13 with a faint radial highlight at the top (#1b1d26), text #ece8df, muted #8b8a93, and a gold accent #cdb27a. The header is centered with a letter-spaced gold eyebrow "A COLLECTION", a large serif title in 'Iowan Old Style' / Palatino / Georgia ("Twelve ways to tell the same moment" with the last phrase italic gold), a short explanatory paragraph, and a monospace live line "HH:MM:SS — Tuesday, 1 September 2026". Cards live in a responsive grid (auto-fill, minimum 300px, 22px gap, 1480px max width) and each is a 20px-radius panel with a 1px #23252d border, a subtle top-to-bottom gradient of its own background, an inset highlight, a deep soft shadow, an italic roman numeral in its corner, a serif h2, a centered face area, and a small caption. Cards lift 4px on hover and their border warms toward their accent. Every card defines its own mini palette through --c-bg / --c-fg / --c-accent / --c-soft custom properties. The twelve clocks: (i) Railway — a white Swiss railway dial (#f3f1ea card, #e0242a red) built in SVG with 60 generated ticks (bold at five-minute marks), broad black rectangular hour and minute hands, and a red lollipop seconds hand that completes its lap in 58.5 seconds and waits at twelve, as Hilfiker's 1944 original does. (ii) Word grid — an 11×10 monospace letter matrix (ITLISASAMPM / ACQUARTERDC / TWENTYFIVEX / HALFSTENFTO / PASTERUNINE / ONESIXTHREE / FOURFIVETWO / EIGHTELEVEN / SEVENTWELVE / TENSEOCLOCK) where letters sit at 12% opacity and the words for the time rounded to five minutes light to white with a soft text glow over 700ms. (iii) Binary LEDs — six BCD columns of four 18px dots on a near-black green card (#0b1410, #3dff8f), lit dots glowing with two-layer shadows, labelled H H M M S S. (iv) Daylight arc — a 240×150 SVG semicircle from a fixed 06:12 sunrise to 19:48 sunset with a warm gradient fill, an accent progress stroke, a glowing sun that travels the arc and a percent-of-daylight label; at night the sun sits dimly below the horizon and the label reads "night · sun below horizon". (v) Nixie tubes — six glass tubes (38×92px, rounded tops, anode-mesh stripes via repeating-linear-gradient, a faint cathode bar) holding 42px monospace digits in #ffb070 with triple orange text-shadow glow and an occasional flicker keyframe, separated by blinking orange colons. (vi) Concentric rings — three 10px SVG rings (r 86/66/46) with stroke-dasharray progress for seconds, minutes and hours in cyan/ice/pink and the time in the center. (vii) Flip cards — three 62×78px split-flap units for HH:MM:SS with a hinge line; when a value changes, the upper leaf folds down over 320ms and the lower leaf unfolds up, using perspective and backface-visibility. (viii) Polar dots — 60 outer, 60 middle and 12 inner SVG dots in magenta/violet/pale pink that fill clockwise to the current second, minute and hour. (ix) Plain English — a cream card (#f7f2e7) with a large balanced serif phrase such as "about twenty past nine" plus a small-caps part-of-day line ("in the evening"); "about" appears whenever the real minute is more than a minute from the five-minute rounding. (x) Twenty-four hours — a dial with 24 generated ticks, midnight at the bottom and noon at the top, the lower half shaded as night and the upper half lit, and a gold hand making one revolution per day. (xi) Sand of the day — an SVG hourglass whose upper bulb empties and lower bulb fills according to the fraction of the day elapsed (clip-paths on two rects), a dashed falling-grain line animated with stroke-dashoffset, and a caption giving the percentage and the hours and minutes left until midnight. (xii) Seven-segment — a Casio-grey LCD (#9fb197 panel in a dark bezel with inset shadow) with six skewed seven-segment SVG digits where unlit segments remain faintly visible, two colon blocks, and a tiny "WATER RESIST · LIGHT" legend. Smooth quantities (Swiss hands, ring offsets, 24-hour hand) update every frame; discrete ones update once per second; the word grid and the English phrase update once per minute. Respect prefers-reduced-motion by disabling the flicker, blink and grain animations and shortening the flip. Mood: a quiet horological cabinet — the same instant refracted through twelve design cultures.

Build a single self-contained HTML page that generates De Stijl / Mondrian-style compositions using CSS Grid. The painting is a square "easel" (min(92vw, 720px)) with a heavy black frame rendered as a dark linear gradient (#2b2b2b → #0d0d0d → #202020 → #050505) with a subtle inset highlight, deep drop shadows and a diagonal glass glare overlay. Inside, a CSS Grid container with a black background (#1a1a1a) and a 10px gap acts as the black gutter system; each cell is a <button> spanning tracks. The underlying track grid is a fixed 16 × 16 lattice, but each track receives a random fractional size (mostly 0.8–1.3fr, sometimes 0.45–0.7fr or 1.5–2.2fr) so the proportions never look uniform. A recursive subdivision algorithm splits the full 16×16 rectangle: choose the split axis with probability proportional to the long side, cut near a golden ratio point (0.382 or 0.618 with ±0.15 jitter), and occasionally leave a large rectangle unsplit so there are always a few generous planes. The depth slider (2–7) sets the maximum recursion depth and regenerates immediately. About 16–28% of the resulting leaves are painted from the palette red #d7301f, blue #1e4d9b, yellow #f2c40f, with a rare black #161616; the rest are off-white #f6f3ec with a faint repeating-linear-gradient canvas weave texture. Colored cells carry a soft diagonal gradient overlay (white 18% to black 12%) that reads like paint sheen. Interactions: clicking any cell cycles white → red → blue → yellow → black → white with a 380ms color transition; hover scales the cell to 0.985. "New composition" regenerates track sizes and the tree — because the track count is constant, the grid uses CSS `transition: grid-template-columns / rows 1100ms cubic-bezier(.65,0,.25,1)` so gutters slide to their new positions while new cells stagger in with a scale-and-fade reveal (28ms per cell). The whole framed easel also gently rotates by a random ±0.6°. "Animate" toggles a breathing mode where requestAnimationFrame multiplies every base track by layered sine waves (±16% slow, ±6% fast, phase-shifted per track), turning the grid into a living painting; the transition is disabled during breathing and re-enabled when stopped so the tracks ease home. Keyboard: N for new, A to toggle breathing. Below the painting sits a museum wall plate: warm cream gradient (#faf7f0 → #f3efe6), thin border #c9c2b4, two tiny screw heads, a tracking-heavy uppercase artist line ("Piet Anonymous (b. 1872)"), an italic Georgia title that is generated from the actual colors present ("Composition No. IV with Red, Blue and Yellow", "Tableau with Yellow", etc.), a random year 1919–1942, medium and square dimensions. The plate text fades out and in when it updates. Environment: a gallery wall in warm plaster tones (#cfc8bb → #d9d3c7 → #c8c1b3) with a fixed soft spotlight (radial ellipse of #fff8e6 at 75% alpha centred at 50% 22%) and a dark floor band (#6b6358 → #5a5248) at the bottom 22%. A faint fixed repeating-gradient plaster texture with multiply blend adds grain. Typography: Georgia / Iowan Old Style / Palatino serif for headings and plate; ui-sans-serif / system-ui for uppercase tracked labels. Controls are square black-outlined buttons with a hard 4px offset shadow and a sliding black fill on hover; the range input has a red square thumb with a black border. Respect prefers-reduced-motion by disabling all transitions, reveals and the breathing mode.

Create a full-viewport, self-contained HTML page that feels like sitting inside a warm room on a rainy night, looking out through a fogged window at a city. Everything is rendered on a single fixed <canvas> with devicePixelRatio-aware sizing (capped at 2, and further reduced when the pixel area exceeds ~7 megapixels so 4K stays smooth), composited from three offscreen layers: a small (0.5×) live city layer, a static blurred skyline layer, and a full-resolution condensation layer. The city behind the glass: a night sky gradient from #04060f through #0b1024 to a warm polluted horizon #2a1b2c → #3a2418. A procedurally generated skyline of dark rectangles (rgb ≈ 8–18) is drawn once with `ctx.filter = 'blur(…)'` so it reads as out-of-focus masses. Hundreds of bokeh lights sit on top: lit windows in a 14×18 px lattice on most buildings, 46 large street/signage discs (radius 9–26 px) clustered low, and a dozen high beacons. Lights are drawn as pre-rendered radial-gradient sprites in eight colours (sodium amber rgb(255,178,82), warm white (255,233,190), cool blue (110,180,255), neon pink (255,96,140), mint (90,240,190), violet (200,120,255)) and twinkle via per-light sine phase with occasional flicker. Seventy faint diagonal rain streaks fall behind the glass at very low alpha. Raindrops on the glass are refractive lenses. Each drop clips an ellipse, then draws the small city canvas flipped vertically (scale(1,-1)) and minified by a factor of 2.3 so the inverted, wide-angle city appears inside the drop — exactly how a real droplet behaves. Over the refraction: a faint white lift, a radial rim shadow darkening to 42% at the edge, an offset specular highlight at the upper-left, and a soft dark shadow under the drop on the fog. Tiny beads under 2.4 px use a cheap two-circle rendering. Simulation: drizzle beads settle at a rate tied to the intensity slider; resting beads swell randomly and let go once they exceed a personal release radius (4.6–7.5 px); movers accelerate under gravity with size-dependent terminal velocity, wobble sideways, stretch vertically with speed, leave a trail of small beads while losing mass, absorb any bead or drop they touch (radius combined by area), and convert back to a bead once they shrink below 2.4 px. Sliding drops also clear the condensation along their path (destination-out ellipses), leaving clear streaks that re-fog. Condensation: a full-resolution fog canvas filled with rgb(206,219,232), slightly thinner near the centre, composited at 70% alpha. Moving the pointer wipes it with a soft radial destination-out brush (radius ≈ 6% of the short side, interpolated between pointer samples) and knocks small beads off; every frame adds back rgba(206,219,232,0.0045) so wiped areas slowly fog over again. Clicking on the glass adds a heavy drop. "Wipe all" sweeps a hard-edged clear band across the whole window in under a second, removing every drop it passes. Room reflection: a mirrored inline-SVG lamp (trapezoid shade in #ffd9a3→#ff9b3c, radial bulb glow, dark stem and base) at 32% opacity with a 1.5px blur and screen blend, plus a large warm radial glow in the corner, both breathing on a 7s cycle. A dark wooden window sash frames the viewport via layered inset box-shadows and a masked wood-grain gradient. HUD in Georgia italic ("Night Window") with a tracked uppercase subtitle, a monospace live clock (real local time) with a weather line that changes wording with the slider. Controls sit in a frosted pill (backdrop-filter blur) that fades to 35% when idle. A vignette darkens the corners. Palette: ink #e9e4da, amber accent #ffb35c, background #05070f. Reduced-motion: no twinkle, no lamp breathing.

Build a full-viewport, self-contained fractal explorer for the Mandelbrot set with a museum-dark interface. The rendering canvas fills the window at device pixel ratio (capped at 2) and is computed by a pool of Web Workers created from an inline Blob URL (2–8 threads based on navigator.hardwareConcurrency), with an automatic main-thread fallback that reuses the same kernel string via `new Function` if workers are unavailable. Rendering is progressive: the frame is split into passes at pixel steps 8, 4, 2 and 1; each pass is divided into horizontal bands (one per worker for coarse passes, four per worker for the final pass) and queued in order, so a blocky preview appears within milliseconds and sharpens as bands arrive. Each band returns an RGBA buffer that is put into a temp canvas and drawn with `imageSmoothingEnabled = false` scaled by its pass step. Every render carries an id; stale bands are discarded, and any gesture cancels the queue. The kernel uses cardioid and period-2 bulb interior tests to skip the set quickly, a bailout radius of 256 for accurate smoothing, and continuous escape-time coloring: nu = n + 1 − log2(log|z|), mapped cyclically into a 2048-entry palette via floor((√nu · 96 + 240) mod 2048). Palettes are built in the worker from smoothstep-interpolated control points: Ultra (#000764 → #206bcb → #edffff → #ffaa00 → #000200, the classic Ultra Fractal ramp), Ember (#0a0402 → #5a0c06 → #c83c0a → #ffaa28 → #fff0c8 → #3c0a14), Ice (#020614 → #0a286e → #3c8cdc → #c8f0ff → #ffffff → #1e1446) and Mono (#08080a → #f0eee8 → #08080a). Interior points are black. Iterations scale automatically with depth: 120 + 90 · depth^1.15 where depth = log2(3.4 / span), multiplied by a user-selectable ×0.5–×8 factor and capped at 12,000. Navigation: left-click zooms in ×2.5 at the clicked point (the point stays under the cursor); shift-click or right-click zooms out ×2.5; dragging pans by translating a snapshot of the current bitmap live and re-rendering on release; the scroll wheel zooms about the cursor with factor exp(−deltaY · 0.0018), scaling the previous frame instantly before the coarse pass replaces it. Click zooms animate the existing bitmap for 300ms with a cubic ease-out before the render begins (skipped under prefers-reduced-motion). Keyboard: R resets, +/− change the iteration multiplier, 1–4 select palettes, Escape zooms out. UI: three frosted panels (rgba(14,16,24,0.78), 1px rgba(255,255,255,0.09) borders, backdrop blur 16px). Top-left brand with a small cardioid mark in amber #f0b35a and a Georgia title "Mandelbrot Explorer" plus a tracked uppercase subtitle. Top-right HUD in ui-monospace at 11.5px with tabular numerals: Re and Im to twelve decimals, zoom (amber, switches to exponent notation past ×1000), iterations, render time in ms, and worker count. Bottom dock: a horizontally scrolling row of six bookmark buttons (112×72, each with its own worker-rendered 224×144 thumbnail and a gradient-shaded label) — Overview (−0.75, 0, span 3.4), Seahorse Valley (−0.7435669, 0.1314023, span 0.0022), Elephant Valley (0.2749, 0.00655, span 0.012), Triple Spiral (−0.088, 0.654, span 0.012), Spiral (−0.16070135, 1.0375665, span 0.0012), Mini-brot (−1.7548776, 0, span 0.028) — with a springy hover lift (cubic-bezier(.2,.9,.3,1.3)) and an amber active border; a segmented palette control with tiny gradient swatches; iteration −/+ steppers; Zoom out and Reset buttons. A 2px amber progress bar glows along the top edge while bands are in flight. A faint hint line under the HUD explains gestures and fades after first use. Below 760px the HUD moves above the dock, thumbnails shrink to 92×60 and tools wrap.

Design a clean, light showcase page of ten handcrafted microinteractions, each on its own white card in a responsive grid (repeat(auto-fill, minmax(280px, 1fr)), 18px gaps, max width 1180px). Background is #f6f6fb with two faint radial tints (indigo rgba(99,102,241,0.12) top-left, pink rgba(236,72,153,0.07) top-right). Cards are #ffffff with a 1px #e7e7f2 border, 22px radius, soft layered shadows, and a 3px hover lift with an indigo-tinted shadow. Each card has a centered "stage" and a dashed-rule caption with a monospace index (01–10), a bold name and a one-line explanation. Typography: ui-sans-serif / system-ui / Helvetica Neue for UI, Georgia italic for the accent word in the headline ("Small joys, ten of them."), ui-monospace for numerals. Palette: ink #17172b, muted #6f6f8a, indigo #4f46e5 and #6366f1, soft indigo #e0e7ff, green #16a34a, red #e11d48. Springy easing everywhere via cubic-bezier(.34,1.56,.64,1) for CSS and a shared damped-spring integrator in JS (k 160–220, damping 16–22, 60Hz semi-implicit Euler). The ten components: (01) a magnetic pill button whose body is pulled toward the cursor within a 140px radius by two independent springs, with the label drifting 35% further for parallax; (02) a liquid toggle switch — a 78×42 track that tints indigo when on, whose knob runs a keyframe that stretches to scaleX 1.55 / scaleY 0.82 mid-travel, overshoots and settles, with a small "On" label fading in; (03) a checkbox whose tick is an SVG path revealed by stroke-dashoffset (24→0) after an 80ms delay while the 28px rounded box fills indigo and tilts −4°, and the label gets an indigo strikethrough; (04) a like button with a heart that fills red and scales to 1.18, incrementing a tabular counter and launching twelve colored particles (red, orange, yellow, indigo, green, pink) on radial vectors via the Web Animations API, each with randomized distance, scale and duration; (05) an elastic slider built from divs with pointer capture: the thumb follows a spring (k 210, d 20) and squashes in the direction of travel proportional to velocity, the fill tracks it, and a dark monospace tooltip pops up with overshoot; keyboard arrows adjust by 5; (06) ripple tabs: three role="tab" buttons with a 2px indigo indicator that springs its left and width to the selected tab, plus a translucent ripple circle expanding from the exact click point; (07) a cursor-lit card: a masked radial-gradient border (padding-box XOR mask) and an inner glow that follow --mx/--my custom properties, with description text rising and an arrow sliding in on hover; (08) a floating-label email input whose label shrinks to 74% and moves to the corner on focus or content, validating on Enter — failures trigger a red focus ring and a 480ms horizontal shake, successes turn green and draw an SVG check; (09) a segmented control with a white pill driven by a spring that also widens while moving (up to +28px) so it stretches like a rubber band between segments; (10) a download button that collapses from a 190px pill to a 52px circle, reveals a 36px SVG progress ring animated over 2.2s with an ease-out curve, then flips green and draws a checkmark before resetting after 1.8s. Include a footer noting the spring constants and easing curve. Honor prefers-reduced-motion by collapsing all animation and transition durations to near zero and by snapping springs directly to their targets.

Recreate the front page of a fictional 1920s broadsheet, "THE MERIDIAN GAZETTE", dated Thursday, October 14, 1926, as a single self-contained HTML page. The sheet sits centered on a dark desk (#2b2420) with a deep drop shadow, max width 1240px. Paper is #e9dcc0 fading to #d9c9a6 with layered background gradients: a coffee-ring stain (a radial gradient with a thin rgba(112,74,28,0.20) rim at 84% 18% plus a soft inner blush), a darker damp patch at the lower-left corner, and a warm lightening in the centre. A ::before pseudo-element overlays fractal-noise paper grain from an inline data-URI SVG (feTurbulence baseFrequency 0.9, three octaves) at 55% opacity with multiply blending; a ::after pseudo-element draws a vertical fold crease (position randomized by JS between 48% and 52%) and a horizontal one at 40% using hairline dark/light gradients. Masthead: two boxed "ears" (weather teaser and sworn circulation) in 11px uppercase, then the title in a blackletter-style stack ('Old English Text MT', 'Cloister Black', falling back to Georgia) at weight 900, clamp(34px, 8.2vw, 104px), vertically stretched 1.12×, with layered text-shadows (dark offset, light counter-offset, soft ink halo) to emulate an engraved blackletter; capitals are enlarged 1.18×. A motto in italics ("All the Light of the Day, Printed Before the Dark."), a triple-rule dateline bar with volume, city/date and "Price Two Cents", and a red (#a8261c) "LATE EDITION" stamp with a double border, rotated between −8° and −15°, multiply-blended, distressed by an SVG turbulence mask, that stamps onto the page with a scale-down animation on load. Body typography uses Iowan Old Style / Palatino / Book Antiqua / Georgia at 13.5px, justified with hyphens: auto; drop caps via ::first-letter (3.4em, floated); headlines in heavy serif, all-caps for the lead (clamp 30–56px), italic decks separated by hairlines, centered small-caps bylines with em-dash flourishes; section headers ("LATE WIRES", "SPORTING", "SOCIETY", "AMUSEMENTS") as tracked uppercase between double hairlines. Every headline has class .hl and, on hover, undergoes an "ink spread": text-shadow grows to 0 0 0.6px currentColor, 0 0 1.6px rgba(29,26,23,0.55), 0 0 5px rgba(29,26,23,0.18) while letter-spacing eases to 0.012em over 500ms (tap triggers the same effect on touch devices). Layout: the top band is a 3fr / 2fr / 1.2fr grid — the lead story ("Airship Meridian Spans Ocean in Sixty-One Hours") in two CSS columns with a column rule; an engraved illustration; and a "Late Wires" sidebar with two short stories. Below a double rule, four equal columns of stories (Grand Hotel fire, radio symphony broadcast and a sporting note, the Council speed-limit debate and society notes, Harbour Board record and amusements listings). The bottom band is a 1.1fr / 1.6fr / 1.3fr grid: a weather box (double inset border via box-shadows, engraved sun icon, big 54° figure, dotted rows for barometer, wind, sunrise, tides), a monospace stock table for the "Meridian Exchange" with fractional prices in eighths, green ups and red downs and hover-nudged late quotes, and a stack of classified ads (a fancy double-bordered blackletter ad for Bettany's Orchestra, plus Wanted, For Sale, Lost and Lessons) that tilt slightly on hover. All adjacent grid cells are separated by 1px vertical rules. The illustration is an inline SVG "engraving" (400×300) built entirely from hatching: <pattern> elements of 45° lines, −30° lines, cross-hatch, horizontal sky lines and a wave ripple; a dirigible with hatched underbelly, crosshatched shadow, longitudinal seam curves, hatched fins, black gondola with cream windows, engine cars and the word MERIDIAN; a radiating sun; a hatched skyline with a clock tower and cream windows; a rippled harbour and dotted crowd; a hairline frame; and an italic figcaption. Responsive: at 980px the top collapses to two columns with the sidebar spanning full width and the body to two columns; at 620px everything stacks to one column, columns become single, ears hide and body text grows to 14px; above 1600px the base type scales up. Footer line with publisher details. Respect prefers-reduced-motion by disabling the stamp animation and hover transitions.

Design a single self-contained HTML page for a fictional architecture studio, "Halden & Voss", that presents six built projects on the faces of a large hexagonal prism rendered with CSS 3D transforms. The prism sits centred on a dark concrete stage and rotates around its vertical axis to bring the chosen project poster to the front. Each of the six faces is a tall "project poster" (aspect roughly 1:1.42) built entirely from CSS gradients and geometric pseudo-shapes: an amber ring stroke, a black triangle wedge, a skewed light band with a pale sphere, a ruled grid of steel lines with an amber square, nested offset rectangles on a molten-copper radial gradient, and a dark house silhouette with a thin amber spire on pale paper. Every poster carries an ultra-large serif numeral (01–06) set at roughly 62% of the face width in Georgia / Iowan Old Style / Palatino, a two-line serif title with an italic accent word, a small uppercase letterspaced metadata row (city and year) and a project type line. Palette: concrete greys #17181a, #2a2b2d, #3b3d40; steel #8b96a3 and #c3cad2; warm amber #e39b3a and deep amber #b86f1c; warm paper #efe9df for text. The page background is a vertical concrete gradient with a subtle SVG fractal-noise grain overlay (data URI, overlay blend) and a large soft radial "ambient light" spot whose colour is the active project's accent and whose position drifts with the rotation angle (x follows sin(angle), y follows cos(2·angle)). Geometry: faces are positioned with rotateY(i·60deg) translateZ(apothem) where apothem = faceWidth × 0.866. The scene has perspective 1700px with the origin slightly above centre. Below the prism, a second copy of the prism (cloned by JavaScript) is flipped with scaleY(-1), masked with a vertical linear-gradient mask that fades to transparent, lightly blurred and desaturated — a reflective concrete floor. Faces that turn away from the viewer receive a per-face dark "shade" overlay whose opacity is computed from cos(angle + i·60°), so the prism reads as lit from the front. Motion: rotation is driven by a requestAnimationFrame spring (stiffness 42, damping 9.5) that produces a small elastic overshoot when settling on a face. Dragging horizontally spins the prism directly at 0.35° per pixel; on release the drag velocity is projected forward (clamped to ±2.5 faces) and the target snaps to the nearest face, so it feels like inertia with a magnetic catch. Left/Right arrow keys step faces, number keys 1–6 jump, horizontal wheel/trackpad steps, and a row of thin-line dot indicators (active one widens and turns amber) selects directly. Clicking a face brings it to the front. The lower-left info panel (kicker, large serif title, one-paragraph description, client / material / status facts) swaps content with a masked slide-up text transition whenever the front face changes; a vertical "01 / 06" counter sits on the right. A fixed header shows the studio brand mark (rotated square) and a nav whose links underline from left on hover. Reduced-motion users get instant snapping and no text transitions. The layout adapts to phones by shrinking the face width, moving the controls to a bottom row and hiding the description.

Build a self-contained HTML page that presents a generative L-system tree as if it were an engraved plate in a 19th-century botanical herbarium. The whole viewport is warm paper (#f1e7d3 fading to #e4d6ba) with a faint SVG fractal-noise "paper fibre" texture in multiply blend, and a double hairline frame (1px border plus a 1px outline offset 4px, both rgba(43,35,24,.35)) inset a couple of centimetres from the edge. Typography is entirely Georgia / Iowan Old Style / Palatino: a tiny letterspaced uppercase plate number ("Plate XVII · Lindenmayer Herbarium"), a large italic Latin binomial "Arbor recursiva var. lindenmayeri", an italic family line "Grammaticaceae — a stochastic bracketed L-system, five derivations", and, at the top right, the actual production rules typeset in Courier New (axiom X; X → F[+X]F[−X]+X, X → F[−X]F[+X]−X, X → F[+X][−X]FX; F → FF; angle 22–28°, jittered). Ink colours: #2b2318 for text, #6b5b45 for secondary text. The centre of the plate is a full-size 2D canvas (device-pixel-ratio aware, resizes with the window). In JavaScript, generate the L-system string from a seeded xorshift RNG (five stochastic derivations), then interpret it turtle-style into a hierarchy of segment nodes, each storing its relative turn, bracket depth and "order" (number of F steps from the root). Growth is animated order by order: a segment appears when age ≥ order × 55 ms and its length eases out (cubic) over the next ~100 ms, so the tree visibly grows from trunk to canopy in about two and a half seconds. Line width tapers as (1 − order/maxOrder)^1.6 with round caps, bark colour near #3b2a1c. Tip segments blossom once they finish growing: rotated ellipses whose scale eases in over 700 ms, coloured from the active season palette — Spring pinks (#f4a9bc, #f9c9d5, #ea8ea6, #fff1f3), Summer greens (#5f8f45, #78a659, #3e6d33, #93bb6e), Autumn ambers (#d98a2c, #c2561f, #e6b04b, #a63d1a), and Winter, which draws no leaves but paints a thin white highlight along the top edge of every thick branch and releases a slow field of drifting snowflakes. Changing season shrinks the leaves to nothing and lets them re-bloom in the new colours. A wind slider (0–100, labelled still / gentle / brisk / gale) adds a per-segment angular offset of windAmt × (0.003 + 0.014 × order/maxOrder) × sin(time × 1.6 + order × 0.35) plus a faster low-amplitude term keyed to bracket depth; because headings are inherited down the hierarchy the sway accumulates naturally so the trunk barely moves while the canopy ripples. The ground is a soft earth gradient with a hand-ruled horizon line and tiny grass ticks that lean with the wind; three translucent mist ellipses drift slowly across the horizon; a faint seasonal sky tint fades toward the ground. Controls sit in a caption bar along the bottom of the plate: a season pill-group with colour swatches, the wind slider with a hairline track and paper-coloured thumb, and a black "Plant new tree" button that wipes to paper on hover (space bar does the same). Clicking anywhere on the canvas plants a sapling at that point with a fresh seed; saplings lower on the plate are drawn a little larger for a perspective cue, a "Sapling planted" toast fades in, and at most eight saplings are kept. Reduced-motion users see trees appear fully grown.

Create a self-contained HTML tool that emulates an industrial LED dot-matrix sign and its control console, in a dark retro-industrial aesthetic. The page background is near-black (#0c0d0f) with a faint horizontal scan-line pattern and a soft amber radial glow at the top. All UI text is set in Courier New / ui-monospace, uppercase, widely letterspaced, in cool greys (#c9ced4 text, #6f777f dim labels) on gunmetal panels (#171a1e to #1f2328 with #2c3238 hairlines). The hero element is a wide display housed in a brushed-metal bezel: the bezel background is a 5px repeating vertical brushed-steel stripe pattern (#3a3e44 / #2f3338 / #34383e / #2b2f34) under a top-lit highlight gradient, with a deep drop shadow, an inner recessed frame, and four chromed screws in the corners (radial-gradient heads with two crossed slot lines rotated at different angles). Inside sits a black "glass" panel with an inset shadow and a diagonal reflection sheen. The display itself is a canvas grid of round LEDs — 11 rows tall, as many columns as fit — where every unlit LED is visible as a dark #171a1e dot and every lit LED is drawn in three passes: a large 16%-alpha halo, a solid core, and a tiny white specular pin-highlight in the upper left. The canvas is DPR-aware and re-fits on resize. Glyphs come from a hand-defined 5×7 bitmap font written directly in the script as binary row literals: A–Z, 0–9, space and punctuation (. , ! ? ' " - _ : ; / & + = ( ) # $ % @ * < >) plus a heart; unknown characters render as a hollow box. The message string is rasterised into an array of 7-bit column masks with one blank column between glyphs. Three modes: Scroll (continuous right-to-left with an 8-column gap before the message repeats), Static (centred, showing the middle if too long) and Bounce (ping-pongs between the edges, or across the overflow when the text is wider than the display). Controls in a card grid below the display: a text input (max 120 characters, live "N CH" counter), a segmented mode switch with an amber underline on the active option, five glossy round LED colour swatches (amber #ffb000, red #ff2a1a, green #39ff5a, cyan #29e6ff, white #f4f4ff) that glow when selected and recolour the whole UI accent, a speed slider (5–120 columns per second) and a pixel-size slider (7–26 px pitch) with chunky machined slider thumbs, and a large "PIXELS" readout showing lit LEDs, total LEDs and grid dimensions, refreshed a few times per second. A second, shorter bezelled display below the console shows the local time as HH:MM:SS in the same bitmap font, centred, with the colons blinking off on the half-second; it uses a slightly smaller pitch derived from the main pixel-size setting. A header reads "DOTMATRIX-7 // Marquee controller" with a blinking green link LED; small engraved plate labels ("Display A · matrix", "Display B · local time") sit under each bezel; a footer notes the serial number. Under prefers-reduced-motion the status LED stops blinking, colons stay solid and scrolling slows to a third of the chosen speed.

Design a premium, self-contained landing page for a fictional twelve-room hotel, "Casa Maré", perched on the Algarve cliffs at Praia da Luz. The style is minimal luxury: generous whitespace, a warm sand ground (#efe6d8 with a deeper #e2d5c1 for alternating sections), deep sea teal (#2f6f73, #1f4d51, and a pale #8fb8b9), near-black ink (#1c1c1c, softened to #5a5652 for body copy) and a muted gold accent (#b8935a; #e5c99a on dark). Headlines are set in Georgia / Iowan Old Style / Palatino with italic accent words; UI and body text use Helvetica Neue / system sans, and small labels are uppercase with wide letterspacing preceded by a short gold rule. The hero is a full-viewport CSS-drawn seascape: a layered vertical gradient sky (dusty blue through pale cream into sea teal), a blurred radial sun, a slow "glint" ellipse of warm light that breathes across the water (9-second alternating animation, screen blend), and three inline SVG wave bands — each a 200%-wide cubic-bezier path in progressively deeper teals — translating horizontally in loops of 18, 26 and 14 seconds (one reversed) so the sea keeps moving. Over it sits a huge serif headline "A quiet house above the Atlantic" with "above" in cream italic, a short introduction, two pill buttons (gold filled and outlined) and a vertical "Scroll" cue with a growing hairline. A fixed nav shows a wave-and-sun logomark, links and a "Reserve" pill in white over the hero; after 40 px of scrolling it condenses (smaller padding, smaller logo) into a translucent sand bar with backdrop blur and ink text. Links underline with a left-to-right scaleX transition. Sections, each revealed with a buttery IntersectionObserver fade-and-rise (1 s, cubic-bezier(.2,.8,.2,1), staggered by data-d delays): an introduction with three facts and an arched abstract "tide" panel (arched top, horizon line and a glowing sun disc drawn purely in CSS); Rooms — three cards (Tide Room €290, Loggia Suite €460, Lighthouse Suite €720) whose "photos" are generated abstract compositions in sand and sea tones (a cream sun over a teal horizon with a ruled reflection, a teal wardrobe block with layered sand and gold rectangles, a pale sky with a teal sail and a half-sunk gold disc) that zoom to 1.07 on hover over 1.2 s; Experiences — a dark teal section with a horizontal snap-scroll strip of five cards (sunrise swim, rock-pool walk, terrace grill, sail to the caves, stars from the roof), each with a thin-line icon, a time-of-day label, a large ghosted number and a hover lift, plus round prev/next buttons that scroll by one card; a Booking widget on white with arrival/departure date inputs (pre-filled two weeks out for three nights, with min constraints), a guests stepper (1–4, round plus/minus buttons), a room select, and a live summary computing nights, extra-guest surcharge (€60 per night for the third and fourth guest), a 10% long-stay courtesy for five nights or more and the estimated total, with a "Request reservation" button that confirms inline; Testimonials — three quotes cross-fading every 6.5 s with dot navigation; and a footer on ink with address, links, contact details and a small SVG map (wave-pattern ocean, coastline, road lines, place labels and a pulsing gold marker for the hotel). All motion is disabled or shortened under prefers-reduced-motion; the layout collapses gracefully from a four-column footer and two-column widget to single columns on phones.

Build a full-screen, self-contained HTML page that reinterprets the "digital rain" trope as a piece of typographic art. A DPR-aware canvas fills the viewport with a grid of cells (22 px on desktop, 18 px on phones, 26 px above 2000 px wide). Each column is a stream with its own head position and speed (6–16 rows per second); as the head advances it stamps a random glyph into each new cell at full brightness, and every cell's brightness decays exponentially (factor e^(−1.6·dt)) so a luminous head trails a long fading tail. Glyphs come from a curated set of 60: 24 invented katakana-like characters defined as compact SVG path strings on a 10-unit grid and stroked with round caps (angular crosses, hooks, boxes, chevrons, split verticals), plus the ten numerals and the 26 Latin capitals set in bold ui-monospace. For performance, the glyphs are pre-rendered into an offscreen sprite atlas with 14 brightness levels; the brightest level carries a soft shadow-blur glow. Tails also flicker: about 15% of a column's worth of random cells swap glyph each frame. Colour is not the classic green. A four-swatch palette selector offers Jade (background #04100c, head #e8fff3, mid #5cffb0, tail #0b6b46), Amber Archive (#0d0903, #fff3d6, #ffb347, #7a4a0a), Ice (#050912, #f4fbff, #8fd3ff, #1f4f7a) and Rose (#0f050a, #ffe9f1, #ff6fa3, #7a1f45). Brightness maps from tail colour through mid to head, with alpha fading in the dimmest range; the whole HUD recolours via CSS custom properties, and the atlas is rebuilt on palette change. Number keys 1–4 switch palettes. Message mode: a command-line style input ("> type a phrase, press enter") in the HUD. On Enter or "Resolve", the phrase (letters and digits only, up to 40 characters) is assigned to consecutive columns centred on a row at 46% height. Streams in those columns are woken and repositioned above the row; when a stream's head reaches its target cell the cell locks — it takes the letter glyph, pops from 1.7× to 1× scale over 350 ms, gains a pulsing soft halo and a thin underline in the head colour, and is skipped by passing streams so it stays legible. The status line shows "resolving 7 / 12" while letters land, then "locked · holding" for 4.5 seconds (clicking the canvas releases early), then "dissolving" as each letter is released at a random moment over 1.6 seconds, returning to plain rain. A demo phrase "TYPE IS RAIN" resolves automatically two seconds after load. HUD: a translucent, blurred panel in the top-left with bracket corner marks, a title "Rain.Type" with a blinking block cursor, palette swatches showing a head→mid→tail gradient bar, Density (10–100% of columns active) and Speed (0.2×–2.5×) sliders with square glowing thumbs, the message command line, and the mode/progress line. Bottom-right stats show grid size, active streams and frame rate; bottom-left a small caption explains the glyph set. A radial vignette darkens the screen edges. Under prefers-reduced-motion the cursor stops blinking, tail flicker is disabled and density/speed default to 35%.

Build a single self-contained HTML page that presents a skeuomorphic, worn leather field notebook sitting on a dark wooden desk. The notebook is the only object on the page, centered, roughly 1080px wide at desktop and scaling down to 360px phones. The desk background is a near-black warm brown (#2a2118 to #1c150e) with a faint repeating vertical wood-grain stripe and a soft warm spotlight from above. Above the book sit a small uppercase, letter-spaced Georgia heading "FIELD NOTEBOOK" and an italic hint line telling the user to click the cover and tap page corners. The front cover is built entirely with layered CSS gradients: a base diagonal leather gradient from #7a4423 through #6b3a1e and #4a2410 to #2e1608, a radial highlight in the upper-left, a dark radial in the lower-right, a very fine repeating radial "grain" and a faint diagonal sheen. Stitching is a 2px dashed border in thread-tan #d9b98a inset ~12px from the edge. Two soft elliptical "scuffs" add wear. The embossed title "FIELD NOTES" is uppercase Georgia with 0.22em letter-spacing in dark leather #3a1d0a, using a light bottom-right text-shadow and a dark top-left shadow to look pressed in; beneath it a thin engraved ornament rule and the subtitle "THE SALTMARSH WALK · VOL. III". A black elastic band (vertical gradient strip with a shadow) wraps the cover and slides away with a fade when the book opens. The book is a preserve-3d scene with 2200px perspective and a slight rotateX. The closed book sits translated 25% left; on click the front cover rotates -178deg around its right edge over 1.2s with a cubic-bezier(.65,.05,.36,1) curve while the whole book slides to center. The inside of the cover is darker leather with a stitched pocket holding a slightly rotated cream "IF FOUND" card. Three double-sided sheets stack on the right half; each sheet has a front face (right page) and a back face (next spread's left page) using backface-visibility hidden and a rotateY(180deg) back. Turning a sheet rotates it -180deg around the spine with a 1.1s ease; while turning, a page-curl shadow gradient fades in on the moving face. Each page has a small triangular folded corner hint that grows on hover. Pages are cream (#f4ead6 / #eadfc6) with pale blue rules every 28px, a red margin line, and a soft warm shadow near the spine. Handwriting uses the font stack 'Segoe Script', 'Bradley Hand', 'Brush Script MT', 'Snell Roundhand', 'Apple Chancery', 'Lucida Handwriting', cursive in ink blue #1f3a6e, with alternate paragraphs rotated -0.6deg and +0.7deg, date lines underlined with a wavy decoration, and pencil notes in italic grey-brown #5a5148. Copy is four spreads of a real, specific fictional journal about a September coastal walk: a misty harbour, egrets and oystercatchers, a wreck on a shingle spit, seals arranged "like commas", a metal-detectorist, sea lavender pressed between the tide tables, redshank and curlew on the saltmarsh, a low-tide morning with sea kale and stone skimming, and a closing list of things to remember. Ephemera: inline SVG pressed flowers (a yellow horned poppy made from rotated ellipses, a spray of purple sea lavender with small clustered circles, a pink thrift head) with a drop-shadow filter; a taped-in polaroid with a white frame, a translucent yellow tape strip, a CSS gradient "photo" of a sky, sunlit sea and sandbar, and a handwritten caption — it lifts and straightens slightly on hover; two coffee ring stains built from translucent brown circular borders with multiply blending; tiny ink blots. Controls below the book: Back/Next buttons styled as leather-toned pressed buttons, five progress dots, and an italic status label. Support keyboard arrows and touch swipe. The whole book tilts subtly toward the mouse. Respect prefers-reduced-motion by collapsing all transitions.

Create a self-contained HTML page that simulates a harmonograph: a 19th-century scientific drawing instrument in which two or three damped pendulums move a pen over paper, producing Lissajous-like spirals that slowly decay. The page should feel like a real brass-and-mahogany laboratory apparatus. The body background is deep mahogany (#2c1810 to #26140b to #150a05) with a faint repeating vertical grain and a warm brass-tinted glow from the top. The header shows "THE HARMONOGRAPH" in uppercase Georgia with 0.18em tracking in pale brass #f1d98a with a dark drop shadow, an italic subtitle ("A drawing instrument of coupled, decaying pendulums — patent of the imagination, 1874"), and a small inline SVG engraved ornament (rule, diamond, two dots) in brass #c9a24a. Layout: a two-column CSS grid (drawing bed left, 320px control panel right) that collapses to a single column under 900px. The drawing bed is a mahogany slab (#5a3320 to #3b1f12 to #2a150c) with a thin brass inset border, four brass screw heads in the corners (radial gradient with a slotted line), and a "smoked glass plate": a near-black canvas (#0d0f14) with a radial vignette from #141720 to #07080c, an engraved faint brass graticule (four concentric circles and cross-hairs at 8% opacity), a monospace parameter readout in the top right, and a tiny letter-spaced caption "SMOKED GLASS PLATE · No. 7" at the bottom. A second transparent canvas on top draws the pen: a white glowing dot with shadowBlur and a thin brass "pen arm" line running off to the top right corner. The control panel is a brass plate (gradient from #b78f3c through #8a6620 to #6e4f16 with a highlight at the top) holding several pale-brass engraved sub-plates (#d8c48a to #c2ab68, dark border, inset highlight). Each sub-plate has a small uppercase, letter-spaced, text-shadowed heading. Plates: Lateral pendulum (x-axis) with Freq 1–6, Phase 0–2π, Damp 0–0.02, Ampl 0–1 sliders; Longitudinal pendulum (y-axis) with the same; Rotary table with an "Engage rotary table" checkbox and Freq/Ampl/Damp sliders; Ink & motion with a Speed slider (1–40×) and a row of seven round ink swatches (phosphor green #8ef7c3, cyan #6fd7ff, rose #ff7ab8, amber #ffc46b, violet #b48bff, ivory #f2e9d2, and a conic-gradient rainbow swatch meaning "hue shifts over time"). Range inputs have custom brass ball thumbs on a dark recessed track; outputs are displayed in Courier New. Buttons are dark bronze with a pressed 3D shadow; the primary "Lower pen & draw" button is oxblood red and spans the full width; other buttons are Lift pen, Replay, Randomize, Clear plate, Export PNG. A footnote in italic shows the equation x(t) = Σ Aᵢ sin(fᵢt + φᵢ)·e^(−dᵢt). Physics: x = A1·sin(f1·t + p1)·e^(−d1·t) (+ rotary A3·e^(−d3·t)·cos(f3·t)), y = A2·sin(f2·t + p2)·e^(−d2·t) (+ rotary A3·e^(−d3·t)·sin(f3·t)), scaled to fit the plate based on total amplitude. The pen advances in fixed dt = 0.012 steps, with the number of steps per frame proportional to real elapsed time and the Speed slider, until t reaches 260. Each segment is drawn twice with globalCompositeOperation 'lighter': a wide 2.6px pass at 35% alpha for glow and a fine 0.7px pass at 90% alpha for the core line. Rainbow ink maps hue to elapsed time. Completed traces are kept in a history so multiple traces can layer; on resize the canvas is rebuilt at devicePixelRatio and the history is redrawn. Randomize picks a musical frequency ratio (3:2, 4:3, 5:3, 5:4, 3:1, 7:5, 8:5, 9:7…) with a small detune, random phases, gentle damping, random rotary engagement and a random ink, clears the plate and starts drawing. Replay re-draws the last trace (or the trace in progress). Export downloads the plate as PNG via toDataURL. Keyboard: space toggles the pen, R randomizes, C clears. In prefers-reduced-motion mode, speed defaults to maximum.

Design a single-page HTML experience showing one enormous, exquisite holographic concert ticket for the fictional act "NOVA SYNDICATE" at Meridian Arena, centered in a dark stage. The background is deep aubergine (#120616 to #1d0b22 to #2f1038) with soft stage-haze lighting: a pink spotlight bloom from the top center (rgba(255,120,220,0.2)), violet and rose glows rising from the bottom corners, two blurred, slowly swaying haze ellipses (14s alternate animation), and a faint field of drifting dust motes made from tiled radial-gradient dots scrolling upward over 60s. A letter-spaced caption "MERIDIAN ARENA · HALL OF LIGHT · ONE NIGHT ONLY" sits at the top; a hint line at the bottom explains the interactions with the accent color #ff3fa4. The ticket is a wide card (aspect 2.55:1, up to 1180px) split into a main body and a tear-off stub (about 27% width) by a perforated line: a column of aubergine-colored dots made from a repeating radial-gradient, so the paper appears punched. Both parts are matte pale paper (#fbf7fa to #f3eef2 to #dcd2dc) with a diagonal sheen, a subtle horizontal fibre texture, a 1px white inner edge, and 22px outer corners. The card lives in a 1600px-perspective scene and tilts up to ±22° horizontally and ±16° vertically toward the pointer, with a smoothed follow (lerp 0.12) and a gentle autonomous sway when the pointer leaves. A holographic foil layer covers each part: a conic rainbow gradient (#ff4d4d, #ffd24d, #4dff88, #4dd2ff, #8a4dff, #ff4de1) centered on the pointer position, blended with color-dodge at 55% opacity and masked through a repeating 40px SVG data-URI pattern of diamond outlines and dots so it reads as a security foil. A second unmasked foil band runs along the bottom 22% of the main body with a moving white streak and multiply blending. A screen-blended radial glare highlight follows the pointer. Typography: the eyebrow row reads "HOLOGRAPHIC ADMISSION · SERIES 07" with a black pill tag "GENERAL". The artist name is set in a heavy condensed display stack (Impact, Haettenschweiler, Arial Narrow Bold, Helvetica Neue) at up to 8.6rem, uppercase, line-height 0.86, slightly scaleX-compressed, in near-white #efe6ee with a white bottom-right and dark top-left text-shadow to look embossed into the paper; above it a thin, widely tracked "MERIDIAN ARENA PRESENTS". The details row uses small tracked labels in muted plum (#7d6784) over bold values: Date 14 Nov, Doors 19:30, Block C, Row 12, Seat 047, plus a barcode built from a repeating-linear-gradient of bars with a Courier New number beneath. The stub shows "STUB · KEEP", "C · 12 · 047", a vertically rotated embossed "NOVA SYNDICATE", a pseudo-QR code, "ADMIT ONE" in the pink accent, and a "Drag me → to tear" hint. The pseudo-QR is a 29×29 canvas drawn deterministically from a seed with an xorshift PRNG: three finder patterns, timing rows, an alignment square, and ~47% random dark modules, rendered pixelated behind a white border. Tear interaction: the stub is draggable with pointer events. As it is dragged right, it resists (moves less than the pointer), begins to jitter and rotate as "fibres" give way, and the main body shakes slightly; releasing early snaps it back with an overshoot easing. Once dragged past ~45% of its width it detaches: the ticket gains a "torn" state (ragged dashed edges appear on both sides), and the stub flops away under simple physics — gravity, air drag, spin, three bounces on an invisible floor — then settles flat at a random angle, while the main body jitters for a few frames. A "Reprint ticket" button fades in to restore the stub with a springy return and a freshly seeded QR. Reduced-motion users get no haze animation, no idle sway, and a static torn position. Responsive down to 360px with a taller aspect and fewer detail fields.

Build a full-viewport, self-contained HTML landscape of desert dunes at golden hour that slowly slides into dusk and back. The scene is layered from back to front: a sky gradient, a star field that fades in at night, a glowing sun, a blurred horizon haze band, six SVG dune silhouettes, a walking camel caravan on the fourth (middle) layer, a canvas of wind-blown sand streaks on top, an elegant title block, a wind readout and a glassy control panel with a time-of-day scrubber. Palette over the 60-second cycle (ping-pong, sunset then sunrise): at golden hour the sky runs #5d8fb5 (top) → #e8b86b → #f8dca4 (horizon) with dunes from pale sand #f1d9a8 through #e4b982, #d59b62, #bd7a48, #9a5a35 to deep rust #6e3b24 and a sun of #fff6d2 with warm glow; at 35% the sky deepens to #3f5e8c / #e3894e / #f6b975; at 62% it becomes #26305a / #b2496a / #ef8a5a with stars beginning; at 82% it is #121a3b / #5a2f5a / #c9613f with the sun at #ffb26a; at 100% night is #070a1a / #1c1837 / #4a2a3a with dunes muted to cool violets (#5c4a4a → #120c10) and full stars. Colors are interpolated in RGB between keyframes with a smoothstep curve and written to CSS custom properties every frame, so every layer (sky gradient, sun, glow, haze, six dune fills, caravan, sand tint) shifts together. The sun travels along a diagonal from upper right (66%, 22%) down to (42%, 70%), fading out just before it drops behind the far dunes. A monospace clock shows the interpolated local time from 16:40 to 20:12. Dunes are six absolutely positioned SVGs (viewBox 1600×600, preserveAspectRatio xMidYMax slice) each containing a single smooth cubic-Bezier ridge path closed to the bottom, filled via a CSS variable with a 1s fill transition. The far dune layer and the sun are passed through an SVG filter: feTurbulence fractalNoise (baseFrequency 0.012 0.05, two octaves) driving feDisplacementMap, with SMIL animate elements oscillating baseFrequency (7s) and displacement scale between 5 and 9 (4.5s) to create heat shimmer. All layers move with mouse (and device-orientation) parallax at increasing multipliers from 8px for the far layer to 80px for the nearest, with the title moving slightly in the opposite direction; the values are eased toward the pointer each frame. The caravan is an inline SVG of four camel silhouettes (bodies, humps, necks, heads, legs, one calf and a rider), each group gently bobbing with a staggered 1.4s keyframe, translated across the whole viewport over 110 seconds in the middle dune layer so it inherits that layer's parallax and color. The sand is a devicePixelRatio-aware canvas with screen blending drawing about 260 short streaks tinted with the current pale-sand color; each has velocity, sway, fade-in, and is respawned on the left when it exits the right; a slowly wandering gust factor modulates speed and streak length and updates a small "WIND ESE · 14 kn" readout in the top right every two seconds. Title: "SAHEL MERIDIAN" centered near the top in a wide serif (Iowan Old Style / Palatino / Georgia), uppercase, 0.34em letter-spacing, scaleX(1.12), with a thin gradient rule below and an italic subtitle "Where the ergs meet the evening — 16° 14′ N, 0° 02′ W". The bottom panel is a frosted glass card (backdrop blur, translucent warm brown, thin cream border) holding a "TIME OF DAY" label, a range slider whose track is a sunset gradient and whose thumb is a small sun, the clock, and a Pause/Resume cycle button; dragging the slider pauses the cycle and scrubs the whole scene. Honor prefers-reduced-motion: no camel bob, no shimmer filter, no sand animation, cycle paused at golden hour.

Create a self-contained HTML page that visualizes and actually trains a small neural network in the browser, styled as a scientific-beautiful dashboard in deep navy with electric cyan and magenta. The background is a vertical gradient from #0a1230 to #050a1a with a faint cyan bloom in the top-left and a magenta bloom in the bottom-right, plus a subtle 48px grid of 5%-opacity lines masked to a soft ellipse. The header reads "Synapse — a living neural network" where "Synapse" is bold with a cyan-to-magenta gradient text fill, followed by a muted description "2 → 6 → 6 → 4 → 1, tanh hidden units, sigmoid output, trained with real backpropagation in your browser." Panels are frosted glass cards: rgba(12,20,52,0.72) with backdrop blur, a 1px rgba(120,160,255,0.14) border, 14px radius, deep drop shadow and a hairline top highlight. Card titles are tiny uppercase labels with 0.28em tracking in muted blue #7f93c4, with monospace cyan values on the right. Layout: a two-column grid — a large network card on the left and a 340px sidebar on the right containing Controls, Loss and Decision boundary cards; it collapses to one column under 980px. The network is drawn on a devicePixelRatio-aware canvas: five columns of nodes (2, 6, 6, 4, 1) with layer labels "Input, Hidden 1, Hidden 2, Hidden 3, Output" underneath and a monospace HUD in the corner showing epoch, accuracy and the current sample. Connections are cubic Bézier curves with horizontal tangents; line width is 0.4 + 3.2·|w|/max|w| and color is cyan rgb(53,240,255) for positive weights and magenta rgb(255,63,209) for negative, alpha scaled by magnitude. Nodes are radial-gradient spheres with a white specular highlight, a colored rim, a shadowBlur glow whose radius and alpha grow with the node's activation, and the activation value printed inside in Courier New; hidden nodes turn magenta when negative. Small labels show x₁, x₂, "P(class 1) = …" and the target. Implement the network for real in plain JavaScript: Xavier-style random init, tanh hidden layers, sigmoid output, binary cross-entropy loss, minibatch (16) stochastic gradient descent with full backpropagation of deltas through the tanh derivative. Datasets are generated procedurally with 200 points in [-1,1]²: XOR quadrants (label = sign(x·y)), a circle inside a square, and two interleaving moons. Controls: "Forward pass" (picks a random training point, computes activations and launches a pulse animation — glowing dots travel along each connection layer by layer over 520ms per layer, sized and colored by the signed product of activation and weight, and each layer's nodes light up only when the pulse arrives), "Train / Pause" toggle (glows when active), "Step ×1 epoch", "Reset weights", a learning-rate slider 0.005–0.5, an epochs-per-frame slider 1–12, and a dataset select. Range inputs use a cyan-to-magenta track with white glowing thumbs. The Loss card draws a live chart on canvas: horizontal grid lines, y-axis labels, an "epoch N" caption, a filled area under the curve fading from magenta to transparent cyan, a gradient stroke with a cyan glow and a white dot at the latest point; the history is downsampled when it exceeds 600 entries. The Decision boundary card holds a 72×72 canvas rendered via ImageData where each cell is the network's output over the plane, colored magenta (0) → navy (0.5) → cyan (1), scaled up smoothly by CSS to a square; the training points are drawn as tiny colored dots with dark outlines and the current sample is ringed in white. It re-renders every third frame while training and can be hidden or shown with a pill toggle button. Clicking on the heatmap runs a forward pass on the nearest training point (or on the clicked coordinate if no point is near). A footer notes that everything is computed live with no libraries. Respect prefers-reduced-motion by making the pulse instantaneous.

Build a full-screen, self-contained HTML word clock in the spirit of the QLOCKTWO, then expand it into a "time poem". The centrepiece is an 11 x 10 grid of uppercase letters (rows: ITLISASAMPM / ACQUARTERDC / TWENTYFIVEX / HALFSTENFTO / PASTERUNINE / ONESIXTHREE / FOURFIVETWO / EIGHTELEVEN / SEVENTWELVE / TENSEOCLOCK). Every letter is always faintly visible at roughly 10% white, and the letters that spell the current time ("IT IS TWENTY FIVE PAST NINE PM") glow with a layered text-shadow in the theme accent. Time is rounded down to the nearest five minutes; four small corner dots on the frame light up to indicate the extra 1-4 minutes. The grid sits inside a frosted glass frame (rgba(8,10,20,.36) with backdrop-filter blur, 1px rgba(255,255,255,.12) border, two thin accent corner brackets) that casts a long soft shadow. Typography: a heavy geometric system sans stack ("Helvetica Neue", "Avenir Next", Futura, "Segoe UI", system-ui) at weight 800, uppercase, with each cell sized by clamp(16px, min(5.2vw, 6.2vh), 58px) so the grid always fits both narrow phones and 4K displays. The poem below uses Georgia / "Iowan Old Style" / Palatino in italic at clamp(16px, 2.2vw, 26px). Header and footer labels are tiny uppercase with .28em letter-spacing. Beneath the grid a generated sentence about the time of day crossfades in every 18 seconds (and on any grid click). Sentences are assembled from subject / verb / object fragment pools bucketed by period: deep night, dawn, morning, midday, afternoon, dusk, evening (e.g. "the light is leaving the rooftops one tile at a time."), with the period name printed in small caps below. Lines swap using two absolutely positioned paragraphs that crossfade with a 2.4s blur-and-rise transition. The background is a two-layer sky: a linear gradient (top colour --bg-a to --bg-b) plus a radial "horizon" glow (--bg-c) at the bottom. These three colours interpolate through a 24-hour keyframe table: midnight #070a16/#0f1630/#241c3d, 4am #0a0f22/#1b2140/#3b2a4f, 6am dawn #2b2a55/#8d4f6d/#f2a06b, 8am #4f7fc4/#9fc3e8/#f6d9b2, noon #4a8ad8/#8fc0ee/#dbe9f5, 4pm #3e6fb0/#a9a0c8/#f0b48a, 6pm dusk #26314f/#6b3d66/#e0693f, 8pm #0e1430/#2a2350/#5a2a4a, back to midnight. A CSS star field (tiny radial-gradient dots) fades in at night and out by day. An SVG feTurbulence grain overlay at 4.5% opacity adds texture. Three colour themes switch the accent: Ember (#ffd68a glow rgba(255,214,138,.55)), Moon (#e6f0ff), Verdigris (#a8f0d4). A 12h/24h segmented toggle controls the AM/PM letters and the small tabular digital readout in the header. When the minute changes, a full-screen canvas overlay showers ~90 glowing letters that fall with gravity, tumble, and fade out below mid-screen (canvas is DPR-aware and resizes). A "Time travel" range slider (0-1439 minutes) lets the viewer scrub through the whole day to preview every sky gradient and word combination; a "Now" button returns to live time. Reduced-motion users get instant transitions and no letter rain.

Create a full-screen, pure-black generative artwork in a single HTML file where the pointer becomes a paintbrush of stardust. A DPR-aware 2D canvas fills the viewport (alpha:false, resized on window resize while preserving the existing painting by copying to a temporary canvas). Every frame the canvas is darkened with a translucent black fillRect whose alpha is the selectable "fade speed" (0.012 slow / 0.045 mid / 0.14 fast), so trails linger or vanish. Particles are drawn with globalCompositeOperation "lighter" for additive glow, using HSLA colours whose hue slowly drifts over time (14 degrees per second) with ±18 degrees of jitter, high saturation and ~68% lightness. Movement: on pointermove, particles are spawned along the interpolated segment between the previous and current pointer positions (one spawn every ~3px, capped at 40 steps), each inheriting a fraction of the pointer velocity plus a random radial kick, with per-brush drag. A "comet" head follows the pointer via a spring (stiffness 120, damping 0.82); its last 28 positions are drawn as a tapering, brightening line in a complementary hue, capped with a radial-gradient white-hot head 18px in radius. Brushes (bottom pill, also keys 1-4): Dust (tiny 0.6-2.2px points with a soft triple-radius halo and subtle sinusoidal wander), Ribbons (thin connected line segments from each particle's previous to current position, long life), Embers (orange hues 8-42, upward buoyancy, flicker in alpha, faster decay), and Ink (large 6-22px pale grey blobs at very low alpha drawn with source-over so they accumulate as milky wash rather than glow). Press-and-hold anywhere to gather a vortex: while held, particles within 260px experience an inward pull and a stronger tangential swirl that grows over 1.2 seconds, and fresh particles are seeded near the pointer; the custom ring cursor scales up, turns dashed and spins. On release, all nearby particles receive an outward impulse scaled by hold duration, 160-420 new sparks burst outward at high speed, and a thin expanding shockwave ring fades out. When the pointer is idle for 2.6 seconds, an autonomous ghost cursor takes over, tracing a Lissajous curve (x = A sin(3t + π/2) + small secondary wobble, y = B sin(2t) + wobble) so the artwork keeps painting itself. UI: a frosted pill at the bottom (rgba(14,14,22,.72), 1px rgba(255,255,255,.14) border, backdrop-filter blur 14px) with grouped uppercase 11px buttons: brush swatches (#9fd8ff dust, #ff9fe5 ribbons, #ffb060 embers, #e8e8f0 ink), three fade-speed icons (inline SVG line glyphs), Clear (trash icon, key C) and Save PNG (download icon, key S, uses canvas.toDataURL with a timestamped filename). Active buttons invert to a light fill with dark text. A small Georgia serif title "Stardust" with an uppercase tracking subtitle sits top-left; a hint block top-right fades out after the first movement. The native cursor is hidden on desktop and replaced by a 14px difference-blended ring; on screens under 640px the ring is hidden, labels collapse to icons, and touch-action: none keeps touch painting smooth. Reduced motion clamps the fade to at least 0.08 and disables the cursor spin.

Build a self-contained HTML page that is a live, turnable kaleidoscope seen through an antique brass eyepiece. The page background is a near-black warm brown (#0e0c0a) with a soft radial glow of #241c14 behind the instrument and an SVG feTurbulence noise overlay in overlay blend mode at 12% to suggest felt. Typography is Georgia / "Iowan Old Style" / Palatino for the title "Kaleidoscope" and small uppercase system-sans labels with .18-.3em tracking in a parchment tone (#e9dcc4, muted at 50%). The eyepiece is a circle sized min(88vw, 74vh) centred in the viewport with a deep drop shadow. Its rim is built purely in CSS: an outer conic-gradient of brass tones (#f3d58a highlight, #c99a3c, #9c6a1e, #5a3a0c shadow) rotating once every 40 seconds for a slow sheen, an inner ::after ring with a second conic gradient and inset shadows for a machined lip, and a ::before layer of repeating-conic-gradient hairlines masked to the outer band to suggest knurling. Inside, a circular lens (inset 7%) clips the canvas; a vignette overlay darkens toward the edge and adds a soft elliptical highlight at upper-left, and a diagonal glint band drifts back and forth over nine seconds. Rendering: a hidden source canvas 1.5x the lens diameter (so any offset up to a quarter radius still fully covers the wedge) holds 6-40 drifting shapes: gradient blobs (radial gradient from colour A through colour B to transparent, offset highlight) and polygonal shards of 3-6 sides with jittered vertices, linear gradient fill and a faint white stroke. Shapes drift with small velocities, rotate, "breathe" by 8% with individual sine phases and wrap at the edges. The palette determines both colours and composite mode: Jewel (#7b1fa2 #c2185b #0288d1 #00897b #f9a825 #3949ab #e53935 on #07050d, screen), Pastel (#f8bbd0 #b3e5fc #c8e6c9 #fff59d #e1bee7 #ffe0b2 #b2dfdb on #f7f1e6, multiply), Neon (#39ff14 #ff073a #00f0ff #ff9d00 #ff00e6 #c6ff00 #7a5cff on #020206, lighter), Autumn (#8b2500 #d2691e #daa520 #556b2f #a0522d #cd5c5c #f4a460 on #1a0f08, source-over). The display canvas is DPR-aware and sized by a ResizeObserver. Each frame it draws N wedges (6, 8, 10 or 12 selectable): for every wedge it clips a sector of angle 2π/N (extended by 0.004 rad to hide seams), then for even wedges rotates by i·a and for odd wedges applies a reflection across the line at angle (i+1)·a/2 (rotate(c), scale(1,-1), rotate(-c)) so that each odd wedge is the mirror image of its neighbour, producing seamless mirror symmetry. The source is drawn centred with an offset (ox, oy). Thin overlay-blended white lines along the wedge edges suggest the mirror facets. The whole image rotates slowly (0.06 rad/s) on its own and the offset wanders gently on a slow sine so the pattern never freezes. Interaction: pointer position over the page maps to the source offset (±25% of the radius on each axis), eased with an exponential smoothing so the user "turns" the kaleidoscope by moving the hand; touch moves are captured with preventDefault. Footer controls in brass-gradient segmented pills: fold count (6/8/10/12), palette swatches, a "Shard density" slider 6-40 that adds or removes shapes without resetting the rest, and a "Shake" button (also double-click on the lens) that rebuilds all shapes and gives them a brief 3x velocity kick. Header shows the live fold count and shard count. Reduced motion disables the rim sheen and glint animations, stops auto-rotation and slows shape drift to 30%.

Design a refined, self-contained interactive periodic table of all 118 elements on a dark slate background (radial gradient from #222a3b at the top to #1b2130). Use a quiet, editorial typographic hierarchy: the title "The Elements arranged" in Georgia / "Iowan Old Style" / Palatino at clamp(26px, 3.4vw, 44px) with the word "arranged" italic and muted (#8b95a8); body and labels in ui-sans-serif / system-ui at 12-13px with light letter-spacing; element symbols in the serif face so they read like type specimens. Layout: a CSS Grid of 18 columns (minmax(46px, 1fr)) and 10 rows — seven periods, a 14px spacer row, then the lanthanide and actinide rows placed under columns 3-17 — with each tile positioned by --row/--col custom properties computed in JS from the atomic number using the classic long-form rules. Dashed placeholder tiles in group 3 of periods 6 and 7 read "57–71" and "89–103". The table sits in a horizontally scrollable wrapper with a 920px minimum width so on phones the whole table scrolls sideways while the header stays put. Each tile is a real <button> with the atomic number top-left (tiny, tabular), the symbol large in serif, and the name in 7-10px at the bottom (hidden under 900px). Tiles are tinted from a category colour via color-mix (16% fill, 28% border, a 2px solid accent bar at the top edge). The category palette is deliberately desaturated: alkali #c98a7a, alkaline earth #d4b483, transition metal #8fa3b8, post-transition #9bb0a5, metalloid #b8a1c9, reactive nonmetal #7fb5a6, halogen #c9c07a, noble gas #a38ec2, lanthanide #d69ea8, actinide #c48bb0, unknown #6f7580. Hovering, focusing or clicking lifts a tile 5px and scales it 1.07 with a long soft shadow and a 1px ring in its colour, using cubic-bezier(.22,1,.36,1). The detail card is absolutely positioned inside the table so it fills the classic empty region above the transition metals (groups 3-12, periods 1-3), with a 3.15 aspect ratio computed to match three tile rows, translucent slate background rgba(30,37,52,.92) with backdrop blur, 12px radius. It shows an inline SVG Bohr model: concentric faint shells (radii from 18 to 92 in a 200x200 viewBox), electrons distributed by a simple 2/8/18/32/32/18/8 fill, each shell group rotating via CSS animation with durations 6s + 3.5s per shell and alternating direction, electrons glowing via drop-shadow in the element colour, and a nucleus filled with a radial gradient. Alongside: symbol (large, coloured), name, number, category in uppercase tracking, and a definition list with atomic mass (u), electron count with shell distribution, melting and boiling points in kelvin, and the current state at the chosen temperature with a glowing dot. Under 900px the card becomes a fixed bottom sheet that slides up on tap and dismisses on outside click. Controls: a rounded search field (inline SVG magnifier) that dims non-matching tiles (matches name substring, exact or prefix symbol, or atomic number) and updates the footer count; a legend of category chips that highlights a category on hover and pins it on click (aria-pressed); a Category / State segmented toggle; and a Temperature range 0-6000 K (default 293) that switches to state mode automatically and recolours every tile as solid (#8fa3b8), liquid (#5aa7e0) or gas (#f0b46a) based on approximate melting/boiling points stored for every element (unknown data defaults to solid), with the legend showing live counts of each state. Real data: symbol, name, mass rounded to 2-3 decimals, category, melting and boiling points for all 118 elements. Reduced-motion disables orbit spinning and lift transitions.

Create a zen, meditative, self-contained HTML page in which clicking or tapping drops ink into still water and watches it bloom. Two full-screen DPR-aware canvases are stacked: a background canvas painted once per medium, and a transparent ink canvas layered above it with CSS mix-blend-mode: multiply so ink always darkens the medium beneath. Inside the ink canvas every particle is drawn with globalCompositeOperation "multiply" so overlapping inks mix subtractively (indigo over vermilion turns to a bruised plum, teal over sepia to a dark olive). The page background is a pale water grey #e7edf0; the water canvas is a radial gradient from #f1f5f6 through #e3eaee to #cfd9df at the edges with forty faint white elliptical caustic rings at 6% alpha. In Paper mode the background becomes a fibrous cream #f3ead8 covered with thousands of short random fibres (rgba(120,95,60,.12) and white at 35%) plus sixty soft mottling gradients in a warm tan. Each drop spawns 380-620 particles (scaled by viewport area) at the pointer with outward velocities of 30-120 px/s in water (14-40 in paper). Every frame each particle is advected by curl noise: a 3D Perlin gradient noise sampled at two scales (fine, 42px, for tendrils; coarse, 240px, for broad swirl), differentiated by central differences to produce a divergence-free velocity field, plus a gentle global rotation of the water about the screen centre. Particles obey friction (0.965 per frame in water, 0.90 in paper) and live 4-10 seconds. They are rendered as pre-baked 64px radial-gradient sprites of the ink colour (harder falloff for water, feathered falloff for paper), growing in size with age and fading in alpha (0.07 down to 0 in water, 0.045 in paper), so the accumulation forms organic, branching blots with dense cores and fine filaments. On impact a small cluster of denser sprites stamps the initial blot. The ink canvas is never cleared; instead, in water mode, the entire canvas is redrawn onto itself each frame (composite "copy") with a rotation of ~0.0002 rad, a 1.0004 scale and a sub-pixel translational wobble, so the whole body of ink slowly swirls and softens like true diffusion. Paper mode freezes the ink in place. Dragging with a mouse button held lays a chain of drops every 220ms. Colours are chosen from five inks: Indigo #1f2a6b, Vermilion #c8402a, Sepia #6b4a2b, Black #14141a, Teal #157a7a (keys 1-5). A "Drain" button (key D) starts a seven-second fade in which a destination-out fill removes 1.8% of the ink per frame before a final clear; the button pulses while draining. A Water / Paper segmented toggle (key P) repaints the background. The UI lives in a translucent white pill at the bottom with 26px circular ink swatches (inset shading, a thin ring appears around the selected one), 11px uppercase system-sans labels with .18em tracking. Typography and mood: the title "Sumi" in Georgia / "Iowan Old Style" / Palatino at clamp(22px, 2.6vw, 34px), with the uppercase subtitle "ink drops in water", set beside a Japanese-style vertical rule (1px gradient line fading downward, with a small dot in the current ink colour at its head) and a vertical-rl caption "墨 · still water · slow breath". A centred italic hint "touch the water" breathes in opacity until the first drop. A quiet drop counter sits bottom-right. Cursor is a crosshair; touch-action none keeps taps crisp. Reduced motion: no self-swirl of the water, faster drain, no breathing hint.

Design a single self-contained HTML landing page for a fictional 1950s roadside motel called the "Stellar Motor Lodge & Observatory", rendered in the exuberant atomic-age / googie retro-futurist style of mid-century American highway architecture. The palette is strictly turquoise #3fb8af (with a deeper #2a8f88 for text accents), mustard #e3b23c, coral #f26b5b, warm cream #f7efdc (with a slightly darker #efe3c4 band), and charcoal #2b2a2e / #3d3b42, with near-black ink #1f1e22 for headline text. The page must have zero external dependencies: all styling in a <style> block, all behavior in a <script> block, all imagery as inline SVG or CSS gradients. Typography emulates the era's script signage using only system fonts: headlines are set in an italic old-style serif stack ('Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, ui-serif) at very large sizes with tight line-height, and the word "tomorrow's" in the hero headline is coral with a hand-drawn turquoise underline shaped with an asymmetric border-radius so it reads like a brush swash. Under the headline, an inline SVG "swash rule" — a long S-curve stroke in coral capped with a turquoise dot — reinforces the script feel. Body and UI text use a neutral sans ('Helvetica Neue', Helvetica, Arial, system-ui) with wide-tracked uppercase kickers and labels (letter-spacing 0.3em). Layout: a charcoal header whose bottom section is cut with clip-path into a dramatically angled googie roofline (rising left to right), finished with a striped mustard/coral/turquoise fascia stripe. A crooked, glowing neon "NO VACANCY" sign hangs off the right side of the roof, its coral "VACANCY" word flickering via a keyframe animation while the "NO" is dim and unlit. The hero is a two-column grid: copy and two pill buttons on the left (a coral 3D-shadowed "Reserve & Launch" button that squishes on press with a bouncy cubic-bezier, and a ghost outline "Tonight's Sky" button), and on the right a charcoal "launch pad" panel with a large asymmetric radius (one corner rounded to 200px). Inside the pad: randomly scattered twinkling stars, a mustard Saturn-like planet with a turquoise ring peeking from the top corner, an atom motif with three tilted orbits and glowing electrons rotating at different speeds and directions, a spinning satellite that also orbits a point, and a cream rocket with coral nose, turquoise porthole, mustard fins and "STELLAR" lettering standing on a striped launch ground. Faint pointer parallax shifts the planet and ring. Below, an amenities section on the darker cream band with a slowly rotating starburst SVG in the corner and a large turquoise boomerang shape, containing a six-card grid. Each card has a rounded shape with one exaggerated 90px corner, a playful custom SVG icon (kidney pool, color television, Sputnik lounge star, observatory dome, rocket wake-up clock, carport car), an italic serif title, and witty period copy. On hover, cards lift and rotate slightly, the icon wiggles with an overshoot ease, and a colored circle in the corner scales up to flood the card with a translucent accent. A charcoal "Observatory Program" band follows with a dashed-border evening schedule list (hover turns rows turquoise) beside an inline SVG illustration of the rooftop dome, telescope, and ringed planet. A rates section offers three cards — charcoal, turquoise and mustard — with enormous italic serif prices ($19, $27, $42) named Low Earth Orbit, Geostationary and Trans-Lunar. The footer is turquoise, with a large cream curve scooping into its top edge (a pseudo-element with an elliptical bottom radius), three columns of contact information and a wide-tracked uppercase copyright row. Interactions: clicking "Reserve & Launch" makes the rocket accelerate upward off-screen with an ease-in curve while a canvas overlay spawns coral, mustard and cream exhaust particles from the nozzle that expand, drift and fade; a charcoal pill toast slides up from the bottom confirming the reservation; the rocket then quietly resets to the pad from below. The canvas handles resize and devicePixelRatio. All continuous animation (orbits, satellite, starburst, neon, twinkle, particles, parallax) is disabled or reduced under prefers-reduced-motion. Mood: cheerful, kitschy, optimistic, but exquisitely composed with generous whitespace and disciplined color usage.

Build a full-screen, self-contained HTML5 canvas experience titled "Vector Horizon" in which the viewer flies endlessly over a procedurally generated wireframe landscape rendered in the style of 1980s vector graphics and outrun aesthetics. Everything lives in one file: one <canvas> covering the viewport, a CSS <style> block, and a <script> block. No external resources, fonts, or libraries; type is set in system stacks only (ui-monospace / SF Mono / Menlo / Consolas / 'Courier New' for HUD readouts, ui-sans-serif / system-ui for anything else). The terrain is a heightfield sampled from a hand-written 2D value noise (a shuffled 256-entry Uint8Array permutation table, smoothstep interpolation, three fractal octaves). A meandering "valley" carved along two overlapping sine curves flattens the ground near the flight path so the ridges rise dramatically to either side. The mesh is 64 columns by 48 rows; row depths are spaced with a power curve so near rows are dense and far rows sparse. Heights and projected screen coordinates are stored in Float32Array buffers and recomputed every frame. Points are projected with a simple pinhole camera (focal length proportional to the larger viewport dimension, horizon at 42% of the height) and then rotated in screen space around the horizon point by the current bank angle so the entire world tilts when steering. The camera altitude softly follows the ground under it, with a gentle sinusoidal sway in x and y for a hand-held feel (disabled under prefers-reduced-motion, which also lowers top speed). Rendering order: a vertical sky gradient (deep top color into a luminous horizon band and back to dark), 160 twinkling stars, a large sun sitting just above the horizon filled with a top-to-bottom two-tone gradient and sliced by horizontal bands of sky color whose thickness increases toward the bottom (the classic synthwave sun), a soft glowing rim around the sun, and a hazy horizon strip. Then the terrain: in wireframe mode each row strip is first filled with near-opaque sky color so ridges occlude what lies behind them, then row lines are stroked far-to-near with alpha and line width scaling with a distance-fog factor (1 − (z/far)^1.1), then column lines are stroked with a per-column vertical gradient that fades to transparent at the horizon, and finally the nearest row gets a white, glowing stroke with shadowBlur. In solid mode, each quad is filled with the palette line color shaded by a fake lighting term from local slope and height, multiplied by the fog factor, with faint edge strokes. Above the world, when throttle exceeds ~62%, radial white speed lines streak out from the horizon point with alpha proportional to throttle. A radial vignette and very faint 4px scanlines finish the frame. Four palettes selectable via segmented HUD buttons, each defining sky top, horizon glow, line RGB, glow color, two sun gradient stops and star color: Tron (sky #010409 → #052a36, cyan lines #19f0ff, amber-to-pink sun #ffb347 → #ff3d81), Synth (#0b0018 → #4a0f6a, magenta #ff2bd6, sun #ffe259 → #ff2bd6), Amber monochrome (#050300 → #2a1600, amber #ffb000, sun #fff1c4 → #ff8c00), and Blueprint (blueprint-paper blue #062052 → #12407f, pale lines #dbe9ff, white-to-blue sun). Switching palette also recolors the HUD accent via a CSS custom property. A second segmented control toggles Wireframe/Solid shading and Pause. The HUD is a translucent, blurred dark panel top-left with the label "TELEMETRY" and tabular-numeral readouts for ALT (m), SPD (kn), HDG (°) and DIST (km), each value glowing in the palette color. Bottom-right holds a vertical throttle bar and an SVG artificial horizon: a circular instrument with a clipped sky/ground pair that rotates with bank angle and translates with throttle-derived pitch, fixed yellow aircraft wings symbol, and roll tick marks. A small monospace help line explains controls. A centered "— PAUSED —" overlay appears when paused. Controls: mouse position relative to screen center steers (and banks) left/right; on touch, dragging horizontally steers and dragging vertically changes throttle; arrow keys left/right steer, up/down throttle; mouse wheel also adjusts throttle; space toggles pause. All inputs are smoothed toward targets with time-based interpolation so the camera glides. Target a steady 60fps: minimal allocation per frame, typed arrays, and no DOM writes except a throttled HUD update every ~80ms. Canvas resizes to the window and respects devicePixelRatio (capped at 2).

Create a single, self-contained HTML page called "Still Flame": a meditation aid in which a realistic candle flame swells and shrinks in time with a guided breathing cycle inside a dark, warm room. All CSS lives in a <style> tag and all JavaScript in a <script> tag; there are no external assets, fonts or libraries. Typography is extremely calm: an old-style serif system stack ('Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, ui-serif) for the title and cues, set in light weight, widely tracked small caps (letter-spacing 0.24–0.34em) in a parchment tone #e9d8c3, with a neutral system sans for tiny UI chips and tabular-numeral readouts. The room: the page background is near-black warm brown #120a07 with a wall gradient #2a1710 and a table surface #1c0f0a. A fixed full-screen layer carries two radial gradients — an orange glow (rgba(255,150,60)) centered slightly below the middle of the viewport whose alpha is multiplied by a CSS custom property --glow, and a lower wall-wash. A perspective-tilted "table" plane at the bottom picks up a blurred elliptical pool of light, also scaled by --glow. A radial vignette darkens the edges. Every frame JavaScript sets --glow from a smoothed random flicker multiplied by the current breath size and reduced when the user blows, so the whole room breathes with the flame. The candle: a tall ivory cylinder built from a horizontal linear gradient (#c9a789 → #f2dcc2 → #fbe9d4 → #e3c5a6 → #b8977a) with a softly lit elliptical top rim (::before) and an inner glow. Three wax drips hang from the rim; their heights grow very slowly over minutes (each on its own timescale) toward individual maxima while the candle is lit. A dark wick rises from the top; its tip has an ember pseudo-element that glows orange (#ff9b3d) and fades out after the flame is extinguished. The flame is a stack of five absolutely positioned layers anchored at the wick with transform-origin at the bottom: a huge blurred orange radial glow using mix-blend-mode screen, an outer teardrop (border-radius 50%/62% 62% 38% 38%) with an orange-to-red vertical gradient and slight blur, a smaller yellow mid teardrop, a thin white-yellow core, and a small blue radial base. At load, JavaScript generates three randomized @keyframes rules (eight steps each of random translateX, scale and skewX jitter) and injects them so the outer, mid and core layers flicker independently at slightly different durations; the whole flame also drifts through a slow hue-rotate. The flame's transform combines translateX(-50%) with scale(var(--breath) * (1 − 0.45·var(--bend))), skewX(−28deg·var(--bend)) and rotate(−14deg·var(--bend)), so it grows with inhalation and bends when blown. Breathing guide: a large thin SVG ring sits around the flame — a faint track circle, a dashed inner cycle-progress circle, and a warm progress arc whose stroke-dashoffset animates through each phase. Above it, centered text cues ("Breathe in", "Hold", "Breathe out", "Rest") crossfade slowly, with a small tabular countdown of seconds remaining. Three pattern chips select 4·7·8 (inhale 4 / hold 7 / exhale 8), Box (4/4/4/4) and Calm (inhale 5 / exhale 7 / rest 2). A "Begin" pill toggles the session; a status row shows the session timer (mm:ss) and completed cycle count. Inhale eases the --breath variable from 0.78 to 1.32 with a cubic in-out curve, exhale eases it back, and hold phases keep it steady. Blow interaction: holding the mouse button anywhere (not on a button) or holding the space bar ramps --bend toward 1 so the flame leans, narrows and dims the room; if held for more than about 1.5 seconds the candle goes out — the flame collapses to nothing, --glow drops to zero, the wick ember pulses and fades, and a full-screen transparent canvas emits a rising wisp of grey smoke particles (radial-gradient discs that drift with a sine sway, grow and fade) for about five seconds. Clicking the candle (or pressing space while unlit) relights it with a quick overshoot pop and the room warms back up. The smoke canvas handles resize and devicePixelRatio. Under prefers-reduced-motion the flicker keyframes and hue drift are disabled, cue crossfades shorten, and smoke lasts briefly; the breathing scale itself still works because it is the purpose of the page. Layout is fully responsive from phones to large displays using vmin-based sizing and a compact rule for short viewports.

Design a single self-contained HTML page presenting an animated, Beck-style schematic metro map for the fictional city of Vellmar. Everything — CSS, JavaScript, and the map itself — lives in one file; the map is an inline SVG (viewBox 0 0 1000 740) whose lines, stations, labels and moving trains are constructed at runtime from a compact data model. No external fonts, images or scripts. Typography is crisp official wayfinding: a system sans stack (ui-sans-serif, system-ui, 'Helvetica Neue', Helvetica, Arial) at weight 500 for everything, weight 700 for the wordmark and selected station names, tiny wide-tracked uppercase (letter-spacing 0.28em) for panel headings, and a monospace stack with tabular numerals for countdowns and the clock. Palette, day mode: warm paper background #f5f2ea with a slightly darker map panel #ebe7dc, ink #1b1e24, secondary text #5a5f6b, hairline rules #d5d0c4, a pale river band #cfe3ec, white station discs with ink strokes. Night mode swaps to background #0f1318, panel #151a21, ink #e9ecf1, secondary #9aa3b2, rules #252c36, river #17232e, and dark station discs with light strokes; all swaps animate over 0.5s via CSS custom properties, and night mode is auto-enabled when the OS prefers dark. The six lines are Crimson #d9363e, Cobalt #1f6fd6, Emerald #1e9e5a, Amber #f0a020, Violet #7b4fbf and Slate #3a8c96; status colors are good-service green #1e9e5a and delay amber #f0a020. The map: a faint 100-unit grid, a meandering river drawn as a soft filled path across the lower-middle, and a small caption "Vellmar Metro · Network Diagram · 2026". Each line is a 9-unit polyline of purely horizontal, vertical and 45° segments with round joins and caps, plus an invisible 26-unit-wide hit path for easy hovering. Lines cross at genuine interchanges (Central Vellmar, Kingsrow, Aurora Park, Lantern Court, Riverside, Botanic Gardens, Foundry Square, Priory Gate, Saltmarsh, Old Docks) which are drawn as white discs with a thick ink ring; ordinary stations are short perpendicular ticks on the side of the label, and termini get a full crossbar tick plus a smaller disc. Station labels (about 50 real names such as Westgate Quay, Harbor Mills, Tannery Steps, Museum Quarter, Weaver's Row, Ferry Landing, Eastmoor Terminal) are 11.5px, positioned with hand-tuned offsets and anchors, and use paint-order stroke with a paper-colored halo for legibility across lines. Trains: four per line (two per direction) rendered as small colored discs with a white rim and a translucent halo. Each frame a train advances along its line's path via getTotalLength/getPointAtLength at about 62 units per second; station positions along the path are pre-computed by nearest-point search, and a train that crosses a station snaps to it and dwells ~1.6s (double at termini, where it reverses). A delayed line runs at 45% speed with doubled dwell. Interaction: hovering a line (on the map, in the header legend, or in the status list) highlights it by fading every other line, its trains and its non-shared stations to 13% opacity, and thickens the hovered stroke. Clicking or keyboard-activating a station selects it (amber ring, bold label) and fills the right-hand "Next arrivals" card with the station name, colored pips for each line calling there, and up to six upcoming trains sorted by ETA, each row showing line, destination terminus ("towards …" or "Terminates here") and a monospace countdown that recomputes from live train positions four times a second — "Due" in green under three seconds, seconds under a minute, then m:ss. A "Service status" card lists all six lines with a pill badge; every 18–40 seconds a random line flips to a pulsing amber "Minor delays" badge for 14–30 seconds, which also slows its trains and annotates arrival rows. A live clock sits in the map corner. A pill button in the header toggles night mode. Layout is a two-column grid (map + 320px aside) that stacks on screens under 860px, with the map keeping its aspect ratio; reduced-motion users get slower trains and no pulsing badge.

Build a single self-contained HTML page called "Aurum Exchange" that treats a simulated financial market feed as generative art rather than a trading tool. All styles are in a <style> block and all logic in a <script> block; there are no external fonts, libraries, images or network calls. The palette is obsidian black #07080a with a marginally lighter #0c0e12 for the footer, mint #2ee59d for upward moves, rose #ff5c7a for downward moves, and gold #d4af37 used only as hairlines, a dashed price line, a thin gradient highlight along the top of each panel, and the active timeframe pill. Text is warm off-white #e8e6df at three opacities. Typography: a light, widely tracked uppercase system sans wordmark ("AURUM Exchange", ui-sans-serif / system-ui / 'Helvetica Neue'), 10px letter-spaced uppercase panel headings, and a system monospace stack (ui-monospace, SF Mono, Menlo, Consolas, 'Courier New') with font-variant-numeric: tabular-nums for every number so digits never jitter. Simulation: a tick arrives every 130ms (360ms under reduced motion). Returns follow a random walk whose variance is updated GARCH(1,1)-style (omega + alpha·r² + beta·sigma²) so volatility clusters into calm and stormy stretches, with a faint mean reversion toward 1240 so the chart stays in frame for hours. 32,000 ticks (each representing 7.5 simulated seconds) are pre-generated so the 1-hour view has history from the first frame. Candles are aggregated on demand from the tick array by bucket size (60s, 300s, 3600s) with a small cache invalidated on new ticks or timeframe/count changes. Layout: a slim header (wordmark, "Synthetic feed · AUR/USD", a three-pill timeframe toggle 1m/5m/1h, a blinking mint dot with a live clock), a main grid with the price panel taking two-thirds and a right column split between a depth-of-market panel and a sector heat panel, and a fixed 38px ticker tape footer. Panels are translucent with a 1px gold-tinted border, rounded corners, and a thin horizontal gold gradient glint along the top edge. Under 900px the grid stacks vertically and the page scrolls. A full-viewport canvas behind everything draws the generative "sonar": every tick spawns a faint ring at a random position — mint for up-ticks, rose for down-ticks — whose maximum radius grows with the move's magnitude; each ring expands and fades along with a smaller inner echo ring. A CSS radial-gradient dot grain overlays for texture. Price panel: a stats row (LAST in large light 34px monospace with a faint gold text-shadow; CHANGE colored mint/rose; HIGH, LOW and an hourly VOLATILITY figure derived from the current sigma), then a canvas candlestick chart. Candles are deliberately thin — 1px wicks, bodies at 55% of the slot — with rose filled bodies for down candles and hollow mint-outlined bodies for up candles; the newest candle carries an 18px shadowBlur glow in its color and a pulsing dot at its close. Gold hairlines run at "nice" price steps with right-aligned axis labels; faint volume bars sit at the bottom; a dashed gold current-price line ends in a mint or rose tag showing the last price; relative time marks ("-12m", "now") label the x-axis. The chart adapts the number of candles to its width and handles devicePixelRatio and resize. Depth panel: a canvas mirrored histogram with a gold center axis — 22 bid rows extending left in mint gradients and 22 ask rows extending right in rose gradients — where every level random-walks and the whole book "breathes" with a slow sinusoidal scale, with price labels every fourth level. Sector heat panel: twelve fictional sectors (Photonics, Orbital Freight, Synthetic Biology, Desalination, Fusion Utilities, Quantum Fabs, Vertical Farms, Cartography, Cold Storage, Lunar Leisure, Textiles, Timber) laid out as a three-strip weighted treemap of absolutely positioned cells whose background alpha and hue (mint/rose) recolor live from their session percentage with a 1.2s ease; strongly colored cells switch to dark text; hovering a cell scales it slightly and outlines it in gold. Ticker tape: sixteen fictional symbols (AUR, PHTN, ORBF, SYNB, DSAL, FUSN, QFAB, VFRM, CART, COLD, LUNA, TXTL, TMBR, HELX, MIRA, ZEPH) duplicated into a seamless CSS marquee (translateX −50% over 48s, paused on hover, slowed under reduced motion) with edge fade masks; each entry shows symbol, price and a ▲/▼ colored change that updates in place without restarting the animation. Every tick also nudges a random sector and a random ticker in sympathy with the index move. The page is beautiful and hypnotic, not a real trading tool.

Build a single self-contained HTML page that simulates Chladni plate resonance patterns as a piece of interactive digital art styled like a 19th-century physics laboratory instrument. The centrepiece is a square canvas representing a brushed dark-metal plate (base gradients between #2b2e33, #1f2226 and #2a2c31, with faint horizontal brush lines at 8% white and a dark vignette). Four brass bolts (radial gradients from #f0d68a through #c9a24a to #8f6f2a) sit in the corners of a bevelled housing. Over the metal, thousands of tiny cream-coloured sand grains (#f4ecd8) random-walk in proportion to the local vibration amplitude and drift down the gradient of |amplitude|, so that over a few seconds they settle onto the nodal lines and reveal the emergent pattern. Settled grains are drawn opaque, moving grains at 45% opacity, giving a soft dusty halo around crisp lines. The field is the classic Chladni equation for a square plate with free edges: z(x,y) = cos(nπx)·cos(mπy) − cos(mπx)·cos(nπy). Provide range sliders for integer modes n and m (1–9), a continuous "frequency blend" slider (0–1) that linearly interpolates the field between mode (n,m) and the neighbouring mode (n+1,m+1) so grains morph between patterns, and a grains slider (2,000–30,000) that reallocates typed arrays. Antinodes are faintly tinted with brass (rgba(201,162,74,·)) in a coarse cell grid so the plate seems to glow where it vibrates. A slow diagonal shimmer band travels across the metal at a speed proportional to the pseudo-frequency f = 40(n²+m²)+30 Hz, and changing a mode produces a brief warm flash. The control console on the right is a dark panel (#1c1f24 to #15171b) with three brass "dial" readouts (mode n, mode m, Hertz) in glowing monospace numerals (#f0d68a with text-shadow), a small oscilloscope box showing a teal (#7fd1c0) sine wave whose cycle count follows the frequency, brass gradient range sliders with round polished thumbs, and four pushbutton-style buttons with LED indicators: Sweep (auto mode that glides the blend from 0 to 1 and then advances n and m so sand reorganises live), Tone (a soft Web Audio sine oscillator that tracks the frequency; off by default), Scatter sand, and Random mode. Tapping the plate puffs nearby grains away from the pointer. A serif note recounts Ernst Chladni's 1787 bow-on-plate experiment. Typography: Georgia / Iowan Old Style / Palatino for the title and note, Courier New / ui-monospace for readouts and captions, system-ui sans for labels. Palette: near-black #0b0c0e background, panel greys, brass accents #c9a24a, cream text #e6e1d6, muted #8b8778, teal accent #7fd1c0. Layout is a two-column grid (plate + 340px console) collapsing to a single column under 900px. Respect prefers-reduced-motion by removing the shimmer, freezing the scope phase and halving simulation iterations. Canvas handles resize and devicePixelRatio (capped at 2). No external resources of any kind.

Create a single self-contained HTML page that is a playful physics toy of wooden alphabet blocks in a sunlit nursery. The whole viewport is the play area. The background is warm cream (#fff6e6 to #fbf3e4 to #f2dfc4) with a soft peach radial glow at the top right and two diagonal "morning light" beams rendered as translucent linear-gradient stripes using mix-blend-mode: screen. Along the bottom sits a soft rug band (linear gradient #d9a98a to #c48a6a with faint vertical pile stripes and a dashed white inner border) and, beneath it, a wooden desk (linear gradient #a8703f to #7a4b26 with fine repeating grain lines, a lighter #c88b52 top edge and an inner shadow). Blocks rest on the desk top. Each block is a CSS 3D cube built from six absolutely positioned faces with preserve-3d, translateZ(size/2) and rotations. Faces have a pale maple wood grain (base #e3b77f, gradient #ecc48d to #d9a86c, repeating diagonal grain stripes at low opacity, an inner light bevel via inset box-shadow). Top face is brightened, sides darkened for lighting. The front face carries a painted inset square in one of four primary paints — red (#e85c4e to #c33b30), blue (#4a86d6 to #2a5fa8), yellow (#f6cf4a to #e0ad1a), green (#63ad70 to #3f8a4d) — with a chipped corner clip-path revealing bare wood, a small worn spot and a big rounded cream letter (#fff8e8) with a soft drop shadow. The cube is tilted slightly (rotateX ~12–22°, rotateY ±14°) so its top and one side are visible, and scaled slightly larger the lower it sits for a hint of depth. Blocks drop a soft brown drop-shadow. Physics is a simple 2D simulation in JavaScript with gravity (2200 px/s²), restitution 0.32, floor friction, wall bounces, and block-on-block AABB overlap resolution over three relaxation passes that separates along the smaller overlap axis, so blocks stack on each other and slide off edges. Impacts add a little angular velocity; a spring restores the block toward upright so it wobbles and settles. Blocks are draggable with pointer events (setPointerCapture) and inherit the release velocity so they can be tossed; a dragged block is fixed in collisions so others rest on it. Controls in the header: a "spell a word" text input (uppercased letters, max 12) that spawns colour-cycled blocks spelling the word, dropping in from above one every 110 ms and landing centred; a "Shake table" button (also the Space key) that jolts every block upward with random horizontal velocity and shakes the stage via the Web Animations API; "+ Block" adds a random letter; "Tidy up" fades all blocks away. A friendly toast confirms actions. Typography uses a rounded system stack (ui-rounded, SF Pro Rounded, Arial Rounded MT Bold, Helvetica Neue, system-ui) in bold weights; the title letters are individually coloured and wiggle on hover. Buttons are chunky with 3px dark-brown (#4a3323) borders and a 4px solid offset "shadow" that compresses on press. Everything must be responsive from 360px (block size drops to 60px) to 4K, respect prefers-reduced-motion (no stagger, no shake animation), and use no external resources.

Build a single self-contained, full-viewport HTML page that is an animated cinematic scene of a lighthouse on a rocky headland during a night storm. The palette is deep navy and teal — sky gradient from #050a14 through #0b1a30 to #12314a, sea from #10384a and #0a2a3a down to #03111b — with a single warm accent: the lamp light #ffd98a / #ffb347 and a cottage window in #ffe7a8 to #e59b2c. A pale, half-hidden moon (radial gradient #e9f1f7 to #8fa2b1 with wide soft glow) sits upper right behind two layers of blurred SVG cloud ellipses (#1a2c44 far, #0f1d30 near) that drift horizontally at different speeds via CSS keyframes. The ground layer is an inline SVG with viewBox 1600×900 and preserveAspectRatio "xMidYMax slice": layered dark rock polygons (gradients #1d2632 to #070b12) form the headland; a tapered lighthouse tower uses a horizontal light-to-dark gradient (#6c7480, #e8ebef, #b3bac4, #4c535d) with three red bands (#5a1c1c, #c13a34, #9a2c28) clipped to the taper, a gallery rail, a glowing lamp room with mullions, a dark conical roof and an arched door; a tiny cottage on the slope has a warm flickering window (SMIL opacity animation) with a faint halo. Two sea layers are SVG paths whose "d" attribute is regenerated every frame by JavaScript as a sum of three sine waves (amplitude scaled by storm), with a thin foam stroke tracing the front crest. The rotating lamp is a CSS element anchored in screen space to the SVG lamp ellipse (getBoundingClientRect, re-anchored on resize): two stacked 240vmax squares with a narrow conic-gradient wedge (about 16 degrees, peak alpha 0.42 and a wider 0.14 halo), blur filters of 14px and 30px, mix-blend-mode: screen, rotating at 38 degrees per second and fading as it points away from the viewer, plus a pulsing lamp glow disc. A canvas layer above draws rain as angled streaks whose count (60 to ~1460), speed and wind angle are driven by storm intensity; every third drop that falls within the beam's angular band is redrawn in warm light. Sea spray particles burst from the wave crest at the rocks under gravity. Lightning strikes at a storm-dependent interval (never below 15% intensity): a full-screen pale blue flash element blinks twice, a bright inset box-shadow frame appears, and 450–950 ms later the scene shakes with a CSS keyframe (no audio). Clicking anywhere on the scene triggers a strike. UI: a title card top-left in an old-style serif (Iowan Old Style, Georgia, Palatino) — "The Keeper's Light" with the word Light in italic lamp-gold — and one line of poetic copy; a keeper's log line bottom-left in italics that changes with intensity; a frosted glass panel (rgba(5,12,24,0.55), backdrop blur, 1px white 8% border) bottom-right with a "Storm intensity" range slider from calm to gale whose track shades teal to white and whose thumb is a glowing brass bead, a scale row, and three monospace readouts for wind (knots), swell (metres) and rain. The slider changes rain count and speed, wind angle, wave amplitude and speed, cloud speed, spray rate and lightning frequency simultaneously. Respect prefers-reduced-motion (no cloud drift, no beam rotation, fewer drops, no shake). Canvas must handle resize and devicePixelRatio. No external resources.

Design a single self-contained HTML recipe page for "Saffron & Blood Orange Tart" that reads like a spread from a premium food magazine. The background is warm cream paper (#f6efe3) with a barely visible horizontal laid-paper texture (repeating 1px lines at 2.5% brown), a soft saffron glow (#f2a93b at 12%) top-left and a faint blood-orange glow (#c73e3a at 8%) bottom-right. Text is warm near-black #2b241d with secondary #5b4f42 and muted #9a8b78; rules are #d9cbb4; cards are #fff8ec. Accents: saffron #f2a93b / #d98a1a and blood orange #c73e3a / #8e1f24. Typography uses only system serifs — Iowan Old Style / Palatino / Georgia for display and body, with italic display for emphasis, and Courier New / ui-monospace for kickers, running heads and small caps labels with generous letter-spacing. A sticky running header spans the top like a magazine folio ("Hearth & Season · Winter Citrus … No. 14 · Saffron & Blood Orange Tart") joined by a dotted leader, with a translucent blurred backdrop. The hero is a two-column composition: left, a kicker with a short rule, an enormous display title at up to 84px with "Blood Orange" in italic blood orange and an italic saffron ampersand, an italic dek, and a row of meta figures (prep, bake, rest, difficulty); right, the tart illustrated entirely in CSS on a round plate — a white ceramic radial gradient with a thin red rim line, a crust ring using a repeating-conic-gradient fluting over a golden radial gradient with inner bevel shadows, a saffron custard disc (#ffd977 to #f2a93b to #d98a1a) with a soft highlight, six blood-orange slices placed by a rotate/translate/rotate custom-property transform around a seventh in the centre, each slice a radial gradient (pale pith, deep #c73e3a to #7a1919 flesh, cream rind) overlaid with thin white segment lines from a repeating-conic-gradient, and three saffron threads. On hover the tart rotates 6 degrees and the slices spread slightly with a buttery ease. Below a double rule, a three-column grid: Ingredients (300px), Method (fluid), Sidebar (240px). Ingredients are grouped under monospace small-cap headings with custom checkboxes: a rounded square that fills blood orange with a drawn check, while the text fades to muted and a 1.5px orange strike-through grows from left to right. A pill-shaped servings stepper (−/+, base 8, steps of 2, range 2–24) rescales every quantity live: grams and millilitres round to sensible steps, counts use Unicode fractions (½, ¼, ⅓, ⅔ …) and nouns pluralise. The Method lists eight steps with large italic saffron numerals (decimal-leading-zero counters) that shift left and turn orange on hover; five steps include inline pill timers with an SVG ring (stroke-dasharray progress), a round play/pause button and a mm:ss readout, finishing with a bounce animation and an orange ring. A "Cook mode" toggle dims all steps except the current, which grows into a cream card with a larger numeral and enlarged text, adds a sticky Previous/Next bar, supports arrow keys and Escape, and scrolls the current step into view. The sidebar holds nutrition badges (kcal, fat, carbs, protein) that lift and tilt on hover, a drinks pairing list with gradient "glass" dots, and a kitchen note with a saffron left rule. A double-rule colophon closes the page. The grid collapses to two columns under 1000px and one under 720px; print styles hide controls; reduced motion disables transitions. No external assets.

Create a single self-contained, full-viewport HTML page that simulates a starling murmuration with thousands of boids and renders it as a living ink cloud against a dusk sky. The sky is a fixed CSS gradient from slate indigo #2a2f4a at the top through mauve #5a4a6e and rust #b26a5a to warm apricot #e3a06a and #f0c48c at the horizon, with a broad orange radial glow rising from the bottom. A second "night" layer (gradient #05060c → #0b0f1e → #1a1c33 → #2b2540 with a violet horizon glow) and a layer of twelve tiny radial-gradient stars sit above it with their opacity bound to a CSS custom property --night, so a single "Dusk → night" slider from 0 to 1 cross-fades the whole sky and the birds' ink deepens accordingly. Along the bottom an inline SVG (viewBox 1600×340, xMidYMax slice) draws a silhouetted landscape: soft distant hills in #2a2333, a jagged black treeline polygon with a vertical gradient (#1c1620 to #0a0a10), dark ground, three telegraph poles with cross-arms and two sagging quadratic-curve wires spanning the frame, and a handful of small perched birds as ellipses. The flock canvas sits above the sky and below nothing else, drawn with the 2D context, DPR-aware (capped at 2) and resized with the window. The simulation uses Float32Array positions and velocities for up to 12,000 boids and a uniform spatial hash grid (Int32Array head/next linked lists, cell size = perception radius) so each bird only inspects its 3×3 neighbouring cells, capped at 24 neighbours. Rules: separation (inverse-square repulsion inside 45% of the radius), alignment (match mean neighbour velocity), cohesion (steer toward neighbour centroid), a slowly wandering attractor tracing a Lissajous-like path across the upper sky that pulls gently with distance, soft repulsion from the screen edges and from the treeline at 70% height, and predator avoidance from the cursor, which acts as a hawk with a 160px fear radius (a small dark hawk silhouette SVG follows the pointer and rotates to its heading; the native cursor is hidden). Speeds are clamped between 45% and 100% of the max speed. Each bird is drawn as a tiny elongated triangle (nose ahead, two tail points) oriented by its velocity; birds are bucketed by neighbour density into four batched paths of increasing opacity and darker shade (rgba around 22→5 with alpha 0.42→0.96) so dense regions read as near-black ink and sparse edges dissolve into the sky, and bird size shrinks gently with count. UI is quiet and poetic: a large serif title "Murmuration" (Iowan Old Style / Georgia / Palatino) with the suffix in italic amber #d9a466 and a one-sentence italic epigraph; a frosted-glass parameter panel top-right (rgba(13,15,20,0.55), blur 12px, 1px white 8% border) with a small monospace heading showing live fps and italic serif labels with amber monospace values for Birds (500–12,000), Cohesion, Alignment, Separation (0–3), Speed (1–7), Perception radius (10–80) and Dusk → night; thin 2px slider tracks with amber dot thumbs; a row of monospace outline buttons — Pause (aria-pressed, becomes Resume), Step (single simulation tick), Scatter — and a pill button bottom-right to hide/slide the panel away. Clicking or tapping the canvas scatters the flock explosively from that point; Space toggles pause and S scatters. A monospace footer hints at the controls. Respect prefers-reduced-motion by halving the simulation rate. Everything must be offline and dependency-free.

Build a single self-contained HTML page that presents a large Gothic cathedral rose window rendered entirely in inline SVG, set against a dim stone nave. The window is a circle of radius 300 (in an 800×820 viewBox) whose tracery has strict twelve-fold symmetry: twelve bevelled stone spokes drawn once as a <symbol> and instanced twelve times with <use> and rotate(30·i), plus twelve shorter spokes offset by 15° for the outer border ring. Concentric stone rings at radii 60, 136, 234 and 272 are drawn with three stacked strokes (a dark #181310 base, a mid #4a4038 body, and a thin #7a6c60 highlight offset by about 1.5px) so the mullions read as chamfered stone. The stone frame is filled with a <pattern> of ashlar blocks (#2e2824 with #1a1512 joints and #463c35 highlight lines). The glass is arranged in four rings: 24 small border panes alternating gold and sapphire, 12 tall lancet panes with pointed Gothic arches (quadratic-curve apexes) holding saints and Gospel scenes, 12 shorter lancets rotated 15° holding the Labours of the Months, and a central rosette of six ellipse petals (the Six Days of Creation) around a white-gold core called "The Mystic Rose". Each pane uses a jewel-toned radial gradient: ruby (#ff5d70 → #b3142a → #5a0812), sapphire (#6f95ff → #1f3fb8 → #0a1656), emerald (#63e39a → #128a4d → #053c22), amber (#ffd27a → #e08a12 → #6b3a02), amethyst (#d59bff → #7a2fb4 → #32104f), gold (#fff2b0 → #e8b93a → #7a5a0a). The entire glass layer is passed through one SVG filter combining feTurbulence (fractalNoise, baseFrequency .055, 3 octaves) with feDisplacementMap (scale 5) for wobbly antique glass edges and an overlay-blended mottle derived from the same noise. A sun travels behind the window on a 90-second arc: a userSpaceOnUse radialGradient (cx, cy updated each frame) fills a screen-blended circle clipped to the window, so whichever sectors the sun is behind brighten and bloom. Below the window, coloured light pools on the floor are produced by a <use> of the whole glass layer, translated down, skewed by about −28°, squashed to 34% height, blurred with feGaussianBlur (stdDeviation 9) and screen-blended at 55% opacity; the pool slides and its skew changes as the sun moves so the light lands opposite the sun. A full-screen canvas draws 100–160 dust motes drifting downward with sine sway, brighter inside a cone-shaped "beam" region whose centre leans away from the sun. A pill-shaped season selector (Winter / Summer / Evening) recolours the daylight: winter uses pale blue-white light (#dfe9ff, sun stops #ffffff → #c9d8ff), summer a warm gold (#ffe9b8, #fff6dc → #ffd47a), and evening a deep amber (#ffb56b, #ffd9a6 → #ff8a3c); a multiply-blended tint rectangle over the glass and the mote colour follow suit. Hovering or keyboard-focusing any pane brightens it (CSS filter brightness/saturate/drop-shadow with a 350ms ease) and shows a floating tooltip plus a caption line with the pane's subject and a one-line story. Typography is Georgia / Iowan Old Style / Palatino with uppercase letterspaced headings, italic muted subtitles in #a5937a on a near-black #0b0908 nave. Respect prefers-reduced-motion by freezing the sun and motes.

Create a full-viewport, self-contained HTML page that behaves like an interactive science-museum exhibit about optical dispersion. The whole scene is a 2D canvas on a near-black studio background (#04050a with a soft radial wash to #0d1018 around the centre). On the left sits a draggable white lamp (a bright radial glow, a dashed handle ring, and a tiny uppercase "LAMP" label). In the middle floats a draggable equilateral glass prism drawn as a translucent triangle with a cool blue-white linear gradient fill (rgba(180,220,255,.16) → rgba(200,230,255,.14)), luminous edges with a 14px blue shadow-blur flare, small radial lens-flare blooms at the three vertices, and three faint sinusoidal caustic ribbons that drift slowly inside the glass. At the right is a vertical projection "screen" with tick marks and an uppercase label. The lamp emits a white beam aimed at the prism. Trace 40 monochromatic rays from 400 nm to 680 nm. Each ray obeys Snell's law at every surface; the refractive index follows Cauchy's formula n(λ) = 1.5046 + 0.0042/λ² (λ in µm). Inside the prism the rays are drawn in their spectral colour (Bruton-style wavelength-to-RGB, gamma .8) with additive 'lighter' compositing at low alpha so overlapping rays read as glowing light; faint Fresnel reflections leave each entry and exit surface, and total internal reflection is handled by reflecting inside the glass. Exit rays that reach the screen paint soft vertical colour blobs, producing a rainbow band whose height depends on geometry. A toggle switches between "Physics-accurate" (true, narrow BK7-like spread) and "Artistic spread" (Cauchy B term multiplied 11×) for a theatrical fan of colour. A checkbox adds a second, inverted, draggable prism that can partially recombine the spectrum. A "Reset layout" button restores default positions. The stage is rendered to an offscreen canvas, then composited onto the visible canvas together with a vertically flipped, 28%-alpha, slightly blurred copy below a floor line at 84% height, faded with a dark gradient, to create a polished-floor reflection. All canvas work handles devicePixelRatio (capped at 2) and window resize, scaling object positions proportionally. UI chrome is minimal and museum-like: system-ui/Helvetica Neue with a light-weight two-line headline ("Why the rainbow lives inside glass", bold on the second line), a small cyan (#8fd3ff) uppercase kicker "Gallery of Optics · Exhibit 07", frosted-glass panels (rgba(14,16,24,.72) with backdrop blur and 1px rgba(255,255,255,.12) borders), and monospace readouts. A bottom-left explanatory panel states Snell's law and Cauchy's approximation and shows live stats: index at 400 nm, index at 680 nm and the angular spread between the violet and red exit rays. Hovering over the screen near a landing ray highlights that ray brightly and shows a floating monospace readout with the wavelength and its colour name, noting nearby famous spectral lines (Hα 656, Na D 589, Hβ 486, Hγ 434). On mobile the explanatory text collapses into a <details> summary and the hint text hides. Respect prefers-reduced-motion by rendering statically and only re-rendering on interaction.

Design a developer portfolio that lives entirely inside a beautiful faux terminal window. The desktop behind it is a soft mesh of radial gradients (deep indigo #1b1f3a, violet #3b2a6b, teal #0f4c5c fading to #08090f) with two huge blurred colour blobs drifting slowly. Centre a macOS-style window (max 980×680, rounded 14px) whose chrome is a frosted glass bar with red/yellow/green traffic lights, three tabs ("nova@portfolio — zsh" active, "notes.md", "server.log"), a 24px backdrop blur, a 1px hairline border and a deep 40px/90px drop shadow. Below the window, a translucent glass dock holds five gradient app icons with inline SVG glyphs (Finder, Projects, Skills, Contact, Themes) that magnify on hover with a tooltip and trigger the matching command when clicked. The terminal body uses a monospace system stack (ui-monospace, SF Mono, Menlo, Consolas, Courier New) with a green user, grey @, cyan directory and pink ❯ prompt, and an accent-coloured blinking block cursor that dims when the input is unfocused. On load, a custom block-character ASCII logo reading NOVA types in line by line (a few characters per tick) with an accent text-shadow glow, followed by a fake "Last login" line and a welcome message. A real <input> sits inline after the prompt so mobile keyboards work; on phones a pulsing "Tap to type" pill appears until focus. Implement these commands: help (two-column command list), about (key/value profile of Nova Reyes, a creative engineer in Lisbon), skills (a CSS grid bar chart whose gradient bars animate from 0 to their percentage with a cubic-bezier ease and a repeating-gradient tick texture), projects (four cards — Tidewater, Lantern, Fieldnotes, Glasshouse — with coloured left borders, tag pills, staggered rise-in animation and a hover lift), contact (email, GitHub, Mastodon, PGP fingerprint), theme <name> (switch between Dracula-like #282a36/#bd93f9, Solarized-like #002b36/#b58900, Nord-like #2e3440/#88c0d0, and Paper-light #fbf8f1/#b3541e palettes via CSS custom properties on <html>; the desktop gradient recolours too), matrix (a canvas Matrix-rain easter egg with katakana and code glyphs in the theme's green that fills the terminal for seven seconds or until any key/tap, then prints a joke), clear, history (numbered list; Up/Down arrows recall entries), plus whoami, date, echo, ls and a sudo joke. Tab completes command names (and theme names after "theme"); ambiguous prefixes print the candidates. Ctrl+L clears and Ctrl+C echoes ^C. Unknown commands print a zsh-style error in red. Keep the look modern rather than CRT: no scanlines, soft shadows, translucent surfaces, thin scrollbars, rounded tabs. Respect prefers-reduced-motion by skipping the typing animation, blob drift, cursor blink and bar transitions. Ensure no horizontal overflow at 375px and that the window fills the phone viewport height minus the dock.

Compose a full-viewport, self-contained cherry blossom (sakura) scene that feels like a quiet Japanese spring afternoon. The sky is a three-stop vertical CSS gradient driven by custom properties that JavaScript interpolates over a 90-second cycle from a cool morning (top #cfe3f5, middle #f3dfe8, horizon #fbeee6) to a golden afternoon (top #e9c9a8, middle #f6d9b4, horizon #fbe5c9) and back again; a soft radial-gradient sun disc travels along an arc from lower-left to upper-right, brightening in the golden phase. A white haze band sits at the horizon. Draw the landscape in one inline SVG (viewBox 0 0 1000 600, preserveAspectRatio xMinYMax slice so the big tree is always anchored bottom-left). In the distance, mist-blurred hills in lavender-grey #b9b3d1 and a three-tiered pagoda silhouette in #8f88b3 built from rectangles and curved-eave paths, softened with feGaussianBlur. Two trees are drawn as indigo (#2f2b52) branch paths with round caps and stroke widths tapering from 28 to 4. At about thirty anchor points near the branch tips, JavaScript scatters clusters of small circles (r 2.6–6.2) filled with three blush radial gradients (#fff3f6 → #f7c8d4 → #e2698c; #fbe0e8 → #f1b3c4 → #c9527a; #ffffff → #fbd9e2 → #e98aa6), two-thirds of them in a lightly blurred back layer and one-third crisp in front, plus a few white petal-shaped ellipses as highlights. Over the SVG lies a canvas of 120–170 falling petals with depth. Each petal is a bezier teardrop shape filled with a blush-to-deep-pink linear gradient (#fbe0e8/#f7c8d4 → #f0a3b9/#e2698c), scaled by depth z, rotating slowly, swaying with a per-petal sine, and "fluttering" by scaling its width with |cos(flip)| so it turns edge-on and back. Far petals are smaller and more transparent. The pointer's velocity pushes nearby petals (within 180 px) in the direction of movement and slightly upward; a click fires a gust that blows away from the clicked side, decays exponentially, and releases 36 fresh petals from the canopy. Petals that reach the river (the bottom 17% of the viewport) switch to a floating state: they bob with a sine and drift right with the current before recycling. The river itself is painted on the same canvas: a gradient from pale blue-grey (or dusty rose in the golden phase) to indigo #5e628c, a pink blossom-reflection glow under the large tree, nine drifting sine ripple lines with decreasing opacity, and small sun-glitter dashes beneath the sun's x position. In the upper right, an original haiku — "petals let go first / the branch remembers nothing / the river keeps all" — appears letter by letter in vertical text (writing-mode vertical-rl, italic Iowan Old Style / Palatino / Georgia, indigo, letter-spaced) with each glyph fading and settling into place. Bottom-left carries the title "Sakura Drift" with an italic pink accent and a small uppercase subtitle; a faint large 桜 sits bottom-right; a centred hint ("Move to stir the breeze · click for a gust") fades after the first click. Palette: blush #f7c8d4, deep pink #e2698c, indigo #2f2b52, soft gold #e9c27a, mist #b9b3d1. Handle devicePixelRatio and resize; respect prefers-reduced-motion by rendering a single settled frame and showing the haiku immediately.

Build a self-contained interactive tarot page set on a candle-lit velvet table. The body background is deep burgundy (#4a0f1e fading to #2c0812) with a woven cloth texture made from two crossed repeating-linear-gradients at ±45° (1px light and dark threads every 5px), a warm candle glow at the top centre (radial gradient of rgba(255,200,120,.3), blurred, gently flickering in scale and opacity on a 3.2 s loop) and a heavy dark radial vignette toward the edges. Typography is an old-style serif stack (Iowan Old Style, Palatino, Georgia) with small caps everywhere — headline "The Major Arcana" in pale gold #f3dc9a with letterspacing .22em and a soft glow, an italic subtitle in dusty rose #c9a58c, and a thin gold gradient rule. Above the deck sit three dashed-outline slots labelled Past, Present, Future in small caps; beneath each slot a reading area fades up when filled. Below the slots is a stage where all 22 Major Arcana cards live as absolutely positioned 3D elements. Card proportions are 1 : 1.66 with a width of clamp(84px, 13vw, 150px) (26vw on phones). Every card back is the same gold filigree designed once as an SVG <symbol>: a burgundy radial-gradient ground, a diamond-lattice <pattern>, a gold-gradient double border, four mirrored corner flourishes via <use> with scale flips, and a central eight-petal rosette built from one petal path rotated eight times, plus tiny gold stars. Each card front has a dark ink (#1b1424 → #2a1d36) ground, double gold frame, Roman numeral, small-caps name and a unique geometric-symbolic line illustration in gold #d9b45b drawn as its own inline SVG symbol: the Fool's cliff and sun, the Magician's lemniscate and table, the Priestess's pillars and crescent, the Empress's Venus glyph and wheat, the Emperor's horned throne, the Hierophant's triple cross and keys, the Lovers' vesica under a sun, the Chariot with star canopy, Strength's lion and lemniscate, the Hermit's hexagonal lantern, the eight-spoked Wheel, Justice's scales and sword, the Hanged Man's inverted triangle and halo, Death's scythe over a rising sun, Temperance's cups and pouring arc, the Devil's inverted pentagram and chains, the Tower with lightning and falling embers, the eight-pointed Star over water, the Moon between towers, the Sun over a wall, Judgement's trumpet and cross banner, and the World's laurel wreath with four corner emblems. Interaction: "Shuffle" collapses the deck into a stack, randomises order, then fans it into a hand-shaped arc (each card rotated about a transform-origin 2.6 card-heights below, with a 22 ms stagger; the arc angle is computed to fit the viewport width). Hovering or focusing a fanned card lifts it 18px. "Draw three" picks three random cards which fly one by one (650 ms apart) to the Past, Present and Future slots using translate transforms computed from DOM rects, then flip in 3D (rotateY 180° over 1.1 s with preserve-3d and backface-visibility) revealing a gold-foil shimmer — a screen-blended diagonal highlight sweeping across the front once, and again on hover. About 30% of draws are reversed: the card is rotated 180° and the reading switches to a reversed meaning. Users may also click or press Enter on any single fanned card to draw it into the next empty slot. Each of the 22 cards carries an original two-sentence upright reading and a two-sentence reversed reading, plus three keywords in italics. When the spread is complete the remaining cards dim; "Gather the deck" unflips and re-stacks everything. Status text is announced via aria-live. Respect prefers-reduced-motion by shortening transitions and disabling the flicker and foil animations; keep layout intact from 360px phones to 4K with no horizontal overflow.

Build a single self-contained HTML page that presents a live Gray-Scott reaction-diffusion simulation as if it were a biological specimen mounted on a laboratory slide. The simulation runs on a 200×200 grid stored in Float32Arrays (chemicals A and B, plus double buffers), using the classic 3×3 Laplacian kernel (center −1, orthogonal neighbours 0.2, diagonals 0.05), diffusion rates D_A = 1.0 and D_B = 0.5, Δt = 1.0, toroidal wrapping, and several simulation steps per animation frame (default 8, user-adjustable 1–20 via a "Metabolism" slider). The B concentration is mapped through a gamma curve and a 256-entry colour lookup table, written to a 200×200 offscreen ImageData, and then upscaled with high-quality image smoothing onto a device-pixel-ratio-aware square canvas so the patterns look soft and organic rather than pixelated. The mood is a dark natural-history cabinet: a near-black (#050505) background with faint scanline texture and very subtle warm brass (#b78a3f) and pale-mint (#9fd8c8) radial glows at the top and bottom edges. Typography is Georgia / Iowan Old Style / Palatino for the headline and body ("Reaction–Diffusion Skin" with the word Skin in italic mint), and ui-monospace / Menlo / Consolas for catalog numbers, meta readouts, chips, and axis labels with wide letter-spacing (0.18–0.34em) in uppercase. Ink colour is #e9e4d8 with a dimmer #8d877a for secondary text. The slide itself is a dark charcoal gradient card (#1a1c1d to #0c0d0e) with a thin inner border, a soft top-glass sheen, and deep drop shadow. Inside is the square "glass" canvas with an inset vignette, a faint circular reticle drawn with CSS gradients and a radial mask, four small corner brackets, and a "50 cells" scale bar in the lower right. Below the glass sits an engraved brass label: a horizontal gradient of #f0d38a → #b78a3f → #8e6a2c → #b78a3f → #f0d38a, two tiny riveted screw heads made with radial gradients, and three lines of dark brown (#2c1d05) text — "SPECIMEN" in spaced capitals, the culture name in italic serif (e.g. "Coral morphogenesis"), and the current f/k values in mono. The label updates live. On the right is a control column separated by hairline rules (rgba(233,228,216,.12)). Sections: "Preset cultures" with pill chips for Coral (f 0.0545, k 0.0620), Mitosis (0.0367/0.0649), Worms (0.0780/0.0610), Spots (0.0300/0.0620), Maze (0.0290/0.0570), the active chip inverted to cream with black text. "Parameter map" is a square draggable pad with a 10×10 grid, a soft mint radial glow, small labelled dots at each preset position, and a glowing mint ring cursor; the x-axis is kill rate k from 0.045 to 0.070, the y-axis is feed rate f from 0.010 (bottom) to 0.080 (top). Dragging anywhere sets f and k continuously, un-pressing all preset chips and relabelling the brass tag "Uncatalogued culture". Two readout boxes show f and k to four decimals. Arrow keys nudge the values when the pad has focus. "Stain palette" offers four chips with gradient swatches: Bone (black → #5a4a34 → #b9a684 → #efe6d2 → white), Bioluminescent (#010409 → #0a5a6b → #19c3b3 → #9ff7e0 → white), Oxblood (#060203 → #6b0f16 → #b8262b → #e88a5a → #fbe6c8), and Infrared (#000004 → #6a1d8f → #d33c6a → #ff9a3c → #fff6b0); each is smoothed into the LUT with smoothstep interpolation between stops. Range sliders for metabolism and brush radius use thin tracks and round cream thumbs. Three action buttons: "Photograph" in a brass-outlined gold style that flashes white when pressed and downloads a 1600×1600 PNG with a caption baked into the corner; "Reseed" and "Pause" as ghost buttons. Interactions: dragging on the canvas paints chemical B (A set to 0) along the pointer path with interpolated circular stamps so fast strokes stay continuous. Reseeding drops seven random discs plus a central one. Below everything, three short essay columns ("Method", "Handling", "Provenance") explain the chemistry, the handling, and Pearson's taxonomy. Reduced-motion users get a throttled frame rate and halved step count; all transitions are disabled. Layout is a two-column grid (canvas + 300px panel) collapsing to one column under 900px and free of horizontal overflow at 375px.

Create a self-contained HTML page that presents a series of three original mid-century-modern travel posters in a full-viewport horizontal snap-scroll gallery. The page background is a deep charcoal (#15181d) that shifts, per slide, to a soft radial tint matching each poster (warm #2b2419 for Lisbon, plum #22161b for Kyoto, navy #0f1a2c for Reykjavik). Each slide is 100vw × 100dvh, uses scroll-snap-align start with scroll-snap-stop always, and centres a 2:3 portrait poster sized to fit the viewport with a deep, layered drop shadow and a one-pixel translucent edge. Hovering a poster lifts it 6px and tilts it −0.3°. Each poster is built from three stacked inline-SVG "ink layers" (background, midground, foreground) so they can be parallaxed at different depths as the gallery scrolls and misregistered when the print-texture toggle is active. Over the artwork sits a grain layer built from a data-URI SVG feTurbulence fractal-noise tile (220px, multiply blend at ~55% opacity; a lighter soft-light variant for the dark posters). The lower 31% of each poster is a cream (#efe6d2) typographic block with a thick 3px rule at the top in the poster's rule colour, a small monospace "VISIT · Nº 01 / 03" line letter-spaced 0.32em, an 800-weight uppercase sans-serif title with −0.045em tracking and 0.92 line-height (system-ui / Helvetica Neue) whose second line is coloured in the poster's accent, and an italic Georgia tagline of real copy. Poster 01, "Lisbon by Tram": palette cream #f3e5c3, mustard #e0a526, terracotta #c8512b, teal #1e6f6a, navy #1b2a3a. A large mustard sun at upper right; a skyline of navy stacked rectangles; a teal river band; a row of flat-fronted houses in terracotta, cream and mustard with navy windows and roof triangles; a navy cobblestone ground using an SVG pattern of faint ellipses; a bold yellow number-28 tram with cream roof, four navy windows, a terracotta stripe, a navy destination plate reading "28", two spinning spoked wheels, and a trolley pole up to a curving overhead wire. Poster 02, "Kyoto in October": palette plum #3a1f2d, vermilion #d3442a, gold #e7b04a, sage #7c8b63, cream #f1e8d6. A huge cream moon at upper left; two ranks of sage mountain triangles at 55% and full opacity; a sage ground with a cream highlight line; a vermilion torii gate with curved kasagi, straight nuki beam, twin pillars and a centre tablet; seven maple leaves defined once as a reusable path and instanced with different rotations, scales and colours, each drifting gently; small gold birds; a small red maple tree in the foreground. Poster 03, "Reykjavik Nights": palette midnight #0b1a33, deep navy #142a4d, aurora green #5ee8a6, ice #cfe8f3, violet #7b5ea7. A scattering of ice-white stars; three aurora ribbons filled with vertical green-to-violet gradients that sway and skew slowly on 9/12/15-second loops; three geometric navy mountains with ice-white peaks; a stepped, ice-white Hallgrímskirkja silhouette with dark window slits; a dark harbour band with green, violet and pale reflection dashes; two small boats with green lanterns. Motion: an IntersectionObserver (threshold 0.55) adds an "in" class to the active slide, which animates the shapes in with staggered delays (0.1–0.85s) using rise, drop, pop, slide-left and slide-right transforms on a cubic-bezier(.22,1,.36,1) ease; the type block's three rows fade up in sequence. A scroll listener throttled with requestAnimationFrame translates each ink layer by its data-depth × −60px × the slide's offset from the viewport centre, giving gentle parallax as posters slide past. Vertical mouse-wheel input is converted into single-slide horizontal travel with a 700ms lock; arrow keys, previous/next pill buttons, and three bar-shaped dots (active one widens to 56px and turns white) also navigate. A fixed footer shows the current number ("01 / 03") and a "Print texture" toggle with a small LED that turns pink when on; activating it adds a body class that offsets the three ink layers by ±2–3px, switches the SVGs to multiply blending, boosts grain and saturation, adds a diagonal screen-print hatch on the type block, and gives the title a 2px offset colour shadow — a riso-style misregistration; hovering the poster in that mode exaggerates the offset. Everything honours prefers-reduced-motion by disabling entrance animations, parallax, wheel spinning, leaf drift and aurora sway. No horizontal overflow at 375px; poster width is min(100%, (100dvh − 170px) × 2/3).

Design a single-file HTML page presenting a cozy, interactive snow globe sitting in a dark teal room strung with bokeh fairy lights. The room background is a layered radial gradient from deep teal (#0e2a2e) to near-black teal (#061518) with a soft #123a3d glow rising from the floor and a heavy vignette. Eleven blurred bokeh discs in warm amber (rgba(255,214,140)) and faint aqua float slowly on 7–14 second alternating loops near the top and corners, and a thin dark curved SVG line suggests the string they hang from. The heading "Winter, kept" is set in Georgia / Iowan Old Style with the second word in italic pale gold (#fbe7a3), above a monospace catalog eyebrow "Object 088 · Glass, brass, walnut, water, glycerine". The globe assembly is sized by a CSS variable --size = min(78vw, 56vh, 520px) and stacks three pieces: a glass sphere, a brass neck, and an ornate base. The sphere is a circle filled with a radial water gradient (#1d4d63 → #0d2c42 → #061a2b), overflow hidden, with a deep drop shadow. Over it floats a "glass" layer made only of gradients: a large soft specular ellipse at upper-left, a smaller one at lower-right, a rim refraction ring (radial gradient from transparent to 35% white at the very edge, plus a 1px white inset ring and an inner faint ring 3.5% inside), a diagonal sheen, and a small blurred bright highlight streak. The neck is a gold band (#6f5218 → #d9b25a → #fbe7a3 → #d9b25a → #6f5218). The base is walnut (#2a150e / #4a2a1c / #7a4a33 / #8d5a40) with a curved plinth, a faint wood-grain repeating gradient, a fluted gold trim ring, a gold collar, a soft floor shadow, and a small engraved gold plaque reading "Blessington Lane · Christmas Eve" in italic serif. A gold music-box wind key (inline SVG butterfly key with a shaft) protrudes from the right of the base. Inside the sphere, an inline SVG winter scene (viewBox 300×300): a navy-to-teal sky gradient, a crescent moon, a few stars, a distant dark hill, a snow-covered ground with a white-to-ice gradient, three layered pine trees in three greens with snow caps, a cottage with a brown timber body, red-brown roof with a white snow ridge, a chimney with two looping smoke puffs, two amber windows (radial gradient #ffd27a → #e58f2a) that flicker gently with cross mullions, and a dark door with a gold knob. A black lamp post at the right carries a warm radial glow (#ffe6a0 → transparent) that breathes on a 4-second loop, and a white snow ellipse forms the foreground. A canvas sits over the scene, clipped to the circle, with 460 snow particles (220 under reduced motion) stored as objects with position, velocity, depth z, radius 0.7–2.6 and a settled flag. Physics runs each frame with a clamped dt: gravity proportional to flake size, turbulence from sine/cosine noise fields scaled by a flurry "energy" value that decays with exp(−dt/2.6) so a full shake settles over roughly ten seconds, drag that increases with energy, lateral sway from the globe's angular velocity, elastic reflection off the circular wall, and settling onto a floor line at 52–58% of the radius (deeper flakes lower) once vertical speed is small; energy above a threshold re-lofts settled flakes randomly. Flakes render as white or ice-blue discs with alpha by depth. The canvas is resized with devicePixelRatio and rescales particle positions on resize. Shaking: dragging the globe moves it with a clamped spring offset and measures pointer velocity; fast strokes (>900 px/s) stir the snow proportionally and inject angular velocity into a wobble spring (stiffness 42, damping 3.2) that rotates the sphere around its bottom and tilts the base by 18% of the angle; releasing lets both springs ring down. The "Shake" button throws a big random impulse; on iOS it also requests DeviceMotion permission, while other devices listen immediately and treat acceleration spikes above 13 m/s² as shakes. Clicking the key (or the "Wind the key" button) spins the key 720° with an eased animation, plays a soft music-box phrase synthesized with Web Audio (sine fundamental plus a short triangle octave, exponential decays), and gives the interior stage angular momentum so the scene slowly turns via a perspective rotateY and small translate that decays over ~7 seconds. A tiny gold "flurry" meter in the footer shows remaining energy. The whole page respects prefers-reduced-motion by disabling bokeh drift, flicker, smoke and glow animations and reducing particle count, and it has no horizontal overflow at 375px.

Build a self-contained HTML instrument: a compact two-octave analog-modelling synthesizer whose every sound is produced by the Web Audio API and which stays completely silent until the user touches it. The page background is a dark charcoal radial gradient (#2a2523 → #141312). A small intro line names the instrument ("MS-2 Duet — two-octave mono/poly synthesizer") with a monospace note that all sound is synthesized in-browser. The instrument is a hardware panel: two walnut end-cheeks built from layered gradients (#3a2216, #6b3f28, #8a5535) with a diagonal repeating-gradient wood grain, framing a brushed-aluminium face made from a vertical light-to-dark gradient (#d9dadb → #b9bbbe → #9ea1a5) overlaid with two repeating 1px/2px vertical line gradients for the brushing. Small radial-gradient screw heads with a slotted line sit at the corners. Labels are "screen-printed": dark grey (#2b2d31) uppercase sans-serif at 9–10px with 0.18–0.26em tracking, and each module is a rounded rectangle with a thin translucent outline whose title sits on the border like a silkscreened tab. Modules in a 12-column grid (collapsing to 6 and then 1 column on narrow screens): Oscillator with four rubber wave buttons showing inline SVG icons for sine, triangle, sawtooth, square, plus Detune (±100 cents) and Glide knobs; Envelope with Attack, Decay, Sustain, Release knobs and a phosphor-green graph screen that redraws the ADSR curve with a gradient fill; Low-pass Filter with Cutoff (60 Hz–16 kHz, cubic taper) and Resonance (0–24 dB) knobs and a frequency-response screen that computes the RBJ biquad magnitude in dB across a log axis from 20 Hz to 20 kHz; LFO with Rate and Depth knobs and two switch groups for target (Pitch / Filter) and shape (Sin / Tri / Sqr); a wide Scope screen; Arpeggiator with an Arp on/off rubber button with amber LED, Up / Down / Rnd pattern switch, Tempo (40–240 bpm) and Gate knobs and a row of eight amber step LEDs; and Master with a Volume knob and a green Signal LED that lights when notes play. Knobs are 40px dark caps (radial gradient #4a4d53 → #1f2125) with a repeating-conic-gradient knurl, a white pointer line, and a soft shadow ring; they rotate from −135° to +135°, are dragged vertically (160px for full travel), respond to the mouse wheel and arrow keys (shift for coarse steps), expose role="slider" with aria values, and display their formatted value (ms, s, Hz, kHz, ¢, %, dB, bpm) in monospace underneath. Rubber buttons are dark grey gradients with a 3px bottom shadow that compress 2px when pressed or when aria-pressed is true. The keyboard is a dark tray holding 25 keys from C3 to C5: white keys as flexed cream gradients with an inset bottom lip and a note name, black keys absolutely positioned at 62% of a white width and 60% height with a deep bottom shadow. Each key shows its computer-key legend (Z S X D C V G B H N J M for the lower octave, Q 2 W 3 E R 5 T 6 Y 7 U I for the upper). Pressed keys turn warm amber (#ffe0a3 → #ffc766 for white, #ff9a3b → #c76a12 for black) with a glow and sink 2px. Octave −/+ rubber buttons and a readout shift the range by up to two octaves. Audio graph: on first pointer or key interaction an AudioContext is created (power LED turns red, status reads "power on"); each voice is an OscillatorNode with detune and optional exponential glide → GainNode running an exponential ADSR (attack to 1, decay to sustain, release on note-off with cancelScheduledValues) → shared BiquadFilter lowpass → master gain → AnalyserNode (fftSize 2048) → destination. An always-running LFO oscillator feeds two gain nodes: one connected to every voice's detune (up to 120 cents), one connected to filter.frequency (up to 4 kHz); switching target zeroes the other. The arpeggiator collects held notes, sorts them, and steps with setInterval at eighth-note intervals, releasing each note after gate × interval, driving the eight step LEDs and keeping held keys lit. Mouse/touch play uses pointer capture and elementFromPoint so glissandos across keys work, with a pointer map for multitouch; computer keys track a Set to avoid repeats. The oscilloscope reads float time-domain data, triggers on a rising zero-crossing for a stable trace, draws a glowing #7dffb0 line with shadowBlur over a grid on a #06110b screen with CSS scanlines, and shows a faint jittering flat line labelled "NO SIGNAL" or "IDLE" when quiet. All canvases are resized with devicePixelRatio; the scope frame rate is throttled under prefers-reduced-motion and transitions are removed. Layout has no horizontal overflow at 375px.

Create a single self-contained HTML page that is a calm, hypnotic full-screen canvas of the bathypelagic zone. The page is extremely dark: the body carries a vertical gradient from #04102a at the top through #030b1d to #020611, and a fixed CSS vignette darkens the corners further with rgba(0,2,10,.65). In the upper left, the one-word title "ABYSSAL" is set in ultra-thin (weight 200) uppercase system sans-serif with 0.62em letter-spacing in pale blue #c9dcf0 and a soft blue text glow, under which a monospace caption reads "Bathypelagic zone · no sunlight reaches here". A bottom HUD in 10px monospace with 0.24em tracking shows a depth readout ("−3 400 m") that drifts by a few metres, a thin sweeping light bar, temperature and pressure, live counts of medusae and plankton, and four glowing dots labelled "Emission spectrum" in the oceanic palette: cyan #4fe3ff, teal #3fd9c4, ultramarine #6a7dff, violet #a56bff. A centred hint ("Move to stir the water · click to release a jellyfish") fades out after nine seconds or the first click. Everything else is drawn on a fixed canvas sized to the window with devicePixelRatio scaling and a resize handler. Each frame is cleared and composed in order: a volumetric light shaft, plankton, lantern fish, then jellyfish sorted by size. The shaft is three nested trapezoids from above the top edge to 95% of the height, filled with vertical gradients of faint blue (rgba(80,140,210,.09) down to transparent), drawn with the "lighter" composite so it adds rather than covers, and it sways slowly with two low-frequency sines. Plankton are 190 points (90 under reduced motion) with hues sampled from the palette (188°, 168°, 232°, 268° with jitter). They follow a slow current field defined by sines of their position and time, with brownian jitter and wraparound edges. They twinkle on individual phases and are drawn as tiny additive discs; when the pointer comes within 140px they are pushed away with a force scaled by pointer speed and their "glow" value spikes, which enlarges them, brightens their lightness and adds a radial halo six times their radius; glow decays exponentially. Clicking also shoves plankton within 220px outward. Jellyfish are objects with position, velocity, hue, bell radius (30–70px), pulse phase and rate. Each pulse cycle scales the bell width by 1 + 0.13·sin(phase) and squashes its height inversely; the contraction half of the cycle produces upward thrust, a gentle sink acts between pulses, slow sinusoidal wander pushes sideways, and drag damps everything, so they rise in soft surges and wrap to the bottom when they leave the top. Their bells are drawn additively from layered radial gradients: a wide dim halo, a bell body whose gradient runs from near-white at the top-centre through the hue to transparent at the rim (shaped as a semicircle top with a bezier underside), a thin bright rim ellipse, four small inner gonad glows offset around the centre, and a cool specular highlight upper-left. Beneath the bell hang 7–14 tentacles and 4 oral arms simulated as Verlet chains (14–24 points, segment length ≈ 0.22·r): each point integrates its previous-position velocity with 0.985 damping, a small constant gravity, a lateral sine sway, and a repulsion from the pointer; three iterations of distance constraints keep segment lengths with the first point pinned to the rim, so the chains trail and whip realistically as the bell surges. Tentacles are quadratic-curve strokes with a linear gradient from 50% alpha at the rim to zero at the tip; arms are thicker, brighter ribbons. Every 18–38 seconds a school of 10–22 lantern fish enters from a random side at mid-depth and crosses at 60–110 px/s with a slow vertical sine; each fish is a small dark-blue teardrop with a wiggling tail and an additive cyan photophore glow near its head plus three tiny ventral light dots. The pointer's velocity is estimated each frame and used for all disturbance effects. Clicking anywhere spawns a new jellyfish at the pointer with a hue drawn from the palette (±7°) and a random radius; the population is capped at nine, retiring the oldest, and the HUD count updates. Three jellyfish (cyan, teal, ultramarine) are seeded at load. Under prefers-reduced-motion the pulse rate slows, plankton count halves and the HUD sweep animation is disabled. The layout has no horizontal overflow at 375px (the hint wraps on narrow screens).

Build a single self-contained HTML page that behaves like an architectural blueprint drawing itself in real time. The background is a classic cyanotype: a 135° linear gradient from #0b3d91 to #1a4fa3, overlaid with a fine 16px grid and a bolder 80px major grid in translucent white (rgba(255,255,255,.08) and .16), plus a faint inline-SVG feTurbulence noise texture blended with mix-blend-mode: overlay so the paper feels physical. All linework is white ink (#ffffff) with soft variants (rgba(255,255,255,.72) and .28) for secondary text and borders. A single accent, warm amber #ffd978, is used only for the blinking "Drafting" status dot. The whole page is framed as a drawing sheet: a thin white outer border with an inset double-rule, a header with the practice name in small-caps monospace ("Halden Studio · Architecture") and the project title in Georgia/Iowan Old Style serif ("Pavilion 07 — Reading Room in the Birch Grove"). All annotations, dimensions and UI labels use ui-monospace / "Courier New". The main stage is a responsive inline SVG (viewBox 0 0 800 500) containing three layered sheets: A-101 Ground Floor Plan (walls with hatched poché, door swings, sliding glazing, shelving, a soapstone hearth, a slatted terrace, birch trees as circles, dimension lines with arrowhead markers reading 14 400 / 10 400 / 7 200 in millimetres, room labels, leader-line callouts, section marks, a north compass, a 0-2-4 m scale bar, and an exploded axonometric detail stacking slab, wall frame and CLT+zinc roof); A-201 Elevations (south, east, north and west elevations with ground hatch, parapets, cladding lines, glazing, small tree sketches and level notes); and A-301 Section A–A (cut walls and roof with hatch fill, foundations, slab, clerestory with dashed sun rays, bookshelf, chair and table silhouettes, a stick-figure scale person, level markers ±0.00 / +3.60 / +4.20, and material callouts). Every path, line, rect and circle draws itself sequentially using stroke-dasharray / stroke-dashoffset set from getTotalLength(), with a cubic-bezier(.5,.02,.28,1) ease for a hand-drawn pen feel. Pacing is prioritised: heavy cut lines first, then object lines, then thin detail, then dimension lines; durations scale with path length and successive delays overlap slightly so the draftsman never pauses. Text annotations type in character by character after the linework finishes. A blinking amber status dot reads "Drafting" and flips to "Sheet complete". Interactions: hovering any room in the plan tints it with translucent amber (rgba(255,220,120,.22)) and shows a floating tooltip with the room name in serif and its area (e.g. "Reading Room 35.4 m²"); clicking pins the highlight. A segmented sheet selector (A-101 Plan / A-201 Elevations / A-301 Section) swaps the visible layer and replays the full redraw; the title block updates its sheet number and scale. A "Print mode" toggle inverts the whole page to warm paper (#f4f1e8 → #ece7da) with blue lines (#0b3d91), with the accent becoming burnt orange #c2410c, animated over 0.8s. Keyboard shortcuts 1/2/3 switch sheets and P toggles print. A title block grid at the bottom lists Project, Client, Drawn by, Checked, Date, Revision, Scale and a large Sheet number; a legend explains line weights. Respect prefers-reduced-motion by collapsing all draw and type animations to near-instant. Everything must work offline from a double-clicked file with no external assets.

Design a single self-contained HTML landing page for a fictional type foundry called "Grain & Ligature", presenting a heavy grotesque typeface named "Lumen Grotesk". The page is ink black (#07060a) with pale lilac-white text (#f3ecf7), muted secondary text at 55% opacity and hairline rules at 12% opacity. One luminous gradient runs through the whole site: peach #ffb28a → magenta #ff3fa4 → violet #7b4dff → ice blue #a8f0ff. A fixed full-page SVG feTurbulence grain overlay at 50% with mix-blend-mode: overlay gives the black a printed, filmic texture. The fixed navigation uses mix-blend-mode: difference so it stays legible over everything; the brand name is italic Georgia/Iowan Old Style serif while nav links are uppercase 12px tracked sans with a sliding underline on hover. The hero fills the viewport with the single word "Lumen" set in the system sans stack (ui-sans-serif, system-ui, Helvetica Neue) at weight 900, clamp(84px, 25vw, 420px), tight letter-spacing (-.045em) and line-height .82. Each letter is its own inline-block span with the moving multi-stop gradient clipped to the glyph via background-clip: text; the gradient background-position is driven by CSS custom properties --mx/--my that lerp toward the pointer position each frame, so the cursor acts as a light source sweeping colour across the word. Two pseudo-element copies of each letter sit behind it with -webkit-text-stroke (a thin white 22% stroke offset one way, a fatter blurred violet 28% stroke offset the other) to emulate variable weight and layered depth. A soft radial glow in the background follows the same cursor position. Letters float independently on a 6s ease-in-out loop with staggered negative delays. Hovering a letter scales it to 1.14, lifts and rotates it -2°, adds a magenta drop shadow, pauses its float, and pops a tooltip above it (pale background, dark text) naming the glyph and its Unicode point, e.g. "m · triple arch, uni 006D · 3 stems". Beneath the word: a row of metadata (weights, release date, glyph count, languages) with serif italic values, and a small scrolling hairline indicator. Below the hero are three sections separated by hairlines, each with a gradient-tipped eyebrow label, a large serif heading with an italic gradient phrase, and a lede paragraph. Section 01 "Specimen sheet" renders a pangram cascade generated by JavaScript from 144pt down to 14pt, sizes fluid via clamp(), with monospace point/leading labels on the left and rows that nudge right and flush peach on hover. Section 02 "Type tester" has a large gradient-clipped preview paragraph and a control panel: a text input, and range sliders for Size (18–180 px), Tracking (-80 to 200 thousandths of an em) and Leading (0.80–1.80), each with a live <output> readout, plus chips for Mixed / Caps / Lower case. The preview's corner shows a live monospace info string "LUMEN GROTESK BLACK · 72 / 72 · 31 CH". Section 03 "OpenType features" is a grid of clickable cards (also keyboard-toggleable with role=button) each demonstrating a feature emulated with CSS: smcp via font-variant-caps: all-small-caps, onum via font-variant-numeric: oldstyle-nums (switching to the serif), liga/dlig via font-variant-ligatures with gradient-highlighted pairs "fi ffi st", tnum via tabular-nums on a column of clock times, frac via diagonal-fractions, swsh via the italic serif companion. Cards show a small "off/on" pill that turns ice blue when active and lift 4px with a magenta radial glow on hover. A footer lists the foundry, licences from 49 EUR, and contact. Everything respects prefers-reduced-motion (no float, instant transitions) and works offline with no external assets.

Create a single self-contained HTML focus timer called "Stillwater" that feels like a spa: calm, spacious and softly luminous. The entire palette is derived from one CSS custom property, an ambient hue --h, expressed in HSL: a deep radial background from hsl(h+40 28% 16%) to hsl(h 30% 10%), near-white text hsl(h 30% 94%), muted text at 60% alpha, hairlines at 12% alpha, translucent glass cards at 5% alpha with backdrop-filter blur. The hue starts at 200 (dusk blue) for Focus, 150 (sea green) for Short break and 270 (violet) for Long break, and drifts a further 50 degrees across each session so the whole room slowly changes colour as time passes, with 3s linear background transitions. A faint field of pinprick stars (tiny radial gradients) sits behind everything. The centrepiece is a large circular progress ring (SVG, radius 88 in a 200 viewBox, sized to min(78vw, 440px)) with 60 minute ticks around the outside, a faint track, and a 6px round-capped progress stroke filled with a two-stop linear gradient whose stop colours are recomputed live from the ambient hue (hsl(h-20 80% 72%) to hsl(h+60 80% 70%)). The ring drains as time elapses via stroke-dashoffset with a 0.9s linear transition. A small white gleam orbits the ring on a 14s rotation and pauses when the timer pauses. Inside the ring: a small uppercase tracked mode label, then huge thin numerals (font-weight 200, clamp(64px, 16vw, 124px), tabular-nums) reading MM:SS, and a hint "click the numerals to edit" — clicking opens a prompt to set that mode's length in minutes (1–120). Beneath the ring are four session dots (completed dots fill with the ring colour and glow; the current dot is scaled up), then three circular glass buttons: reset (an arrow-arc icon that rotates on hover), a larger solid main button whose SVG icon morphs between a play triangle and two pause bars (CSS d: path() transition with a JS attribute fallback), and skip. A row of <kbd> hints shows keyboard shortcuts: space start/pause, r reset, n skip, 1/2/3 modes. During breaks the body gets a "break" class that fades in a soft halo behind the ring which breathes (scale .92 → 1.08 over 7s). When a session completes, a full-screen bloom (a blurred radial gradient disc scaling from .2 to 9 while fading) plays for 3.2s, a toast slides up ("Session complete. Time to rest."), the session dots update, and the timer automatically moves to the appropriate break (long after every fourth focus) or back to focus. A soft chime is synthesised with the Web Audio API: four sine partials (C5, E5, G5, C6) staggered 180 ms apart with gentle exponential decay and a quiet detuned triangle octave, through a master gain envelope; the AudioContext is created only after the user's first start click. The document title mirrors the countdown. To the right (stacking below on narrow screens) is a glass card titled "What deserves your attention?" in Georgia serif, with a borderless text input plus a "+" button, and a minimal task list: custom round checkboxes whose inner dot scales in when checked, labels that receive an animated strike-through line and dim when done, a remove "×" that appears on hover, and a stats row showing done/total and focus minutes accumulated today. Three seed tasks are provided. Respect prefers-reduced-motion by disabling the gleam, breathing, bloom and ring transition. The layout must work from 360px to 4K with no horizontal overflow and no external assets.

Build a single self-contained HTML "pop-art halftone studio" called DOT BOMB. The page chrome is unapologetically comic-book: a primary yellow (#ffe600) background covered in a subtle CSS Ben-Day dot pattern (radial-gradient dots on a 14px grid), panels in warm paper (#fffaf0) with 4px black (#0a0a0a) borders and hard 10px offset black drop shadows, a cyan (#00b7eb) info strip, red (#e4002b) primary button, magenta (#ec008c) accents, and small rotated "stickers" ("Issue #01", "Drag the bubble") pinned to the corners of the canvas panel. Typography is heavy comic display — "Arial Black" / Impact / system sans at weight 900, uppercase — with the title "DOT BOMB!" in yellow with a 2px black text-stroke and a hard 5px black shadow, rotated -2°; body copy is a clean system sans. Buttons are 3px-bordered white blocks with 4px shadows that lift on hover and press in on click; active ones invert to black with yellow text. Range sliders are chunky: white tracks with 3px black borders and big cyan circular thumbs. The core is a square canvas (720 logical px, rendered at devicePixelRatio up to 2, resized responsively) that turns a procedurally drawn source image into a layered CMYK halftone. Three sources are drawn with the Canvas API: a stylised pop portrait (diagonal striped sky, dark bob haircut, radial-gradient-shaded face, blue irises with highlights, red lips with a white gleam, blush gradients, yellow earring, red shoulders), a bold-shapes composition (gradient field, black wedge, radial pink sphere, cyan triangle, gradient square, red disc, white dots), and big typed text (rotated, black-outlined, gradient-filled word on a radial sunburst). The source is read with getImageData, contrast-adjusted, and converted to C, M, Y, K plus luminance-derived helper channels. Each palette channel is re-screened as a grid of dots on a rotated lattice — classic angles offset from a user-controlled base (C 0°, M +60°, Y -15°, K +30° relative to the slider) — with dot radius proportional to the square root of the sampled ink density, all drawn in one batched path per channel and composited with multiply (or source-over for the neon preset) over the paper colour. A Sobel edge detector on the source luminance produces black comic outlines that are dilated by drawing the edge layer several times with sub-pixel offsets, controlled by an "Outline weight" slider (0–6). A speech-bubble overlay is drawn onto the canvas: a jagged 14-spike yellow "burst" with red text, black stroke and white inner stroke, or a white oval speech bubble with a tail; the text is editable ("POW!") and the bubble is draggable anywhere on the canvas with pointer events. Controls in the right panel: source segmented buttons (Portrait / Bold shapes / Big text with a text field that appears for the latter), sliders for Dot size (5–22 px), Screen angle (0–90°), Contrast (0.50–2.20) and Outline weight, palette preset swatch buttons showing their ink chips — Classic CMYK (#00aeef, #ec008c, #fff200, #141414 on #fffaf0), Warhol Neon (#00f0ff inverted-lum, #ff2bd6, #7b2cff on #ffe600, source-over), Newsprint (#2a2520 on #efe6d0, single K screen), Duotone (#1c1c6e shadows + #ff4d00 midtones on #fff3d6) — bubble text input and style (Burst / Speech / None), and a red "Download PNG" button that exports the canvas via toDataURL. A translucent "Screening…" flash overlays the canvas while re-rendering. Rendering is coalesced to animation frames. Below the studio, a cyan panel explains how the screens, Ben-Day fills and outlines work. Responsive from 360px to 4K, no external assets, and reduced-motion disables transitions.

Create a single self-contained HTML page called "Tension", a computational string-art loom. The page has a craft-workshop mood: a warm linen background (#efe7d8) with a barely visible woven cross-hatch of 1px repeating gradients and a soft white radial highlight, dark ink text (#22201c), muted taupe secondary text (#7a7266), a deep moss-green control panel (#2f4a3e) with brass accents (#b98a3a / #e2b862). Headings are Georgia / Iowan Old Style serif at weight 400 with an italic moss-green phrase ("Ten thousand straight lines make a curve"); data readouts use ui-monospace with tabular numerals; UI labels are small uppercase tracked system sans. A live counter in the header shows threads drawn, nail count and estimated metres of thread on a 60 cm board. The board is a square, rounded-corner stack of three device-pixel-ratio-aware canvases with a deep layered shadow: a procedurally painted wooden board (base colour per thread preset, 160 semi-transparent sinuous grain streaks from a seeded PRNG, two elliptical knots, a radial vignette and a diagonal sheen), a thread layer, and an overlay for nails and hover feedback. N nails (60–320, slider) are laid out on a selectable frame: circle, square (evenly along the perimeter) or a parametric heart resampled by arc length. Each nail head is a small radial-gradient steel dome with a soft offset shadow; hovering shows a monospace tooltip "nail 042 · 96°" and a white ring; a selected nail gets a brass ring and a dashed brass preview line to the hovered nail. A greedy algorithm weaves the image: a 256×256 target luminance map is drawn procedurally (a portrait — dark hair cap and side falls, radial-gradient-shaded face, eyes with brows, nose line, lips, neck shadow and shoulders; an "Orb" — a sphere with specular highlight and ground shadow; or "Rings" — alternating concentric bands under a diagonal fade), converted into a residual "ink needed" map (inverted when the thread is lighter than the board). From the current nail, every other nail beyond a minimum angular gap is scored by the mean residual sampled along the straight line between them; the best unused pair is chosen, the line's coverage (0.13) is subtracted from the residual, and the thread is drawn — a translucent coloured hairline with a slightly offset darker shadow line to suggest thread lifted off the wood. Threads are added at an adjustable rate (2–80 per frame) in requestAnimationFrame until the target count (400–7000) is reached or nothing is left to darken; a badge on the board reports progress. Thread/board presets: black (#1a1714) on cream birch (#e9dcbf), white (#f4efe4) on charcoal (#2b2926), crimson (#a3122a) on oak (#d9bb8a), gold (#e0b04a) on walnut (#3a281c) — each swatch shows a half-and-half disc. Changing target, frame, thread or nail count restarts the weave; raising the thread count resumes it. "Manual mode" (also entered automatically by clicking a nail) stops the weaver and lets the user click one nail to hook the thread and another to pull it across, chaining as they go; Escape releases, space pauses/resumes the automatic weaver, Clear wipes the thread layer, and Download PNG composites the three canvases into a single image. A small canvas thumbnail in the panel previews the current target map. Below, three short essays explain the greedy algorithm, why straight lines read as shade, and how to build the piece physically. The page is responsive from 360px to 4K, redraws all threads on resize, respects prefers-reduced-motion for UI transitions, and uses no external assets.

Build a single self-contained HTML page that impersonates a handheld longwave-infrared thermal camera ("THERMA-1"). The centrepiece is a 16:9 viewport set inside a dark machined bezel (rounded 26px corners, gradient from #2b2e34 through #1a1c20 to #0c0d10, four tiny rendered screws in the corners, an inner hairline inset). The viewport is a canvas that upsamples a low-resolution heat field of 160 × 90 Float32 cells to the full viewport size with bilinear smoothing, then overlays a faint horizontal scanline pattern and a radial vignette so it reads like a real sensor feed. The heat field starts at an ambient 21 °C. Every frame it diffuses (five-point Laplacian scaled by a "Diffusion" coefficient, 0.02–0.24) and relaxes exponentially back toward ambient (a "Cooling" factor, 0.95–0.999 per frame). Moving the pointer or a finger across the viewport paints heat with a Gaussian brush whose radius is user-adjustable (2–14 cells). Clicking or tapping drops an "ember": a short-lived source that grows from a 2-cell to an 11-cell radius over 1.4 seconds while its power fades, so it blooms outward and cools. A "Drop ember" button places one at random. Zero to eight "thermal ghosts" wander across the scene: each is a composite of four soft blobs (head, torso, two alternating footfalls) drifting horizontally with a gentle sinusoidal bob, like warm bodies moving behind a thin wall; they respawn off-screen when they exit. The field is false-coloured through 256-entry lookup tables. The default "IRON" palette runs black #000000 → deep violet #14003c → magenta-purple #78008c → red #d22832 → orange #fa8214 → yellow #ffdc3c → white #ffffff. Alternatives are RAINBOW (black → navy → blue → green → yellow → orange → white), ARCTIC (near-black #080a14 → #143c78 → #46a0dc → #beebfa → white) and GRAY. Palette buttons show a gradient swatch and use aria-pressed; keys 1–4 also switch palettes. The colour span auto-scales to the current min/max with a floor so an idle scene still shows sensor texture; a small amount of per-pixel random noise is added every frame for authentic bolometer grain. The HUD is a FLIR-style overlay in white monospace (ui-monospace / Menlo / Consolas stack) with dark text shadows: top-left a blinking red REC dot with elapsed time, ISO date, and current palette name; top-right emissivity readout (ε 0.95 that drifts in the third decimal), temperature range, and live FPS; bottom-left zoom/focus and ghost count; bottom-right MAX and MIN temperatures plus an inline SVG battery icon whose fill shrinks slowly and turns red below 30%. A dashed-circle crosshair sits at centre with a bold centre-temperature readout beside it. Two diamond markers track the hottest (warm amber #ffd7a1, "▲ 57.3") and coldest (ice blue #a9c4ff, "▼ 20.9") cells with short eased transitions. A vertical false-colour legend bar on the right, drawn from the active palette, has °C ticks at 150, 108, 65, 23 and −20. Corner frame brackets complete the viewfinder look. Below the bezel is a control strip styled like an instrument panel: palette group, range sliders with amber #ffb347 glowing thumbs for brush radius, diffusion, cooling and ghost count, plus Reset and Drop ember buttons. The body is a near-black radial gradient (#16181c → #07080a), overall typography is uppercase, letter-spaced monospace in muted sage grey #7c8378 with #d7dbd2 highlights. The page is responsive from 360px to 4K; the canvas honours devicePixelRatio (capped at 2) and resizes; prefers-reduced-motion disables the blinking REC dot and marker transitions and halves the simulation rate.

Create a self-contained HTML planetarium: a circular sky dome rendered on canvas, framed by a brass horizon ring with compass points, in the manner of an antique star atlas. The page background is deep midnight (#070b1c with soft radial pools of #16204a and #121a3a); the sky disc itself is a radial gradient from #0b1230 at the zenith to #080d24 and a slightly lifted #101a3f near the horizon, with an additional bluish haze ring in the outer 18% to suggest atmosphere. Typography is antique serif throughout — 'Iowan Old Style', Palatino, Book Antiqua, Georgia — with the masthead "PLANETARIUM / A Chart of the Visible Heavens" in warm brass (#efd9a1) letter-spaced uppercase with a soft glow, a thin brass rule with a ✦ ornament beneath, and monospace (ui-monospace / Courier New) for numeric readouts. Star positions come from a hand-authored catalogue of about ninety real bright stars, each with name, right ascension (hours), declination (degrees), visual magnitude, distance in light-years and constellation: Sirius, Canopus, Arcturus, Vega, Capella, Rigel, Procyon, Achernar, Betelgeuse, Hadar, Altair, Acrux, Aldebaran, Antares, Spica, Pollux, Fomalhaut, Deneb, Regulus, Polaris and so on down to the fourth-magnitude members needed to complete constellation figures. A further ~900 faint stars (magnitudes 4.4–6.6) are strewn procedurally using a seeded LCG with declination drawn as asin(2u−1) for uniform sky density. Ten real constellations are drawn as stick figures from named-star pairs: Orion, Ursa Major, Cassiopeia, Cygnus, Lyra, Scorpius, Leo, Taurus, Gemini and Canis Major. When "Figures" is on, each constellation's visible stars are wrapped in a convex hull filled with a faint brass radial gradient (rgba(201,162,94,0.13) fading to transparent), giving the impression of an engraved figure behind the lines. Labels (italic brass constellation names centred on each figure; small parchment star names for stars brighter than magnitude 1.6) can be toggled. Projection is stereographic from the zenith: for each star compute the hour angle from local sidereal time, convert to altitude/azimuth for the chosen latitude, then plot at radius R·tan(zd/2) with north at the top and east on the left, as a sky is seen when lying on one's back. Local sidereal time is derived from the chosen date and local hour via the Julian Day and the GMST polynomial (280.46061837 + 360.98564736629·d) plus a fixed longitude. The Milky Way is rendered as several wide, heavily blurred, additive-blended strokes along the galactic equator (galactic coordinates converted to equatorial using the north galactic pole at RA 192.86°, Dec 27.13°) with fainter parallel strokes at b = ±7°. The ecliptic is a dashed amber line computed from obliquity 23.44°. An optional alt/az grid draws altitude circles every 30° and azimuth spokes. Stars render as a white core plus a soft radial glow whose radius scales with brightness; a few famous stars carry their true tints (Betelgeuse and Antares orange, Rigel and Vega blue-white, Aldebaran and Arcturus amber). Bright stars twinkle subtly with per-star phase offsets unless prefers-reduced-motion is set. Hovering within 14px of a catalogue star draws a brass halo around it and raises a small parchment tooltip (name, constellation, magnitude, distance) with a pointer arrow, while a "star card" in the side panel shows RA/Dec, magnitude, distance and current altitude. The brass ring is drawn on the canvas: a linear gradient from #6b4d22 through #efd9a1, #a67c3a and #e0c17c back to #5a3f1a, with dark inner and outer hairlines, a bright inner highlight ring, engraved tick marks every 5° (longer every 15° and 30°) and N/E/S/W plus intercardinal letters rotated tangentially in dark umber #2b1c06. The side panel is frosted midnight glass with brass borders and holds: a local-hour slider (00:00–23:59), a date picker, a latitude slider (−70° to +70°), a "sidereal drift" speed slider (0–600× real time), six brass toggle switches (Lines, Figures, Labels, Milky Way, Ecliptic, Alt/Az grid), and "Set to now" / "Pause" buttons. The layout is a two-column grid that collapses to a single column under 900px; the canvas is square, sized to its container, honours devicePixelRatio (capped at 2) and redraws on resize.

Design a single-page party invitation in the spirit of the Memphis Group, 1981 Milan: loud, joyful, geometric, impeccably composed. The palette is exactly five colours — hot pink #ff5fa2, teal #22c7c0, yellow #ffd23f, near-black #141414 and lavender #c4a6ff — on a cream #fdf8ee ground that is speckled like terrazzo with eight overlapping repeating radial-gradient polka dots of different sizes and tile periods so the pattern never visibly repeats. Every edge is a thick black border (4–8px), every element wears a hard offset drop shadow in a contrasting palette colour, nothing has a soft blur or rounded corner. The hero is a full-viewport poster. Sixteen inline-SVG shapes are scattered behind and in front of the type: outlined and solid circles, solid and outlined triangles, a half-disc, a zigzag stroke, a squiggle stroke, an outlined square, a fat plus, a filled square with a dashed inner square, a 5×5 dot grid, and a ten-point star, each 70–190px, coloured from the palette, with a hard 6px black drop-shadow filter (10px on hover). Each shape is driven by a JavaScript spring integrator (stiffness 110, damping 11) on x, y, rotation and scale: shapes pop in from zero scale with 60ms staggers, hovering springs them to 1.18× scale with a random tilt and a small upward kick, clicking flings a shape to a new random position with one-and-a-half full rotations and a new colour. A "Shuffle the vibe" button re-rolls every shape's position, glyph and colour and swaps the title's colour combination. The title reads "TOTALLY / SATURDAY" in an extra-bold geometric system sans ('Avenir Next', Futura, 'Helvetica Neue', Arial Black, weight 900, uppercase, line-height 0.86, size clamp(52px, 15vw, 210px)); "TOTALLY" is pink with a 6px black shadow and a 12px teal second shadow, "SATURDAY" is yellow with black and lavender shadows and is indented. Above it a black rotated kicker bar in yellow letter-spaced caps ("Memphis Milano Revival · Est. 1981") with a pink hard shadow. Below the title an SVG squiggle of six cubic bumps is drawn on with stroke-dasharray/dashoffset over 2.2s with a snappy cubic-bezier, doubled by a teal offset copy that draws slightly later. A framed lede paragraph promises "absolutely no beige". Buttons are teal/pink/yellow slabs with 4px black borders and 7px black shadows that lift and tilt on hover and sink on press. Beneath the poster a four-cell detail strip (When / Where / Dress code / Soundtrack) in yellow, lavender, teal and pink panels separated by 8px black rules, each with a large geometric glyph in the corner that rotates and grows on hover, followed by a black-and-cream zigzag divider built from four layered linear gradients. The RSVP section pairs a giant headline "SAY YES / OR SAY / NOTHING" (teal and black hard shadows) with a form of oversized brutal inputs: 5px black borders, weight-800 type, hard 8px shadows in yellow, lavender and teal that flip to pink and lift on focus; a custom select with an inline data-URI chevron; checkbox "mood" chips that rotate and turn yellow when checked. Submitting validates name and email inline with cheeky copy, then shows a springing teal confirmation slab, fires three canvas confetti bursts (rectangles, circles, triangles in the palette with gravity, drag and tumble) and kicks all the poster shapes upward. A black footer closes the page. Everything is responsive to 360px; prefers-reduced-motion removes the springs, dash animation and confetti.

Compose a full-viewport, self-contained HTML nocturne: a moonlit lake at night whose surface is a live ripple simulation that distorts the reflection of the sky, moon, ridge line and treeline above it. The upper 56% of the screen is the scene, the lower 44% is water. Palette: deep indigo night (#05071a at the zenith through #0c1236 to #1a2352 at the horizon), silver moonlight (#d9dff0 with a white-to-#c5cde8 moon disc and a broad rgba(210,220,255) halo), near-black silhouettes (#0d1338 far ridge, #05071c treeline), and warm lantern amber (#ffb35c, rgba(255,190,110) glows). Text is a quiet serif — 'Iowan Old Style', Palatino, Georgia — in italic silver, with a small amber small-caps label. Paint the static scene once with a reusable function called at two resolutions: full device resolution for display, and one-third (one-quarter above 1400px wide) resolution for reflection sampling. The scene contains a vertical sky gradient, 260 seeded stars, a moon at 68% width / 32% of the sky height with subtle maria and a seven-radius radial glow, a low far ridge built from summed sines, a jagged treeline of alternating spike heights, and a faint mist gradient just above the waterline. Seven amber lanterns drift slowly along the far shore (three larger), pulsing gently, each with a thin light streak down to the water; they are redrawn every frame onto both the display and the low-res sampling scene so their light appears in the reflection. Two dozen fireflies blink near the near shore using a cubed-sine flicker. The water is a classic two-buffer height field at the sampling resolution: each step, new[i] = (left + right + up + down) / 2 − old[i], multiplied by a damping factor between 0.955 ("still") and 0.997 ("restless") set by a slider whose readout cycles through the words glass, calm, stirring, restless, brooding. Two simulation steps run per frame. For each water pixel compute the horizontal and vertical height gradients, then sample the mirrored scene at (x + gx·k, mirrorRow + gy·1.6k) where the mirror row is compressed slightly toward the horizon for perspective; clamp samples to the sky region. Tint the sample toward indigo and dim it progressively toward the near shore, darken pixels on steep horizontal slopes, and add a silver specular term from the vertical gradient that is Gaussian-weighted around the moon's column and modulated by a slow sine so the moon's light path shimmers as the surface moves. Upscale the water ImageData onto the main canvas with high-quality smoothing; overlay a faint horizon seam, a dark shore gradient at the bottom edge with a few swaying quadratic-curve reeds in the corners. Interactions: clicking on the water drops a ring (radius ~3 cells, amplitude 90); dragging lays down smaller rings every 28ms; a "Throw a stone" button drops a large ring somewhere in the middle; "Let it settle" zeroes both buffers; a "Random raindrops" toggle adds rain at a rate that scales with the restlessness slider; a "Lanterns on the shore" toggle hides lanterns and fireflies. When restlessness is above half, a barely-visible breeze injects tiny random disturbances so the surface never fully freezes. The top-right control panel is frosted indigo glass (blur 10px, 1px silver hairline, amber toggle knobs); a serif caption in the bottom-left reads "The lake keeps whatever the sky gives it, and gives it back a little softer." The canvas honours devicePixelRatio (capped at 2) and fully rebuilds buffers and static layers on resize; prefers-reduced-motion halves the simulation rate, disables the breeze, fireflies, reed sway and entrance animations.

Build a full-viewport, self-contained HTML instrument for composing layered organic waveforms — the finale piece of a collection, so it must feel expansive, polished and calm. The whole window is a canvas on which up to six wave layers are drawn as smooth filled paths stacked from back to front. Each layer has amplitude, frequency, phase, speed, baseline (vertical position as a percentage of the viewport), colour and visibility. A layer's surface is a sum of three sines — the fundamental, a 2.17× partial at 38% amplitude and a 4.3× partial at 16% — so the shapes read as dunes, aurora curtains or water rather than textbook sinusoids. Paths are traced with quadratic mid-point smoothing at ~220 samples per width, closed to the bottom edge, and filled with a vertical gradient that either fades the colour to transparent ("fade" presets) or darkens it to 55% ("shade" presets); a hairline white crest highlight at 22–28% opacity runs along each surface. Layers composite with a preset-specific blend mode: normal, screen, multiply or lighter (additive). Presets, each defining a two-stop background gradient, blend mode, gradient style, panel ink colour and five or six layers: Dunes (sand #f2e4cf → #c9a27a background, normal blending, shaded fills in #e9cfa8, #d4a86f, #b7804a, #8a5a33, #5b3a22, dark ink UI); Aurora (near-black #03050f → #0b1b2b, screen, fading fills in #36f2b5, #3ac8ff, #a86cff, #ff6ad5, #1ef0d8); Tide (pale #dfeaf1 → #7fa4bd, multiply, shaded blues #bcd8e6 → #123a52, dark ink); Silk (#1a1520 → #3a2740, screen, pastel #f7c9d8, #c9b8f5, #9fd6f0, #f6e3b4, #e9a5c9); Nebula (#050208 → #150a26, lighter, six layers in #5a1a8c, #c026a6, #ff4f7a, #3b3cff, #ffb26a, #22e0ff). A soft radial light in the upper left and a faint vignette add depth behind the waves. A "Harmony" toggle locks every layer's frequency to a shared fundamental multiplied by just-intonation ratios (1, 3/2, 2, 5/4, 5/3, 5/2) and exposes a Fundamental slider, disabling per-layer frequency; a "Flow" toggle (and the space bar) pauses time. Dragging anywhere on the canvas bends the waves locally: each pointer movement adds a Gaussian bump (σx 110px, σy 160px) whose strength follows the vertical drag delta and which decays over roughly a second, affecting layers in proportion to how close their baseline is to the pointer. "Export SVG" serialises the current frame — background gradient, per-layer gradient defs, quadratic paths and mix-blend-mode — and downloads it as an .svg via a Blob URL. The side panel is a tall glass column: rgba(14,16,24,.42) with 18px backdrop blur, a 1px hairline border, 18px radius, and a deep soft shadow; on light presets it flips to warm frosted white with dark ink. Typography is a refined thin sans ('Helvetica Neue', 'Avenir Next', Segoe UI, weight 200–300) with small-caps letter-spaced labels; the title "Organic Wave Lab" sits top-left at weight 200 with "Wave" in warm accent #f0c98a. The panel contains preset pills (aria-pressed), the two toggles, a layer list of reorderable chips (grip glyph, glowing colour swatch, name such as Crest / Swell / Drift / Undertow / Haze / Bed, monospace ƒ and amplitude readout, visibility and delete icon buttons) that can be dragged to reorder or moved with Alt+Arrow keys, a control block for the selected layer (Amplitude, Frequency, Phase in π units, Speed, Baseline percentage, colour picker with hex readout), an add-layer button capped at six with a wry toast, plus "Surprise me" (randomises colours and parameters into a balanced stack) and "Export SVG". A round floating button and the H key hide the panel to admire the full composition; a pill toast confirms actions. Under 720px the panel becomes a bottom sheet. The canvas is devicePixelRatio-aware (capped at 2) and resizes live; prefers-reduced-motion freezes the flow and removes UI transitions.