Claude Sonnet 5.5 100 HTML Files

Design a glassmorphism weather-and-travel experience called "Tromsø, 69.6°N" set over a living aurora borealis. Background: a full-screen aurora rendered as layered, slowly undulating curtains (canvas 2D or WebGL) — vertical luminous ribbons of green (#5dffb4), teal (#22d3c5), violet (#8b5cf6) and a rare rose (#ff6fb5) over a deep polar night (#040914 to #0b1633), with a fine star field, a faint snowy ridge silhouette and a soft reflection in a frozen lake at the bottom. Foreground: 3–4 frosted-glass cards (backdrop-filter blur(24px) saturate(160%), 1px translucent white borders with a gradient highlight, soft inner glow): an "Aurora forecast" card with a KP-index arc gauge and a 12-hour visibility sparkline; a "Tonight" card with temperature, cloud cover and moon phase; a "Best viewing spots" list with distance chips; and a "Tap to intensify" slider that raises aurora intensity. Type: light-weight geometric sans (Avenir Next / Century Gothic stack) with tabular numerals and uppercase micro-labels tracked +0.18em. Interaction: the pointer bends and brightens the curtains where it moves; cards tilt subtly in 3D toward the pointer (max 6°) with a specular sheen following the cursor; the slider (keyboard accessible) changes intensity and the number of ribbons; entrance choreography staggers the cards rising from below. Details: a tiny pulsing "live" dot, card highlights tinted by the current aurora colours, and pressing the S key launches a shooting star. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Build a WebGL full-screen piece titled "MERCURY" — a pool of liquid chrome. A fragment shader shades a slowly heaving silver-mercury surface (domain-warped fbm height field with analytic normals, or a small raymarch) reflecting a procedurally generated studio environment (soft-box strips of warm white, a cold blue rim light, a horizon gradient), with fresnel, subtle chromatic aberration toward the edges and a whisper of iridescent oil-slick tint only at grazing angles (#7df9ff, #ff7ad9, #ffe27a). Palette: gunmetal #0a0b0d, silver #d9dde3, ice #eaf4ff, and one champagne accent #e8d9b5 for text. Typography: the single huge word MERCURY in a wide-tracked light grotesque set with mix-blend-mode: difference so it inverts over the highlights, plus tiny mono captions ("Hg · 80 · 200.59 u", "Liquid at room temperature"). Interaction: the pointer drops a heavy finger into the metal, creating gaussian dents and expanding ring waves (keep the last ~8 impacts as uniforms with position and start time); click/tap drops a droplet ripple; press-and-hold makes the whole surface swell. Idle: an invisible drifting finger keeps the surface alive. Fallback without WebGL: an animated CSS conic-gradient chrome. Render at ~0.75 resolution scale on high-DPR screens for speed. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create a PURE-CSS illustration (no JavaScript at all) of a lighthouse on a rocky islet at dusk, titled "Cape Verity Light". Compose it from divs, gradients, clip-path and box-shadows (a single tiny inline <svg> filter for film grain is allowed). Scene: sky gradient from deep teal (#0d2b3e) to a coral-peach horizon (#ff9a76) with a low sun sliver; twinkling stars (box-shadow stars with keyframed opacity); drifting layered clouds; a striped tower (cream and signal red #d64933) with gallery and lantern room; a rotating beam made from a conic-gradient wedge with soft blur that sweeps across the sky and lights the clouds as it passes; three layers of animated waves (translateX loops at different speeds using radial-gradient masks) with foam highlights; a few seagull silhouettes gliding; rocks with rim lighting; a window that glows and flickers. Typography: a small elegant caption at the bottom, "CAPE VERITY LIGHT · est. 1874", in spaced old-style serif small caps. Interaction using CSS only: :hover on the lantern boosts the beam brightness, and a :checked checkbox hack styled as a brass lever toggles day/night ("Light the lamp"). Use vmin units so the scene scales gracefully on any screen, and a prefers-reduced-motion fallback that slows loops. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Craft an antique-instrument simulation: a Victorian brass harmonograph that draws with damped pendulums. Central stage: a cream cotton-paper disc on a walnut board; a small brass pen nib with a soft shadow draws in sepia/oxblood ink (#5b2a1c, #9c2f2f, #1f3a5f selectable) the curve x = A1·sin(f1·t + p1)·e^(−d1·t) + A2·sin(f2·t + p2)·e^(−d2·t), y similarly with two more pendulums. The drawing progresses over ~25–40 s of accelerated time onto a canvas with subtle pressure variation and a paper-grain overlay; when the pendulums have decayed the drawing is complete and a "Set another" button starts a fresh drawing with new ratios. Controls: four brass rotary knobs (draggable, keyboard-accessible with arrow keys) for frequency ratio (musical ratios 2:3, 3:4, 4:5 with slight detuning), damping, phase and paper turntable speed, plus little glass ink bottles to choose the ink. An engraved plaque reads "Patent Harmonic Recorder No. 7" with a live readout of the ratios in small caps, and a list of presets ("Rose", "Lissajous Knot", "Spider"). Palette: parchment #f3e9d2, walnut #3b2416, brass #c9a24d / #8c6a24, ink sepia. Type: old-style serif with small caps and old-style numerals; engraved labels via text-shadow highlights. Delight: the pen wobbles by a micro amount, and the paper slowly rotates like a turntable when the "Turntable" switch is on. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Design a minimal-luxury landing page for a fictional watchmaker, "MAISON VALCOURT — Calibre One". Palette: black #0b0a09, champagne #d8c39a, ivory #f3ead8, smoked bronze #6b5a3c. Typography: an ultra-thin high-contrast Didone serif (Bodoni / Didot stack) at huge scale, paired with tiny tracked capitals. Hero: an SVG watch dial centre stage — engraved guilloché pattern from concentric wavy paths, applied indexes, blued hands, a sweeping second hand showing the real time with a tiny overshoot bounce, a power-reserve subdial and a moon-phase aperture; a conic-gradient glint sweeps across the case following pointer position and scroll. On scroll: "The movement" (an exploded view of gears in SVG with parallax), a horizontal specification list with hairline dividers, a dial-colour selector (champagne, midnight, verdigris) that recolours the SVG smoothly, and a "Request a private viewing" form with elegant underline inputs. Details: a small circle cursor that expands over interactive items, letter-by-letter headline reveal, hairlines that draw themselves, and almost imperceptible film grain (inline SVG feTurbulence in the DOM). The mood is silent, expensive, patient. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Simulate a murmuration of ~1500 starlings at dusk over a reed bed, titled "Murmuration". Canvas 2D boids with separation, alignment and cohesion plus a roost attractor that moves along a Lissajous path so the flock naturally stretches into rolling ribbons and vortexes. Render each bird as a tiny dark tick (a 1–2 px line oriented by velocity) with slight alpha so density builds smoky shapes. Sky gradient: peach #f7b48a to rose #d9769a to dusk indigo #2b2d5b with a low sun glow; foreground: silhouette reeds and hills, and a still lake reflection (a faint, blurred, flipped copy of the flock). The pointer is a peregrine falcon — the flock splits and flows around it; a click causes a sudden startle burst and re-forming. Text: a spare typographic composition — "Murmuration" in an elegant light serif with wide tracking, and a rotating line of field notes ("Rome, Nov 6 · 18:12 · ~40,000 birds"); a small control to change flock size (500 / 1500 / 3000). Use a spatial hash grid for neighbour search and cap counts by screen size for performance. Palette: peach/rose/indigo sky, black birds, warm cream text #fff1e0. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Build an animated woodblock-print seascape in SVG titled "Great Swell, Small Boats" (original artwork inspired by the genre, not a copy of any specific print). Layers: cream washi paper (#f2e8d5) with fibre noise via feTurbulence; a huge vermilion sun disc (#d6452f) low on the horizon with slight block-print misregistration; misty indigo mountains; rows of seigaiha (concentric scale-wave) patterns in indigo (#1b2f5b), teal (#2d6a7a) and pale blue (#a9c7d6) that undulate, each row translating and scaling with staggered sine offsets so the sea heaves; one large curling wave with claw-like foam fingers (hand-drawn paths) that slowly crests and falls on a 12 s loop; three tiny fishing boats bobbing; a bold serif title set vertically on the right with a red hanko-style seal stamp. Palette: indigo, teal, vermilion, cream, sumi black #16130f. Interaction: pointer x shifts the sun and the wave phase with per-layer parallax; hovering a boat reveals an original three-line English haiku on a paper slip; a click makes the wave crash with foam particles. Keep the aesthetic flat with a limited palette and carved-block outlines, plus subtle paper grain and edge vignette. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create an interactive topographic map titled "Contour: Rising Tides". Generate a fictional island archipelago from seeded layered value-noise/fbm and draw elevation contour lines with marching squares on a canvas (thin brown lines every 20 m, heavier index lines every 100 m with elevation labels along them), with subtle hillshading (light from NW) underneath and lowland flooding shown as translucent water with a wavy shoreline and hatched shallows. Palette: aged map paper #eadfc4, contour brown #8a5a2b, index contour #5e3a17, water #4b8fa8 / #a6cfd9, lowland green tint #7a8f4a, survey red #b83b2e. Type: typewriter/mono for coordinates plus a humanist small-caps title; a compass rose, scale bar and legend cartouche drawn in SVG. Control: a large vertical "Sea level" slider (0 to +12 m) — as it rises the shoreline recomputes and low areas flood; live readouts "Land remaining %" and "Villages at risk" (4–5 tiny village markers turn red when flooded); a "Storm surge" button adds a pulsing +2 m wave. Hovering shows a crosshair with elevation, coordinates and nearest place name. Include gentle animated water shimmer and a tiny ship sailing. Pre-render static layers to offscreen canvases and redraw only the water layer when the slider moves. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Design a neo-brutalist website for "GRIND CULT — small-batch coffee roasters". Palette: hard yellow #ffe500, hot pink #ff4fa3, cobalt #2f4bff, mint #7dffb2, off-white #fffbe6, black #111. Visual rules: 3–4px black borders, hard offset shadows (6px 6px 0 #111) that "press down" on hover/active, oversized Impact / Arial Black type in uppercase, slightly rotated stickers and badges, a CSS marquee ticker ("FRESH ROASTED ★ NO DECAF ★ NO SMALL TALK ★"). Sections: a hero with a giant headline and a sticker area where stickers are draggable with pointer events (raise z-index on pick-up, jitter rotation); an interactive "Roast dial" slider (Light to Dark) that recolours an SVG coffee-bean illustration, changes the flavour-note tags, and updates the price; a "Brew ratio calculator" (grams of coffee to millilitres of water) with big chunky inputs and a live result; product cards that flip on hover; a cheeky footer. Copy should be funny, confident and specific (real coffee vocabulary). Responsive: cards stack on mobile; keep contrast high and focus outlines thick. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Build "Ebru — Marbling Studio", an interactive paper-marbling toy on canvas. Implementation guidance: represent each ink drop as a polygon of ~180 points; when a new drop of radius r is added at centre c, every existing point p is displaced radially by p' = c + (p − c)·sqrt(1 + r²/|p − c|²) (the classic mathematical-marbling formula), then the new circle is appended; a comb/rake stroke (drag) displaces points along the drag direction with exponential falloff, p' = p + α·exp(−d/λ)·dir; a swirl tool rotates neighbours around the pointer. Render polygons in draw order with filled colours; re-subdivide long edges to keep curves smooth and cap total points (~8k). Palette: cream paper #f4ecda, indigo #23306b, vermilion #d8452b, turquoise #1f9a9a, ochre #d9a441, blush #e9b7a5, black-green #16302b, with subtle paper fibre texture and a thin gilded border. Type: a refined old-style serif for the small title "Ebru" and tracked small-caps tool labels. UI: a slim dock at the bottom with pigment swatches, a tool toggle (Drop / Comb / Swirl), "Clear tray" and "New pattern" (seeds a beautiful preset). Click to drop ink (radius grows with hold time); drag with Comb to pull lines through the paint. An automatic demo composes a preset in ~6 s with gentle comb strokes, then invites the visitor to play. Keep it at 60 fps. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Craft a layered paper-cut landscape diorama titled "Paper Hours". Build 8–10 SVG layers (far mountains, hills, pine forest, river, clouds, sun/moon) as if cut from card, each with a subtle drop shadow (feDropShadow) and paper grain, tones stepping from far (light, hazy) to near (dark) with soft fog gradients between layers. The whole diorama sits inside a deep shadow-box frame with bevel and inner shadow, centred on the page, with a small paper label "PAPER HOURS — No. 11". Parallax: pointer / device tilt shifts layers by depth; a slow idle sway keeps it alive. A segmented control switches the time of day — Dawn, Noon, Dusk, Night — and crossfades the entire palette: Dawn peach #f7c6b0 / rose #e59aa0 / plum #8f6fa8 / dusk-blue #4a3f7a; Noon mint #cdeedd / teal #5fb3a7 / sky #bfe6f5; Dusk apricot #ffb27a / coral #e8735a / plum #6b3f6e; Night navy #1c2a4d / teal #2a5c6b with stars, a glowing moon and fireflies. Tiny animated details: paper birds flapping, a small cabin with a warm window and curling smoke, a paper boat drifting on the river, clouds sliding. Type: a soft rounded sans at small sizes for labels. The feeling is tactile, calm and handmade — you should almost feel the card stock. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create a data-art page "Daylight" showing a year of daylight hours for seven latitudes. Compute daylight length per day from the standard sunrise equation: declination δ = 23.44°·sin(2π(284+N)/365), cos(H) = −tan(φ)·tan(δ), day length = 24·H/π hours, clamped for polar day/night. Places: Longyearbyen 78.2°N, Reykjavík 64.1°N, London 51.5°N, New York 40.7°N, Singapore 1.35°N, Sydney 33.9°S, Ushuaia 54.8°S. Main chart with a Line / Radial toggle: Line = day of year on x, hours of daylight on y (one y-axis, 2px lines, hairline solid recessive grid, thin end markers); Radial = angle is day of year, radius is hours, so the lines become petal-like flowers with Singapore nearly a circle. Palette: warm cream paper #f6f0e4 with ink navy #1f2a44 text, and seven distinct earthy line colours (navy #1f2a44, teal #1a8a8a, ochre #d99a1c, vermilion #d2452e, plum #7a3b7d, olive #6b8e23, slate-blue #4a78b5). A draggable date scrubber shows a vertical rule (or radial spoke) and a tooltip listing each place's daylight at that date; a big sun glyph glows in proportion to the hours; equinox and solstice markers; a shaded "polar night" band; a legend that highlights a series on hover; a small table view toggle. Editorial headline: "How much light do we get?" with a short intro. Footnote: "Computed with the standard sunrise equation; ignores atmospheric refraction." Illustrative, elegant, no clutter; label selectively (line ends and extremes only). TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Design a neumorphic smart-thermostat panel called "Halo Climate". Soft-UI look: warm grey surface #e6e2dc with white highlights (#ffffff) and darker soft shadows (rgba(163,155,143,.55)), everything extruded or pressed from the same material. Centrepiece: a large SVG rotary dial with a tick ring; drag around it (pointer or keyboard arrows) to set temperature 16–30°C in 0.5° steps with inertia and subtle snapping; the ring's arc fills with a gradient from cool aqua #4cc9f0 to warm sunrise #ff8a4c, the centre shows a big number in a rounded sans, and the whole panel's ambient tint shifts subtly with temperature. Around it: a segmented mode control (Cool / Heat / Auto / Eco) with soft pressed states, two embossed sliders (fan speed, humidity), toggle switches (Away, Night) that depress like real buttons, an inset well containing a 12-hour temperature line chart, and an animated "Estimated cost today" figure that counts smoothly. Add a faint tick sound on the dial (WebAudio, opt-in). Type: ui-rounded / rounded geometric sans with tabular numerals for readouts, tiny uppercase labels. Everything should feel physical, quiet and precise — the kind of object you want to touch. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Build a WebGL raymarched volumetric nebula "Nebula Voyager". A fragment shader marches through fbm noise clouds (24–40 steps, rendered at reduced resolution and upscaled with dithering for smoothness) coloured magenta #ff3d81, cyan #23d0ff and amber #ffb347 over deep indigo #0a0620, with a parallax starfield of thousands of stars (some with diffraction spikes) and a bright embedded star cluster. Pointer/touch steers the camera with smooth inertial yaw and pitch; wheel/pinch/scroll flies forward through the cloud; idle mode drifts automatically. Minimal HUD: a thin-line reticle, plausible fictional coordinates ("RA 05h 35m · Dec −05° 23′"), a distance counter in light-years that increases as you fly, and a palette selector with three presets — Emission, Reflection, Dark Lane — that changes colour ramps and density. Title "Nebula Voyager" in a wide, light sans with generous letterspacing; captions in mono. Fallback without WebGL: a 2D canvas starfield over CSS radial gradients. Add subtle film grain and a soft vignette. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Make a pixel-art campfire night scene "Last Light at Camp" on a low-resolution canvas (about 240×135 logical pixels) upscaled crisply with image-rendering: pixelated to fill the screen. The fire uses the classic "Doom fire" cellular algorithm: a heat buffer where each pixel propagates upward from below with random decay and a little horizontal wind, mapped to a 16-step palette from black to deep red #7a1f0b, orange #f26b1d, yellow #ffd23f and white #fff6d5, confined to a hearth with hand-authored ASCII sprite maps for logs and stones. Sky: a dithered gradient (4×4 Bayer matrix) from #0b1026 to #232a57; twinkling stars in two or three sprite sizes; a pixel moon with craters; distant pine silhouettes with parallax sway; a tent sprite with a glowing interior; a tiny character sprite (hand-authored map) sitting toasting a marshmallow; sparks that rise and blink out. Light logic: a warm dynamic light radius from the fire modulates brightness of nearby pixels (ground, logs, tent, character) with noisy flicker. Interaction: click to throw a log (the fire surges), hold to blow (wind); a small toggle for crackle sound (WebAudio filtered noise bursts), default off. A pixel caption "LAST LIGHT AT CAMP" and tiny "PRESS TO FEED THE FIRE" drawn with a hand-authored 5×7 bitmap font on the canvas. Authentic limited palette and dithering throughout. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Build "Line & Loop", a monoline alphabet lab. Hand-author stroke paths for every letter A–Z, digits 0–9 and basic punctuation (. , ! ? - space) as SVG path data on a 0–100 em grid, constructed geometrically from circles, straight strokes and arcs. A text field (default "Hello, gorgeous") renders the words in this custom typeface as SVG with round caps and joins; each glyph's strokes draw on with stagger (stroke-dashoffset). Custom-styled controls: stroke weight, letter spacing, slant, "wobble" (noise displacement of resampled stroke points), terminal shape (round / square / butt), and colour schemes (ink blue on cream #f7f1e6 / #1b2a6b with coral #ff6b4a; coral on plum; mint on forest). "Copy SVG" copies the markup (with a fallback). Layout as a bold editorial type specimen: a huge hero line, a glyph grid of all characters where hovering replays each glyph's drawing, a weights strip (thin to heavy), a pangram ("Sphinx of black quartz, judge my vow") set in the custom face, and a colophon. UI text in mono small caps. Delights: hovering the specimen makes letters bounce gently; dragging across letters erases and redraws them. The letterforms must be genuinely well designed — consistent proportions, optical balance, considered curves. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Design a long-form editorial magazine article "Before the City Wakes — The Night Bakers of Calle Alba". Palette: paper #f5f0e6, ink #1a1714, ember red #c8402a, flour tint #e9dfcb. Layout: an oversized masthead "ALBA QUARTERLY — Issue 07"; a hero headline in a Didone serif at huge scale with mixed italics and an inline SVG bread illustration; a drop cap; two or three columns of text on desktop with hyphenation and hanging punctuation; giant pull-quotes; a sticky sidebar "Timeline of a night" listing times from 21:00 to 05:30 whose current item highlights as you scroll; a thin sticky reading-progress line; line illustrations (loaf scoring, whisk, wheat stalk, brick oven) that draw themselves on scroll via stroke-dashoffset; faint flour dust drifting on a canvas; a data box "A loaf by numbers" with tiny bars; small italic captions; an end-of-article recipe card that folds open. Write about 700 words of genuinely good, sensory, specific prose (characters like Marta and Tomás, the smell, the sound of the peel on the hearth) — no filler. Type: Didone/old-style serif for text, spaced grotesque capitals for labels; a reading-time estimate. The result should feel like a printed magazine spread that breathes on screen. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Simulate synchronising fireflies (a pulse-coupled Kuramoto-style model) in a summer meadow at blue hour, titled "Synchrony". About 140 fireflies each have a phase θ and slightly different natural frequency ω; glow intensity is a sharp pulse of phase (flash at θ = 2π, then decay); when a firefly sees a nearby neighbour flash it nudges its phase forward, so the swarm gradually synchronises into rolling waves. Visuals: meadow gradient #0a1a14 to #123524; layered SVG/CSS grass blade silhouettes swaying in the foreground; a distant tree line; soft mist; fireflies as additive amber-lime (#d9ff5c / #ffd166) orbs with bokeh halos drifting on curl-noise paths. A "coherence" meter shows the order parameter r as a thin arc gauge with a live number, plus a small phase-circle plot of oscillators as dots on a unit circle. Interaction: click to flash near the pointer and force nearby fireflies forward; a "Coupling strength" slider (0–1) — at zero they blink randomly, at high values they sync quickly; a "Scatter" button re-randomises phases. Type: a quiet serif caption "Synchrony — 1,000 tiny clocks learning to agree" and tiny mono notes. Optional soft cricket ambience (WebAudio), default off. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Illustrate an SVG isometric mini-city block titled "Lumen District". Buildings: 8–12 extruded prisms with roof details, a park with trees, a road grid with small isometric cars (with head- and tail-lights) driving along paths, a tram line, a river with a bridge, glowing street lamps. A day/night toggle smoothly changes the palette: at night windows light in shifting patterns (some flicker), light cones spill on roads, a moon rises; by day it is pastel morning light with long soft shadows. Hovering a building lifts it 8px with a shadow and shows a floating info tag (name, height, use); clicking toggles a rooftop garden or antenna. Palette (night): dusk violet #2b2350, pink #ff7eb3, teal #37d5d6, warm windows #ffd27a; (day): cream #fdf3e3, sky #bfe7f2, terracotta #e07a5f, olive #81b29a. Type: a rounded sans title and micro-labels. Add tiny scene animations: birds, a hot-air balloon drifting, steam from a vent, a blinking neon sign. Draw everything as hand-authored SVG polygons using a small isometric-projection helper in JS for coordinates; the visual design must be handmade and consistent (same light direction, same edge highlights). TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Design "GRV-16", a tactile hardware-style drum machine as a web instrument. Skeuomorphic device: matte charcoal body #1d1f24 with a brushed-metal top strip, orange accent #ff6a1a, cream silk-screened labels, 16 rubber-look step pads in a row (rounded squares with inner LED glow when active and a moving playhead), 8 track rows (Kick, Snare, Clap, Closed Hat, Open Hat, Tom, Rim, Cowbell) each with mute/solo mini buttons and a volume knob, big rotary knobs for Tempo (60–180), Swing and Master (drag to turn; wheel and keyboard supported), and a Play/Stop transport with LED. Sound: fully synthesised with WebAudio — kick (sine sweep + click), snare (noise + tone), clap (bursts of filtered noise), hats (high-passed noise plus metallic square oscillators), tom, rim, cowbell; precise look-ahead scheduling with audioContext.currentTime; per-step accent via right-click or long-press. Preset patterns (House, Boom-Bap, Trap, Afrobeat) and a Random fill; a small VU meter / oscilloscope on canvas. Present the device on a desk mat with soft shadows and a subtle vignette; on mobile the grid scrolls or rotates gracefully. Show a friendly "Tap to power on" overlay so audio starts on the first gesture; master volume default modest. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create a dreamlike premium landing page for "Atelier Néroli — Eau de Parfum No. 5, Blue Hour". Hero: a soft-focus pastel gradient world (lavender #cdb8ff, apricot #ffcfa8, seafoam #b6f0e0, milky pink #ffd9e8) as slowly morphing blurred blobs with grain; centre: a glass perfume bottle drawn in SVG (transparent gradient glass, faceted cap, liquid level with a shimmering meniscus, tiny label type) floating gently and refracting the moving background; petals and citrus slices (SVG shapes) drift with parallax and slow rotation. Hovering the note pills (Top: bergamot, pink pepper / Heart: neroli, jasmine sambac / Base: cedar, musk) shifts the background hue and changes the floating particles to that note's motif (citrus wheels, white petals, wood shavings). On scroll: a story paragraph in light italic Didone, a thin-line "scent pyramid" diagram that animates in, three reviews as glass cards, and a "Discovery set" CTA pill with a shimmering gradient. Type: ultra-light high-contrast serif for display, tiny tracked caps for labels. Micro-detail: the cursor leaves a faint perfume-mist trail (canvas particles). The mood is airy, slow and weightless, with copy that smells like something. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Build a WebGL sun-drenched swimming-pool scene "Deep End" — a top-down view of a tiled pool floor with dancing caustic light patterns and a gently rippling surface. The fragment shader draws: a procedural tile grid (white-blue tiles with grout lines and slight per-tile colour variance), animated caustics (the classic iterative sin-based "tileable water caustic", layered at two scales and speeds), refraction offset of the tiles by a normal map derived from the water height (moving waves plus click ripples), specular sun glints, a soft depth gradient (deeper = more saturated turquoise #00b8c8 to #0a6f9a), swimmer lane lines (dark strips on the floor), and floating objects — an inflatable ring and a flamingo float drawn as shaded 2D shapes that bob with the waves. The pointer creates wake ripples; click/tap drops a splash with expanding rings. Type: a giant playful outlined "DEEP END" in a heavy rounded sans, partly submerged and distorted by the same refraction (render the text to an offscreen canvas used as a texture in the shader), and tiny labels "Lane 4 · 27°C". Palette: aqua, white, sun-yellow #ffe066, coral #ff7a6b. Fallback without WebGL: CSS animated radial gradients. Summery, bright, cheerful. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Design an Art Deco invitation website for "THE MERIDIAN BALL — New Year's Eve 1929", an entirely graphic experience for a fictional grand hotel. Palette: midnight emerald #06231f, deep teal #0d4a44, burnished gold #d4af37 / #f3d27a / #a9812a, ivory #f7f0dc, black. Elements: fan and sunburst patterns radiating from the bottom centre (repeating conic-gradients plus SVG), stepped ziggurat borders, chevrons, gilded double-line frames with corner ornaments, a slowly rotating starburst ornament, gold shimmer sweeping across lines (animated gradient masks), and gold hairlines that draw themselves in sequence at load (stroke-dashoffset). Typography: a stately geometric all-caps display (Futura / Century Gothic / Trebuchet stack) with wide tracking and thin weight, paired with an elegant italic serif for the poetry. Content: a live countdown to the next Dec 31 midnight with digits inside deco cartouches; the evening's programme as a timeline with deco bullets; a dress code card ("Black tie, jewels encouraged"); and an RSVP form (name, guests, a "champagne tower" toggle) that, on submit, bursts gold confetti on canvas and shows a thank-you card — nothing leaves the page. Delights: hovering gold ornaments sparkles them; faint champagne bubbles rise in the background. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Build "Orbits", a clean N-body gravity sandbox. Canvas with a warm-white star at the centre (glow plus slow corona pulse) on charcoal #101215 with faint polar grid rings and AU tick labels. Physics: Newtonian gravity with softening, leapfrog / velocity-Verlet sub-steps, dt clamped. Press-and-drag to launch a planet — a dashed predicted trajectory (integrated forward ~300 steps live) is drawn while dragging, and releasing fires it; mass via a small size selector (S / M / L / Gas giant) with colours coral #ff7a59, cyan #56d4e0, sand #e9d8a6, lilac #b8a1ff; planets leave fading trails; collisions merge bodies (conserve momentum) with a small flash; escaping bodies are removed. Presets in a slim bottom toolbar: "Solar-ish", "Binary star", "Figure-8 three-body" (Chenciner–Montgomery: equal masses, positions (−0.97000436, 0.24308753), (0.97000436, −0.24308753), (0,0); velocities (0.4662036850, 0.4323657300), (0.4662036850, 0.4323657300), (−0.9324073700, −0.8647314600) in G=1 units, scaled to the screen), "Slingshot". Controls: time-scale slider, trails toggle, clear. Readouts: body count, energy drift, elapsed years. Layout: editorial — mono small labels, a large light-weight numeral for the year counter in a humanist sans, and a slim left rail listing bodies (click to focus or delete). Palette: charcoal, warm white #fff4e0, coral, cyan, lilac. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Compose an International Typographic Style (Swiss) interactive poster "STRUCTURE / RHYTHM — Festival of Sound Design, Basel 2026". Palette: paper white #f4f2ee, Swiss red #e4002b, black #0b0b0b, one mid grey. A strict 12-column grid whose lines are visible as hairlines; huge numerals "26" in a heavy grotesque (Helvetica Neue / Arial Black stack) cropped by the page edge; a circle system of concentric rings made from many thin black strokes rotating at different speeds (SVG) with a red disc orbiting one ring, synchronised to real seconds; text set flush-left / ragged-right in three sizes with rigorous baseline alignment; vertical rotated text along an edge; a schedule table with tabular numerals and hairline rules where a red bar slides to the hovered row. Animation: grid lines draw in at load, blocks slide into place with a mechanical ease; on mouse move the columns compress and expand slightly toward the pointer (CSS grid-template-columns transitions). Interaction: clicking the red disc toggles invert mode (black background, white type); keys 1–4 switch four preset layouts (grid, stack, diagonal, poster). Keep it razor-sharp: no gradients, no shadows, no rounded corners. Copy in the voice of a design-festival programme. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create "Coral Lab", a Gray–Scott reaction–diffusion simulation you can paint into. Grid ~320×200 (scaled up smoothly), chemicals A and B, Laplacian weights (0.05 corners, 0.2 edges, −1 centre), Da = 1.0, Db = 0.5, feed f and kill k, 8–12 steps per frame in typed arrays. Render B (plus its gradient) through a palette with pseudo-3D emboss lighting — the "coral reef" ramp: deep teal #06303a, turquoise #17a2a2, peach #ffb590, coral #ff6f59, cream #fff1de. Presets as chips: Coral (f 0.0545, k 0.062), Mitosis (0.0367, 0.0649), Worms (0.078, 0.061), Mazes (0.029, 0.057), Spots (0.035, 0.065) — verify visually and adjust so each produces its characteristic pattern. Interaction: drag to paint seeds of B; an Erase tool; sliders for f and k plus a small 2D parameter-map picker (x = k, y = f) to click between behaviours; pause and reset. Layout: full-bleed simulation with a floating light panel (#fff8ef) on the left holding sliders and preset chips; title "Coral Lab" in a bold rounded serif; tiny field notes "Turing patterns · Gray–Scott". Seed a beautiful initial pattern so it looks alive immediately. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create "OUTRUN 1986", an animated retro synthwave driving scene with a steer-able car. Canvas (or CSS/SVG): sky gradient from violet #1a0b3d to magenta #a4126e to hot orange #ff7b3a at the horizon; a huge striped sun (horizontal cut-outs growing toward the bottom, animated); starfield; a distant mountain range in wireframe magenta/cyan with glowing edges; a perspective road with a dashed centre line rushing toward the viewer; neon grid on both sides; palm-tree silhouettes passing at the edges, scaling with perspective; a rear-view car drawn in SVG with glowing tail-lights and wheel motion that steers left/right with pointer x, arrow keys or device tilt; speed increases while holding the mouse or Space, and the road curves gently with the wheel; occasional oncoming light streaks. Title "OUTRUN 1986" in a chrome-gradient italic heavy sans with pink neon glow; a HUD with mono speedometer numerals and a fake "RADIO: NIGHT DRIVE FM" tape-deck widget. Colours: magenta #ff2e97, cyan #00e5ff, yellow #ffd319, base #12082c. Retro touches: CRT vignette, slight chromatic aberration, scanline flicker. Optional synthesised arpeggio bassline (WebAudio) toggle, default off. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Design a transit-map masterpiece "Metro Lumen" — a fictional subway network in the spirit of classic 1970s modernist transit design. SVG map on off-white #f7f5f0 with five lines using only horizontal, vertical and 45° segments with rounded corners: Red #e63946, Blue #1d70b8, Green #2a9d5c, Amber #f4a300, Violet #7b3fa0, plus a thin grey ring line; about 28 stations drawn as white ticks/circles with interchanges as larger white circles with black outlines; station names in a clean grotesque, set horizontally or at 45°; a river (light blue band) and a park (pale green) as context shapes; a legend and zone bands. Interactions: hovering a line in the legend isolates it; hovering a station shows a card with name, lines and next arrivals; clicking two stations computes the shortest route (BFS/Dijkstra with interchange penalties) and draws it as a thick glowing path with a step list ("Board Red toward X · 4 stops · change at Y") and total minutes; small animated train dots travel along every line (getPointAtLength) with a subtle ease at stations; a "Rush hour" toggle adds trains and pulses. Title lockup "METRO LUMEN" with a roundel logo drawn in SVG. Keyboard-accessible station buttons. The geometry and typography should be genuinely elegant. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create "Cosmic Fauna — Collector Cards", a set of six holographic trading cards you can tilt and flip. Each card (5:7 ratio) has an original SVG illustration (Nebula Fox, Comet Whale, Prism Moth, Lantern Jelly, Void Owl, Aurora Stag — stylised geometric shapes and gradients), a name bar, type/HP stats, a line of flavour text and rarity marks. Holo effect: pointer move (or device orientation) rotates the card in 3D (max 15°) and updates CSS variables for the foil position; foil = layered gradients — a rainbow linear-gradient at 115°, a conic "sparkle" layer masked with tiny stars, and a glare radial-gradient following the pointer — blended with mix-blend-mode (color-dodge / overlay / soft-light); rarities have different foil styles (regular rainbow, cosmos texture, gold etched, noisy rainbow-rare). Layout: a dark velvet table (#14111f to #241a3a) under a soft spotlight; the cards fan out in an arc that spreads on hover; clicking a card lifts it to the centre, enlarges it and flips it (3D) to a star-map back design that is also holo; arrow keys cycle; a "Pack opening" button shuffles and reveals three random cards with a satisfying flip cascade. Type: condensed bold sans for names, mono for stats. Palette: violet, magenta, teal, gold. Make the cards glorious. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Simulate a Tesla plasma globe on canvas, titled "Plasma". A glass sphere (radial gradients, specular highlights, faint softbox reflection) stands on a black brushed-metal base with a control knob, centred on near-black #05030a with a purple ambience. Inside: a glowing centre electrode and 6–14 lightning filaments flickering from the electrode toward the glass, each generated by recursive midpoint displacement (jagged bolts with occasional branches), redrawn at ~20–30 Hz with additive blending (globalCompositeOperation "lighter") using layered strokes — wide dim violet #7b2cff, medium magenta #ff4dd8, thin white core — with slowly wandering target angles. When the pointer touches the glass the nearest filaments cluster and converge on the touch point (rotate toward it, extra branches), the glass glows there, and a soft arc hum (optional WebAudio noise) responds; on release they disperse. Around the globe: subtle static sparks and ambient purple-pink light reflected on the table surface beneath. UI kept minimal: a title "PLASMA" in thin tracked caps, an "Intensity" knob (draggable), and a colour-scheme switch (Violet / Blue / Ember / Emerald). Crisp on high-DPR screens. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Build an interactive snow globe "Winter, 1924": a glass sphere on a carved wooden base with a brass plaque, sitting on a burgundy fabric-draped table lit by a warm lamp. Inside the globe, a tiny alpine village at night is drawn in SVG — snow-covered rooftops with glowing yellow windows, a church steeple, pine trees, a lamppost with a halo, a frozen pond with a skating figure, chimney smoke. Snow: ~400 flakes on a canvas clipped to the globe circle, simulated with drag and settling; press-and-drag (or shake with pointer velocity / device motion) shakes the globe — flakes are accelerated by the globe's motion relative to the glass, swirl in vortex noise and slowly settle, accumulating as a soft drift on the village floor. The globe wobbles and tilts in 3D while dragged and returns with spring physics. Glass: highlights, rim light, slight edge magnification, and a warm caustic glow spilling on the base. Palette: night blue #16224a, frost #cfe6ff, lamp amber #ffb84d, mahogany #4a2416, brass #c69c4f, cloth burgundy #5a1d2a. Type: engraved plaque text in serif small caps "WINTER · 1924 · Val d'Argent"; a handwritten-style hint "Shake me" that fades. Clicking the church rings a bell tone (WebAudio) and there is a music-box lullaby toggle, default off. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Design "Sortscape", an elegant sorting-algorithm visualiser that looks like generative art. Two views: "Spectrum" (bars of graded hues) and "Halo" (a circular wheel of ~200 slender wedges that is shuffled and then sorted until the wheel becomes a perfect gradient). Algorithms: Bubble, Insertion, Selection, Quick, Merge, Heap, Shell and Radix (LSD), each implemented as a generator yielding operations so playback can pause, step and change speed; highlight compares/swaps/writes with light halos and small counters (comparisons, swaps, elapsed). Sound (opt-in, default off): each comparison plays a short sine/triangle tone mapped to the value, quantised to a pentatonic scale, with volume ducking. Palette: soft pastel canvas #f4f1ec with muted ink #2a2a35 and a curated gradient of hues (coral, apricot, sage, teal, periwinkle, lilac) rather than raw rainbow. UI: a slim bottom console with algorithm chips, a speed slider, a size slider (32–512), "Shuffle" with pattern options (random, reversed, nearly sorted, few unique) and a big satisfying Play pill. Finale: a sweep of light passes across and the wheel gently breathes. Typography: a light geometric sans with mono numerals and generous whitespace. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create a punk-zine cut-and-paste collage page "NOISE FLOOR — issue #3". Photocopy aesthetic: high-contrast black on off-white #eeeae0 with visible toner grain, halftone dots (CSS radial-gradient patterns), torn paper edges (clip-path jagged polygons), strips of tan masking tape with slight rotation and shadow, a ransom-note headline whose letters are cut from different type styles (each in a rotated box with its own font family, weight and background: serif, slab, mono, heavy sans, outlined), hand-drawn scribbles and arrows in SVG, star and burst stickers, a xeroxed "photo" of a stylised guitarist silhouette drawn with shapes then processed by an ordered-dither filter on canvas, and fluorescent spot colours (#ff5f1f orange, #b8ff2c acid green) as multiply-blended overprint blocks. Content: gig listings, a fake interview with pull quotes, a "DIY tips" list, a fold line. Interaction: every collage piece is draggable with pointer events (raise z-index, jitter rotation and lift shadow on pick-up), double-click rotates a piece 15°, a "Re-glue" button animates all pieces back to their original layout, scrolling reveals extra pages. Type stacks: Impact / Arial Black / Courier / Georgia. Deliberately messy, but composed. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Build "Physarum", a real-time slime-mould transport-network simulation on canvas. Implementation: ~40,000 agents (scaled by screen size) each with position and heading; each step senses the trail map at three sensors (left/front/right at a set angle and distance), turns toward the higher concentration with small noise, moves forward and deposits trail; the trail map (~480×270 float array) is diffused (3×3 blur) and decayed each frame. Render the trail through a warm palette (dark brown #120a05, burnt orange #c2410c, amber #f59e0b, pale gold #fde68a, cream #fffbe6) using ImageData at low resolution, scaled up smoothly with a subtle glow (draw crisp plus blurred additive). Food: click places "oat flakes" (attractors emitting chemo-attractant) and veins form to connect them; shift-click adds repellent light. Presets: "Web" (default), "Rings", "Cells", "Tokyo" (food points laid out like a rail network). Sliders: sensor angle, sensor distance, turn speed, decay; a time-lapse toggle (2× / 4×). Title "PHYSARUM · polycephalum" in a scientific-plate serif with small caps and short captions explaining what is visible. Use typed arrays and avoid per-frame allocations. Hypnotic and performant. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Draw an SVG engineering blueprint "ORNITHOPTER Mk.IV — Wing linkage & fuselage, sheet 3 of 7". Blueprint blue #0c3c8c background with a faint grid (minor 10px, major 50px), line art in white/cyan (#dff3ff, #7fd0ff): a fictional human-powered flapping-wing aircraft in side view and top view — fuselage frame, crank and pedal drive, gearbox, connecting rods, twin wing spars with ribs and membranes, tail; dimension lines with arrowheads, section marks (A–A), numbered callout balloons with leaders, a bill-of-materials table, a title block bottom-right (company, scale 1:20, drawn by, date), a revision triangle, hatch patterns for section cuts, dash-dot centre-lines, handwritten-style notes, a coffee-ring stain and paper creases. Animation: lines draw themselves in stages (frame, linkages, dimensions) with stagger; then the mechanism animates — the crank rotates and the wings flap with correct crank-rocker kinematics computed from trigonometry, wing tips sweeping in the top view. Controls: a "Crank RPM" slider and Play/Pause; hovering BOM rows highlights the matching part via ids. Type: technical capitals in monospace with tight tracking. Palette: blueprint blue, white, cyan and one rare orange revision cloud #ffb36b. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Design "Rainy Sunday Records", a cozy lo-fi turntable player. Scene: a wooden desk at golden hour with a cream-and-walnut turntable and a spinning vinyl record (fine concentric grooves, a light sheen sweeping as it rotates, a colourful centre label whose title rotates with it), a draggable tonearm you lift and place on the record (or press Play), a small speaker with a pulsing cone, a mug with steam wisps, a potted plant, a lamp glow, and a window with rain streaks in the corner. Music generated live with WebAudio: warm Rhodes-ish chords (detuned triangle/sine with soft attack and tremolo through a low-pass), a dusty drum pattern (kick/snare with noise), a mellow bassline, vinyl crackle (random short noise clicks) and tape wobble via a slow pitch LFO. Four tracks (chord progressions in different keys and tempos with names like "Umbrella Weather" and "Tea for Two AM") selectable by tapping record sleeves lined up on the desk; a volume knob and a Rain toggle mixing filtered-noise rain. Palette: brown #7b4b2a / #c98b4b, cream #f4e7cf, sage #8fa58a, tangerine #f08a3c, window blue #4b6a8a. Type: rounded friendly serif/sans plus handwritten-style labels. Audio starts on the first gesture; keep volume modest. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Design an award-style portfolio site for the fictional design studio "Halden & Vesper". Palette: bone #ecebe6, ink #0d0d0d, electric vermilion #ff4b1f, soft grey #bdbab2. Hero: the studio name across the full width in a super-heavy grotesque whose letters react to pointer proximity by squeezing weight and tracking (approximate weight change with scaleX and letter-spacing per letter using distance to the pointer); a custom circular cursor with mix-blend-mode: difference that grows over links and reads "VIEW" over projects. An index list of six projects ("Nocturne — Hotel identity", "Field — Seed catalogue", "Loop — Bike share", "Tallow — Candle brand", "Pulse — Health app", "Atlas — Museum wayfinding"): hovering a row reveals a floating preview that follows the cursor with easing and skews with velocity, each showing its own generative artwork drawn on canvas (wobbly rings, dot grid, waves, stripes, blobs, noise); clicking opens a full-screen case-study overlay with a curtain wipe (clip-path animation), big numerals, short copy and a close button. Also: a marquee band ("Available for select projects — 2026"), a magnetic "Get in touch" button, a footer with a huge email-style link (no real address), split-text reveals on scroll, eased scrolling. Mobile: cursor effects off, tap opens case studies. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Build an ultra-smooth fractal explorer "Nautilus" in WebGL — Mandelbrot / Julia with smooth iteration colouring (max ~300 iterations) and orbit-trap glow. Float precision is fine: allow zoom to roughly 1e4–1e5, then show a friendly "Precision horizon" note and gently re-centre. Palette via cosine palettes tuned to #03122b, #0b4f6c, #2ec4b6, #fff1c1, #ff9f1c (Nautilus), with switchable Ember, Orchid and Ink. Modes: Mandelbrot (default) and Julia with c following the pointer/touch drag (live morph) plus a small Mandelbrot minimap in a corner marking c. Navigation: drag to pan with inertia, wheel/pinch to zoom toward the cursor, double-click to zoom in; a "Tour" button auto-travels between four beautiful coordinates (Seahorse valley near (−0.743643887037151, 0.131825904205330), Elephant valley near (0.2549, 0.0005), a mini-brot near (−1.7499, 0), and a spiral region of your choosing) with smooth exponential zoom and slow palette drift. HUD: coordinates and zoom factor in mono, a minimal top bar with title and mode toggle; subtle vignette and film grain. Fallback without WebGL: CPU canvas render at low resolution with progressive refinement. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create an interactive risograph-print poster "SUNDOWN SESSIONS — open-air jazz, Lisbon, Aug 9". Simulate riso printing: three spot-colour ink layers on cream stock #f3ecd9 — fluorescent pink #ff48b0, blue #0078bf and yellow #ffe800 — each composed of shapes with halftone/grain textures (CSS radial-gradient dot patterns and SVG feTurbulence grain masks) and blended with mix-blend-mode: multiply so overlaps create new colours. Artwork: a big sun disc (yellow) with horizontal cut-out stripes, a saxophonist silhouette or a hand-built composition of circles, triangles, wavy lines and stars, palm leaves, and a fat all-caps title overprinted with slight misregistration; details "Doors 18:00 · Free entry", a lineup list, a decorative QR-like pattern, paper edge fibres, stray ink speckles, a faint roller streak. Interaction: a "Registration" slider that increases misregistration between layers from perfect to sloppy with live text ("Alignment 92%"); chips to toggle each ink layer; a "Reprint" button that replays a print animation where layers slide in one by one with a slight rotation; drag the sun to move it. Palette strictly the three inks plus paper. Type: heavy grotesque, condensed caps and small mono. The poster (3:4) sits centred on a desk-grey backdrop with a soft shadow. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Build an interactive sunburst infographic "The Tea Wheel". Three concentric rings: the inner ring is six tea families (White, Green, Oolong, Black, Pu-erh, Herbal), the middle ring 3–4 flavour families per tea (e.g. Green: Grassy, Marine, Nutty, Floral), the outer ring specific notes (e.g. "Fresh-cut hay", "Nori", "Toasted chestnut", "Orchid"). Draw arcs in SVG with 2px surface gaps and rounded ends; colour by tea family (jade #6fae83, celadon #b8d8be, amber #d98f3e, brick #a8442f, umber #6b4a3a, plum #8c5a86) with lighter tints for outer rings. Hover/tap a segment to highlight its lineage (dim the rest) and show a centre card with name, a one-line tasting description, brewing temperature and time (e.g. Green 75–80°C · 2 min) and a tiny animated cup icon filling with the tea's colour; click a family to zoom that branch to fill the wheel with a "Back" control; a search input highlights matching notes; a steeping-timer ring countdown for the selected tea. Palette: cream #f6f1e7 paper, ink #2b2622. Type: a refined serif for titles ("The Tea Wheel — Leaf, Liquor, Aftertaste"), a humanist sans for labels. Add subtle steam wisps rising from the centre on hover and a hand-drawn teapot outline in a corner. Note "illustrative data" discreetly. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Design a premium architecture-studio website "MONOLITH — Atelier for Concrete & Light" in a brutalist-architecture spirit. Palette: concrete greys (#cfcdc8, #a8a6a1, #6d6c68, #2a2a28), signal orange #ff5a1f accent, white #f7f6f2. Visual language: monumental grid, huge type in a heavy condensed grotesque, thick rules, blocks that slide like slabs, board-formed concrete texture built from CSS gradients plus SVG turbulence noise, tie-hole dot patterns. A sun-angle study diagram: a "Time of day" slider rotates a light source over a simple extruded building (SVG/CSS), casting long shadow polygons that lengthen and shorten in real time along a sun-path arc while the wall and sky tones shift. Sections: a hero with giant "MONOLITH" letters partly masked by concrete slabs that slide open at load; an oversized project index table where hovering expands a row into a generative elevation drawing; a philosophy statement in large type; a numbers strip ("41 built · 9 countries · 0 apologies"); a thin-line section drawing that animates when scrolled into view and "cuts" to reveal hatch fills; a contact block. Details: a crosshair cursor with a coordinate readout, scroll-linked parallax of slabs, and an "Exposure" toggle that inverts the page into blueprint mode. Keep it stark, monumental and intentional. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create an interactive dandelion, "Make a Wish". A close-up seed-head (the puffball) drawn on canvas: ~220 seeds radiating from a central receptacle, each with a thin filament and a fan of hair-fine bristles (pappus), rendered with pseudo-3D (points on a slowly rotating sphere, depth affecting size and alpha) on a swaying stalk; behind it an out-of-focus meadow at golden hour — soft bokeh circles, a warm gradient from apricot #ffd9a8 through sage #a9c79a to sky #cfe8f2, light rays. Interaction: press-and-hold (or hover with a moving wind) to "blow" — a gust builds; seeds detach with probability based on gust strength and angle, then drift with physics: buoyant parachutes with drag, wind noise, gentle rotation and slow sinking, some travelling far across the screen and fading into depth-of-field blur; a "wishes released" counter increments and "make a wish" appears in delicate italic serif; when all seeds are gone the stalk sways and a new bud slowly regrows (a "Grow again" button, or automatic after ~6 s). Each seed leaves a tiny sparkle, and occasionally a landing seed floats up a phrase ("may you find the quiet hour"). Palette: apricot, sage, cream #fff7e6, seed white with warm rim light. Type: light italic serif and tiny sans. Optional soft wind ambience (WebAudio), default off. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Design an antique natural-history plate viewer, "Cabinet of Curiosities — Plate XIV: Coleoptera". Parchment #eadfc2 with foxing stains, a plate border with plate number, Latin captions in engraver's italic and hand-lettered labels. Draw eight beetle specimens in SVG (original stylised drawings: bilaterally symmetric bodies with elytra patterns — stripes, spots, metallic sheen gradients — antennae and six jointed legs), each unique in shape and pattern with a fictional Latin-style name (e.g. "Scarabaeus aurorae", "Carabus viridulus"), a scale bar and a measurement. Interaction: a round brass magnifying-glass lens follows the pointer (on touch: drag) and reveals a hidden high-detail layer (fine cross-hatching, sculpted elytra ridges, tiny hairs, iridescent gradient) inside the circle, using an SVG clipPath/mask over a duplicate layer scaled ~2.2× so the lens truly magnifies and shows detail invisible outside it, with a glass glint and rim; clicking a specimen pins it and opens a paper field card (habitat notes, size, a tiny animated leg wiggle); a Pin/Unpin toggle shows entomology pins. Palette: parchment, sepia #4a3521, verdigris #4f7f74, cinnabar #b13a2a, gold leaf #b8912f. Type: engraving-like old-style serif italics with small caps. Ambient: a moth occasionally flutters across the page; dust motes drift in a beam of light. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Build "Kaleido", a symmetry drawing instrument. A full-screen canvas with N-fold rotational symmetry (default 12; options 6 / 8 / 12 / 16 / 24) plus mirror reflection; strokes drawn with the pointer are replicated across all sectors in real time with a glowing additive brush (soft radial dabs with globalCompositeOperation "lighter"), hue cycling slowly along the stroke from the chosen palette, and trails that fade slowly so the mandala breathes. Palettes: "Aubergine Neon" (background #12061f, strokes #ff4fd8 / #7c5cff / #3ef2e0 / #ffd166), "Ink & Gold", "Sea Glass", "Sunrise". Idle mode: an auto-painter draws elegant Lissajous / rose curves so the page is beautiful before the first touch, pausing when the visitor interacts. UI: a minimal floating glass dock with a symmetry stepper, brush size, glow amount, palette chips, Mirror toggle, Clear, Undo (store strokes) and "Save PNG" (canvas.toBlob → download link). Show faint guide lines for sector boundaries while dragging and a subtle radial vignette. Typography: tiny tracked-caps labels and a fading title "KALEIDO" that disappears at the first stroke. Performance: draw only new segments each frame onto a persistent canvas, replicate via rotate transforms, cap DPR at 2. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Design an animated hero section and landing page for "Wanderlight — Journeys Beyond", a fictional space-tourism booking site. Hero: a floating field of CSS-3D-shaded planets and moons rendered ONLY with CSS gradients — radial-gradient spheres with lighting, inset box-shadows for the terminator, a ring system from elliptical conic-gradients with rotateX, striped gas giants from repeating gradients clipped by border-radius, a cratered moon from several radial gradients — each floating with its own slow orbit/bob animation and parallax on mouse move / device tilt (JS sets CSS variables), over star layers (box-shadow stars) at three parallax depths with twinkle. Headline in a large elegant sans, "Where will you wake up?", with gradient text. A destination selector (Moon, Mars, Europa, Titan, Saturn's Rings): choosing one smoothly brings that planet to centre and enlarges it while the others recede, updating a glass info card with travel time, gravity, view and price ("from 2.4M cr."), plus a mini rocket-trajectory arc in SVG. Below the fold: three feature cards, a boarding-pass ticket component (dotted tear line, CSS barcode, flight details), a testimonials strip, and CTA buttons with soft glow. Palette: space #070716, ink violet #1a1147, nebula pink #ff5db1, cyan #52e5ff, gold #ffd36b; planet colours Mars rust #c1440e, Europa ice #cfe8ff, Titan amber #e0a458, Saturn cream #f0d9a0. Type: modern geometric sans plus mono labels. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create a WebGL ocean at sunset, "Golden Swell". The fragment shader renders an infinite ocean plane in perspective looking toward the low sun: a heightfield of summed Gerstner/sine waves (6–8 octaves) with analytic normals; sun glitter (a long specular pillar on the water), fresnel reflection of a procedural sky (apricot #ffb36b at the horizon, rose #e6708f, deep violet #2d2350 overhead, a soft sun disc and wispy cloud bands via fbm), subtle foam on crests, atmospheric haze toward the horizon and a slight camera bob. Time of day drifts slowly (sun altitude between −2° and 12°); a "Sun" slider scrubs from golden noon-ish light through blue hour to moonlit night (moon and stars appear when the sun is below the horizon; the glitter turns silvery). Pointer moves the camera yaw/pitch slightly; click sends a big swell travelling toward the horizon. Overlay: a giant elegant quote in light serif ("The sea does not reward those who are in a hurry." — attributed to "a fisherman's proverb, invented") with text-shadow and subtle parallax, plus tiny mono readouts ("Wind 11 kn WSW · Swell 1.8 m @ 9 s"). Fallback without WebGL: a layered CSS gradient sea with animated waves. Render at 0.75 scale if DPR > 1. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Make a kinetic typography piece, "Elastic Words": an original 8–12 line poem about motion and stillness set in huge letters where every letter is a spring-loaded physical object. Use canvas (per-letter springs with fillText) or DOM spans with transforms. The pointer acts as a repulsive / attractive / swirling field with radius ~160px (toggle "Repel / Attract / Swirl"); letters are pushed away and spring back with damping, rotate slightly with velocity, and squash and stretch along their motion (with a hint of motion blur via a faint trail layer). Click sends a shockwave ring pushing letters radially; press-and-hold makes a black hole that pulls letters in and, on release, blows them outward. Colours: bone #efe9dd background, ink #141210 text, signal red #e63b2e for letters currently in motion (colour interpolates with speed). Type: heavy grotesque and a Didone italic alternating per line, sized with clamp() to fill the viewport. Extras: a "Stiffness" slider; pressing any letter key spawns that glyph as a bouncing physical object that falls and collides with the poem. Recompute layout on resize. Accessibility: include the poem as real text for screen readers (visually hidden or aria-label). TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Design an elegant light-mode wealth dashboard "Lumen Wealth — Portfolio overview" (fictional). Palette: ivory #f7f4ec, card #fffdf8 with hairline borders #e6e0d2, forest green #1f5b45 (primary, with a tint ramp), terracotta #c8553d for negatives, ink #1e2421, muted #7a7f76. Layout: a slim left rail with inline-SVG icon navigation; a top bar with greeting, date and range chips (1W 1M 3M 1Y ALL) and a search field; a hero figure card — total balance in a large sans (proportional figures) with a delta chip (+2.4% this month) and a big area/line chart in SVG (2px line, ~10% opacity area wash, crosshair and tooltip on hover showing date, value and day change, animated draw-in on load and on range change); KPI tiles (Cash, Invested, Yield, Risk score) each with a sparkline; an allocation donut (max 5 segments with 2px gaps) beside a legend list with percentages and bar meters; a sortable holdings table (symbol, name, price, day change with tiny arrows, 30-day sparkline); a "Goals" card with progress rings; a recent-activity list. Generate plausible series with a seeded PRNG and add an "illustrative data" footnote. Light/dark toggle (dark = green-black #0f1a16). Type: a precise humanist grotesque with tabular numerals only in tables. Calm, refined, no neon. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create "Lucid", a morphing mesh-gradient dreamscape landing hero. Background: 5–7 large blurred colour blobs (radial gradients) drifting on slow Lissajous paths in canvas or CSS (blur ~60px, blend modes screen / soft-light), slow organic distortion through an animated SVG feTurbulence + feDisplacementMap, plus a film-grain overlay. A floating pill switcher selects moods that crossfade smoothly over ~1.2 s: "Calm" (#a8c0ff, #d6c7ff, #ffd6e7, #c8f5ea), "Electric" (#ff3cac, #784ba0, #2b86c5, #00e5ff), "Sunset" (#ff9a8b, #ff6a88, #ffcf7a, #7b5fff), "Ink" (#0b1020, #1f2a6b, #6a5acd, #f0c27b). Foreground: a huge lowercase word "lucid" in a soft high-contrast serif italic with a glass-refraction effect (backdrop-filter plus an SVG displacement distorting the gradients behind it), a tiny subtitle "a study in how colour moves" and a scroll cue. Below: an about block, three "Effects" cards each with a mini looping gradient demo, and a "Make your own" section with four sliders (blur, grain, speed, contrast) that live-update the hero and a "Copy CSS" button. Pointer movement gently attracts nearby blobs. Type: elegant serif display with light sans. Liquid and dreamy, with restraint. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Simulate magnetic field lines with iron filings, titled "Field Notes: Magnetism". Canvas on warm paper #f3efe6 (with subtle texture): ~6000 tiny iron filings (short graphite line segments, 5–9px, varied thickness, slightly transparent) laid on a jittered grid; each aligns to the local magnetic field produced by draggable magnetic poles (bar magnets: N red #d1372d and S blue #2b5fa8 drawn as clean labelled rectangles) using summed point-pole (dipole-approximation) contributions; orientation eases toward the target angle so moving a magnet makes the filings swirl into place; opacity and thickness scale with field magnitude so lines gather near the poles. Toggleable streamlines (RK4 from the poles, soft ink colour with arrowheads) and a compass-needle widget following the pointer. Interaction: drag magnets, rotate with a handle (or press R / two-finger rotate), add a magnet with "+", flip polarity on double-click; presets "Bar magnet", "Two attract", "Two repel", "Horseshoe", "Quadrupole". Text: scientific plate captions — "Fig. 3 — Iron filings around a bar magnet" in small italic serif — plus a margin note explaining field lines. Palette: paper, graphite #2b2b2b, oxide red, prussian blue. Beautiful and calm. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Build a phosphor-amber CRT terminal experience, "ORACLE-9 — Operator Console". Visual: a curved CRT screen (barrel distortion approximated with border-radius, inner shadows and a subtle lens highlight), amber phosphor text #ffb000 on brown-black #120a00 with layered text-shadow glow, scanlines (repeating-linear-gradient), slight RGB fringing, flicker, a rolling refresh bar, vignette and dust smudges, inside a beige plastic bezel (#d9cfb8) with a power LED, an "ORACLE-9" brand plate, vents and a brightness knob (a draggable knob controlling CRT brightness). Boot sequence: typed BIOS-like lines (memory count, device checks with flashing [ OK ]) then a login prompt and a menu. A real interactive shell with a blinking block cursor supporting: help, about, ls, cat <file> (fake files containing short poems and story fragments), whoami, date (real date), theme <amber|green|white>, matrix (falling-glyph mode), fortune (original fortunes), calc <expr> (safe evaluation through a tiny parser — never eval), clear, history with arrow keys and tab completion of command names. Optional keyboard clicks and hum (WebAudio, default off). Include an ASCII-art logo and typewriter output at variable speed so it feels alive. Type: monospace at ~18px with letter spacing. Responsive: the bezel scales; on mobile the screen fills the width with a keyboard-friendly input. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create "Pendulum Wave": 20 pendulums with lengths tuned so that in 60 seconds the i-th pendulum completes (N + i) oscillations, producing evolving wave patterns (travelling wave, standing wave, apparent chaos, then re-alignment). Canvas or SVG: pendulums hang from a brass rail, each with a thin string and a glowing bob whose colour follows a curated gradient along the row (coral #ff6b6b, amber #ffb84d, lime #c8e86b, teal #4dd8c4, sky #59a6ff, violet #a78bff); bobs leave short fading trails and cast soft reflections on a glossy dark floor; a subtle vertical grid marks time. Use analytic harmonic motion (x_i(t) = A·cos(2π(N+i)t/T)) so the re-alignment is exact. Views: Front (pendulums swinging, showing the wave of bobs) and Top-down (bobs as dots in a line showing the phase patterns) with a smooth transition. Controls: "Cycle time" slider (30–120 s), "Number of pendulums" (10–30), a "Drop all" button (release with theatrical stagger), pause/step. Sound (opt-in): each time a bob crosses the centre it plays a marimba-like note from a pentatonic scale mapped to its index (sine with fast decay), producing a cascading melody. Palette: near-black #07070b with warm spotlights. Minimal mono readouts like "17.0 osc / 60 s". Hypnotic, precise and polished. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Design a weather dashboard "Five Skies" with five animated weather scenes for one fictional city, "Port Marlow". A large hero card shows the current scene as a living canvas illustration; a segmented control switches Clear · Rain · Snow · Storm · Fog. Beneath: an hourly strip (12 hours with small icons and temperatures, joined by a smooth temperature curve), a wind compass with a rotating needle, a humidity droplet gauge, a UV bar, a sunrise/sunset arc with the sun's position, and a 5-day forecast with hi/lo range bars. Scenes: Clear — warm gradient sky, a sun with rotating rays and lens flare, drifting clouds; Rain — dark blue-grey sky, angled streaks with splashes, droplets on a foreground window; Snow — soft white-blue, three depths of swirling flakes, ground glow; Storm — heavy clouds, lightning (procedural bolts) with screen illumination and delayed "thunder" text flash, wind-swept rain; Fog — layered drifting fog bands with soft light and silhouette trees. The UI colours change per condition via CSS variables with smooth transitions (Clear #ffb02e / #fff4d6, Rain #4d78a8 / #d8e6f5, Snow #9ec5e8 / #f5fbff, Storm #6a5acd / #1b1b2f, Fog #9aa5a0 / #eef1ee); cards are frosted glass. Type: friendly modern sans with a large light-weight temperature numeral (e.g. 18°), a °C/°F toggle, and a witty "feels like" line per condition. Illustrative data. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create a generative gothic rose window, "Rosace" — a circular stained-glass window built from radially symmetric geometry with lead came. Construct concentric rings and 12-fold radial ribs (Gothic tracery drawn as arcs), then subdivide each cell into jewel-coloured panes (ruby #a4161a, sapphire #1e3a8a, emerald #0f766e, amber #d97706, amethyst #6d28d9, ivory #f3e7c9) with irregular Voronoi seeds inside each ring for a hand-cut look; lead lines dark grey #1a1a1f, 4–6px with subtle bevel highlights; glass texture (noise streaks, bubbles, gradients within panes). Lighting: the window is backlit by a slowly moving sun that modulates each pane's luminosity with bloom, and coloured light patches spill onto the stone floor below (a second canvas or gradient area showing distorted projections moving with the sun), with dust motes in beams. Interaction: click a pane to shatter it and re-glaze (pieces fly and reassemble); hover brightens a pane; drag to rotate the window with inertia; a "Time" slider moves the sun from dawn to dusk (hue and warmth shift); "New window" regenerates a different seeded design (8 / 10 / 12 / 16 ribs). Palette: jewel tones plus soot stone #16161a. Type: small-caps serif caption "ROSACE · Nave, north transept". Luminous and reverent. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Design a beautiful loading sequence, "Kintsugi" — a ceramic bowl repaired with gold. SVG: a matte black-glaze bowl (elliptical rim, subtle glaze gradient and highlights) on cream paper with a soft shadow; it starts fractured into 6–9 pieces drifting slightly apart, and pieces slide together as loading progresses (0→100% over ~9 s with uneven progress like a real load: pauses and bursts); crack lines are drawn in liquid gold (#d4a537 with highlights #ffe28a, tapered ends), filling in via stroke-dashoffset in step with progress along randomly ordered seams; sparkles at the gold's leading edge (tiny star particles). The percentage counter in a thin serif beside it, with poetic status lines ("Gathering the pieces", "Warming the lacquer", "Dusting with gold", "Wabi-sabi is not a flaw"). At 100%: a pulse of light passes over the bowl, the gold gleams (a linear-gradient sweep clipped to the seams), the title "Restored" appears in serif, steam curls from the bowl (tea implied) and a "Replay" button appears. Palette: paper #efe6d6, charcoal glaze #1d1c1a, gold #d4a537, muted clay #8c6f57. Interaction: clicking the bowl at any time speeds up loading with a small burst; key R replays. Respect reduced motion by shortening durations. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create "Glass Harp", an ambient instrument where you play glowing glass strings. A dark aquatic-teal stage (#04161c to #082a33) with 14–18 vertical crystalline rods of varying height (height maps to pitch on a pentatonic scale across three octaves) arranged in a graceful arc; each rod is a translucent glass tube with inner glow, refraction highlights and a pearl on top. Hovering/dragging the pointer across them plucks — each pluck plays a WebAudio glass-like tone (sine partials with inharmonic overtones, long exponential decay, subtle chorus), the rod vibrates (decaying sinusoidal displacement) and emits expanding ripple rings and upward-drifting light particles like bubbles; pointer velocity maps to loudness; multi-touch supports chords; keys A S D F G H J K L ; ' play the rods with visible key hints. A "Play for me" mode auto-plays a generative melody (a Markov walk with occasional rests) so the page is beautiful hands-off. Effects: reverb via ConvolverNode with a generated impulse response, a Delay knob, and a Scale selector (Pentatonic, Dorian, Whole-tone, Hirajoshi) that retunes. Background: slow caustic light bands and drifting plankton. Title "GLASS HARP" in tiny wide-tracked caps at top-left and a hint "Drag across the strings". Palette: teal-black, pearl white, aqua #6ff2e0, soft rose #ffb7d0, gold #ffd98a. Audio starts on the first pointer down. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create a creative-navigation experience for a fictional boutique hotel, "Hotel Meridiana". A single-screen site whose navigation is a radial menu: a round compass button at the bottom centre unfolds with spring physics into a semicircular fan of five large circular items (Rooms, Rooftop, Spa, Table, Journal) with inline-SVG icons and labels rotating into place. Selecting one triggers a full-screen circular clip-path reveal expanding from the button (transition clip-path: circle()) to a new "room" with its own colour world and composition: Rooms (terracotta #c8553d and cream, arched window shapes, a three-room carousel), Rooftop (deep blue #16305c and gold, animated stars and a skyline silhouette with shimmering bar lights), Spa (sage #a9bfa6 and white, concentric ripples, a slowly breathing circle), Table (saffron #e8a33d and plum #4a1d3f, a plate composition with animated steam and a short menu), Journal (paper and ink, three short article cards). The menu can be dragged like a wheel (angular drag rotates through items with inertia and snapping); keyboard: arrows cycle, Enter selects, Esc closes. Type: an elegant humanist serif for headings and small sans for details. Micro-animations: items subtly orbit, a "You are here" arc indicator, the compass doubles as the back button. Responsive: on mobile the fan becomes full-screen vertical arcs. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Build a scientific "Wave Interference Lab" — a ripple-tank simulation with an oscilloscope aesthetic. 2D wave equation on a grid (~300×190 cells): h_tt = c²∇²h − damping, with absorbing boundaries; render as a shaded height field where crests are bright amber and troughs deep brown/black (phosphor amber #ffb000 / #ff7a00 on #0a0704), with a switchable "Water" palette (teal/white). Sources: click to place a point source oscillating with adjustable frequency, amplitude and phase (up to 4 sources; drag to move). Presets: "Double slit" (a wall with two slits and a plane-wave source on the left showing fringes on the right, with an intensity graph along the right edge), "Two-point interference" (nodal lines visible as calm hyperbolas), "Doppler" (a moving source), "Reflection" (a parabolic mirror focusing waves). Instrument UI: an engraved matte panel with knobs (frequency, wavelength, damping), a mini oscilloscope trace of the value under the pointer (canvas line with glowing persistence), λ and f readouts and a grid overlay. Interaction: draw barriers with a "Wall" mode, erase, pause/step, slow motion. Type: mono uppercase small text; title "WAVE LAB · MODEL RT-04". Use typed arrays, ~3 iterations per frame and ImageData rendering. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Design a delightful loading experience, "Tide" — a tall glass filling with water as progress rises 0→100%. A refined glass tumbler (thick base, highlights, rim) stands on a pale aqua backdrop (#dff5f2 to #bfe9e7) with soft caustic light patches on the table. The water is a layered wave (two sine waves of different phase/amplitude, semi-transparent turquoise #2ec4b6 and deeper teal #1a9aa5) that sloshes in response to progress changes and pointer/device tilt (a damped spring "slosh" variable drives amplitude and lateral tilt); bubbles rise from the bottom; a lemon slice floats at the surface bobbing; a coral striped paper straw leans in the glass. The percentage is set as big as possible in a heavy serif inside the glass, drawn twice — dark above the waterline and light below it (clipped by the water shape) for a two-tone effect; microcopy below ("Pouring…", "Almost there", "Cheers!"). Progress simulates an uneven download (stalls and bursts). At 100%: waves settle, the lemon spins, a sparkle passes, the text swaps to "Cheers" with an optional clink (WebAudio) and a "Pour again" button appears. Palette: aqua, teal, lemon #ffe066, coral #ff7f6b, white. Type: heavy serif numerals and a small rounded sans. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Build "Hue Atelier", an elegant colour-harmony tool. Left: a large colour-wheel canvas (hue = angle, chroma = radius in OKLCH at an adjustable lightness, drawn per-pixel with ImageData) with draggable handles for the base colour and harmony points, joined by thin lines forming shapes: complementary, split-complementary, triadic, tetradic, analogous, monochrome; switching harmony animates the handles to new positions. Right: five tall swatch panels with hex / rgb / oklch text, a lock toggle per swatch, click-to-copy with a toast, and Shuffle (space bar) to generate pleasant new palettes. Below: a live "poster preview" mini UI (card, button, chart, headline) that recolours with the palette; a WCAG contrast panel listing text/background pairs with correctly computed AA/AAA badges; export blocks for CSS variables, JSON and an SVG palette strip (copy buttons); a "Shades" strip for the selected swatch (9 steps light to dark via OKLCH lightness); a colour-blindness simulation toggle (protanopia / deuteranopia / tritanopia via matrices); saved palettes stored in localStorage (inside try/catch) as small chips. Visual design: airy off-white UI #faf8f5 with soft shadows, 20px-radius cards, subtle animated gradient borders, and page accents that adapt to the selected base colour. Type: a modern grotesque with mono for codes. Keyboard accessible (arrow keys nudge hue). TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Design a mechanical-keyboard playground, "Keycap Lab". A compact tenkeyless-style keyboard in HTML/CSS with convincing 3D-ish keycaps (each key: a base with a slightly smaller top surface, gradient lighting, inner shadow, legend text; staggered rows with a sculpted profile via skew and box-shadows; a spring-like press animation) on a felt desk mat (gradients plus noise) with soft ambient shadows; a case with a brass plate and RGB underglow (soft coloured glow beneath the keys with selectable breathe / wave effects). Real typing: physical key events press the matching keys, and a paper card "notepad" below shows what you type; tapping virtual keys works too. Sound (starts after the first key press, with a mute toggle): synthesised "thock / clack / creamy" switch sounds via WebAudio (a short filtered noise burst plus a resonant sine drop, slight random detune per key), a space-bar thud and an enter ding. Colourway themes via swatch buttons, each restyling the keycaps with an animated transition: "Botanical" (forest green, cream, copper), "1984 Beige" (retro beige, grey, blue accents), "Miami" (pastel pink, cyan, white), "Nocturne" (black and gold), "Bento" (pastel with matcha). A "Typing test" mini mode shows a short sentence and measures WPM and accuracy live. Page chrome stays neutral warm grey #cfc9bf with theme accents. Type: rounded/geometric sans legends, mono UI. On mobile show a compact virtual layout. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Visualise chaos with "Butterfly Effect": 240 double pendulums released from almost identical initial angles (differences of ~1e-4 rad) to show how quickly trajectories diverge. Physics: exact double-pendulum equations integrated with RK4 at fixed sub-steps (dt = 0.004 s) in typed arrays. Render on canvas: each pendulum's outer bob traced with a thin glowing trail; colours by index along a curated gradient (plum #6a1b9a, magenta #d81b60, orange #ff8f00, gold #ffd54f) — at first they overlap in one narrow bright fan, then unfold into a bloom of colour; the pivot is a small brass disc; arms drawn faintly for only the first few pendulums. Layout: a dark warm backdrop #0d0a10 with minimal typography "Sensitive Dependence" and a live divergence chart at the bottom (log-scale mean distance between outer bobs vs pendulum 0, thin line, with a marker "Lyapunov time ≈ x s" estimated from the data). Controls: "Initial angle difference" slider (1e-6 to 1e-2, log), "Count" slider, "Restart" (drops with a countdown), Trails toggle, Slow motion. Clicking anywhere sets a new starting configuration from the pointer position (θ1, θ2 from x, y) and re-launches the fan. Include tiny educational captions. Keep FPS high by drawing trails additively onto a persistent canvas faded each frame. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Build a tactile split-flap departure board, "DEPARTURES · Terminal 0" (Solari style). HTML/CSS 3D: a matte black board with a chunky frame and rivets, rows of split-flap cells (each cell two halves with the mechanical flip using rotateX and perspective — the top half flips down to reveal the new character) with warm white letters #f4f1e8 on charcoal #17171a, a hinge line and inner shadow; columns TIME, FLIGHT, DESTINATION, GATE, STATUS (amber/green/red words: BOARDING, ON TIME, DELAYED, GATE CHANGE, CANCELLED, FINAL CALL). Ten rows of fictional flights to real-sounding city names (LISBON, REYKJAVIK, OSAKA…) with made-up airline codes ("NV 204"). The board updates continuously — every few seconds a random row rewrites, its cells cycling through the alphabet toward the target with staggered timing and a clacking sound synthesised with WebAudio (short noise ticks), toggled by a speaker button (default off); the clock digits top-right flip every second. Click a row to inspect it (highlight plus a sliding detail plate with a gate map and boarding countdown); a "Board a message" input styled as a brass plaque makes the top line spell any message (e.g. "HAPPY BIRTHDAY MIA") by flipping cells realistically. Accessibility: an aria-live polite summary of the board in visually hidden text. Responsive: fewer columns on mobile. Type: a condensed grotesque bold uppercase with clamp() sizes. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Design a botanical herbarium editorial, "Herbarium Plates — Volume I": an elegant scroll gallery of five plants drawn in ink-line style, generated procedurally in SVG with JS (allowed as page logic; the result must look hand-inked): (1) Fern (recursive fronds with tapered pinnae), (2) Ginkgo (fan leaves with radiating veins on a sinuous branch), (3) Olive branch (lance leaves along a stem, small fruits), (4) Poppy (four crinkled petals, seed pod, hairy stem), (5) Lavender (stalks with clusters of buds). Each plate: cream paper #f4efe2 with faint fibres and foxing, a fine border, a Roman-numeral plate number, the Latin name in italic caps with a common-name subtitle, a tiny scale bar and handwritten margin notes. Drawings appear by drawing strokes (stroke-dashoffset animation when scrolled into view), followed by a watercolour wash that blooms in with soft edges (SVG filters: feTurbulence + feDisplacementMap on fill layers, multiply blend) in pale sage #b7c9a8, olive #8a8f4a, poppy red #d94b3a, lavender #9b8ac4, ochre #c9a24d. Hovering a plant part highlights it and shows a leader-line label ("pinnule", "sorus", "calyx"). A sticky side index of five dots with progress; a title spread with a big Didone "Herbarium" and an illustrated colophon at the end. Palette: paper, ink #2b2a26, watercolours. Type: old-style serif italics and small caps. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create "Little Delights", a curated playground of 12 handcrafted microinteractions on a soft pastel board, each in its own rounded tile with a label and one-line description: (1) a gooey toggle whose knob stretches like liquid (SVG goo filter), (2) a heart button that bursts into particles and a ring, (3) a ripple button with spring scale, (4) a hamburger ↔ close icon morph, (5) a magnetic button leaning toward the cursor, (6) an elastic slider whose rubber-band track bends under the thumb (SVG quadratic curve), (7) a checkbox that draws its tick with a stroke animation and tiny confetti, (8) a pull-to-refresh spinner that stretches then snaps, (9) a liquid tab bar where the active pill squishes between tabs, (10) a password field whose eye follows the cursor and closes when hiding, (11) a like counter with rolling odometer digits, (12) a day/night switch morphing sun to moon with stars and a cloud. Palette: peach #ffe5d9, lilac #e6dcff, mint #d6f5e3, butter #fff3c4, sky #d9ecff, deep plum ink #2d1f3d and one hot accent #ff5c8a. Type: a rounded friendly sans (ui-rounded stack) with generous sizes. Layout: a masonry-like CSS grid with tile hover lift and a tiny replay icon where applicable. Every interaction should feel physical (spring easing, overshoot) and be accessible (real buttons/inputs, keyboard operable, aria states). TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Render iridescent soap bubbles floating in a sunlit room, "Thin Film". A WebGL fragment shader draws ~8–12 large bubbles (analytically shaded spheres) with physically inspired thin-film interference colours: film thickness varies with swirling noise and gravity (thinner at the top, thicker at the bottom), colour from an interference palette (e.g. cosine palette on thickness × cos(angle)), fresnel-weighted transparency (mostly clear, brighter at rims), a window-shaped soft-box reflection with mullions, tiny specular highlights. Bubbles drift with buoyancy noise, wobble (elliptical shape oscillation) and collide gently. Background: a softly blurred interior — warm cream wall gradient (#efe7dc to #d9cbb8) with a slanted sunlight patch and a blurred plant silhouette — or a dark studio variant toggled by a "Studio" button where irises pop. Interaction: the pointer gently pushes bubbles away; clicking a bubble pops it with a quick ring burst and droplets (canvas overlay) and a new bubble later rises from the bottom; press-and-hold blows new bubbles from the pointer; a "Film thickness" slider shifts the colour bands. Title: a tiny "THIN FILM" caption with a physics note ("Interference of light on a 500 nm film"). Fallback without WebGL: CSS radial-gradient bubbles with hue-rotate animation. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Recreate a vintage film countdown leader, "Academy Leader 8→2", as a mesmerising cinematic loader. Canvas/SVG: a full-screen 4:3 letterboxed frame with a grey-toned classic leader design — a big serif numeral in the centre (8 → 2, one per second) inside concentric circles with crosshairs, a rotating radial "clock wipe" sweep (a translucent wedge sweeping 360° each second like a radar), sprocket-hole edges scrolling vertically at the sides, film grain, dust and hairs, vertical scratches flickering, gate weave (slight random translate/rotate jitter), projector flicker and vignetting. Colour: sepia-toned monochrome (#f1e4c3 on #1a140d) with subtle duotone alternation per number (warm/cool). After "2" the screen goes black for a beat with a white "pop" blip, then cuts to a title card, "A Sonnet Sonata Presents — THE LAST REEL", with a slow zoom, a film burn (a warm orange flash) and a light-leak gradient sweep. Then "Replay" and "Skip" controls appear bottom-left in projector-typeface capitals. Audio (opt-in "Sound" toggle): tick beeps each second, a 1 kHz sine at the "2" pop, and projector whirr (filtered noise). Include a timecode readout bottom-right (00:00:03:12 style, 24 fps) and a typewriter "REEL 1 OF 1" label. Tone: nostalgic, precise, full of analogue imperfection. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Build "Habit Garden", a small mini-app where five daily habits grow plants in an SVG garden. A checklist card of five default habits (Drink water, Move, Read, Meditate, Sleep by 11); ticking one grows that habit's plant a stage (seed → sprout → leaf → bud → bloom) with a smooth grow animation and a tiny sparkle; each habit has a unique plant (fern, sunflower, tulip, lavender, flowering cactus) drawn in SVG with gradient shading and idle swaying, planted in a terracotta pot on a wooden shelf or garden bed; the streak count is a small leaf chip; a missed day withers the plant slightly (desaturate and droop, computed from stored dates). Persistence: localStorage inside try/catch (falls back to memory), storing per-habit last date and streak; a "Fast-forward a day" button lets the visitor see growth and wilting quickly. Add and rename habits (up to six) with a small input and a choice of six plant types. Environment: a sky gradient following the real local hour (sunrise / day / sunset / night with fireflies), a butterfly that visits blooming plants, a watering-can cursor icon when hovering ticks with droplets falling, a weekly 7-day dot grid. Palette: cream #fbf6ea, leaf green #5b8c5a / #8fbf7a, terracotta #d1785c, sunflower #f2b632, tulip pink #e5748b, lavender #9b87d1, soil #4a3527. Type: soft rounded sans with friendly microcopy. Fully keyboard accessible. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create "The Copper Door", an interactive cocktail builder for a fictional speakeasy. A dark moody bar scene: deep teal #0c2a2c wallpaper with a subtle SVG damask pattern, warm amber pendant-light glow #ffb45a, a brass rail #b88a44, a wooden bar. Centre: a large coupe/highball glass in SVG on the bar; the visitor builds a drink in four steps — spirit (Gin, Rye, Rum, Tequila, Mezcal — each a bottle illustration with its own colour), modifier (vermouth, amaro, citrus, honey), top (soda, tonic, ginger beer, none), garnish (lemon twist, olive, cherry, rosemary, orange wheel). Each selection triggers an animated pour (liquid stream from the bottle, level rising with layered colours — soft gradient layers that mix or float pousse-café style — ice cubes bobbing, bubbles for fizzy mixers, a garnish plopping in with a splash). A name generator invents a witty cocktail name from the combination ("The Velvet Alibi", "Midnight Ledger"), a parchment recipe card writes itself with proportions (typed effect), an ABV estimate, and small flavour bars (sweet / sour / bitter / strong). A "Shake it" button jitters the glass and frosts it with sliding condensation droplets. Palette: deep teal, amber, brass, cream #f4e8d0, wine red #7a1f2b. Type: condensed serif capitals for titles, italic serif for descriptions, a small hand-lettered chalkboard "specials" board. Keyboard-accessible controls (radio groups). TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create "Weave", an animated Truchet-tile pattern that reads like woven textile. A canvas grid of tiles (size adapts, ~48px); each tile draws one of several Truchet variants — quarter-circle arc pairs, a diagonal, or an over–under "braid" variant with thick ribbons that visually cross over and under with soft drop shadows — and each tile rotates in 90° steps; the orientation field is animated: a slow noise wave sweeps through the grid flipping tiles with an eased rotation (each tile animating over ~400 ms with spring overshoot). Colour: cream base #f4ead5 with ribbons in indigo #24356f, madder red #c13b2a, saffron #e8a33d and moss #5f7f4a, each ribbon strand taking its colour from the flow index so strands look continuous. Interaction: hover flips tiles near the pointer with a ripple; a click cycles "Pattern mode" (Arcs / Braid / Diagonals / Mixed); dragging paints orientation; a slider adjusts tile size; "Shuffle" triggers a wave; keys 1–4 choose modes. Text: a minimal label "Weave · a study in over and under" bottom-left and a hairline frame; present the piece like a textile swatch with fringe at the left and right edges (drawn threads) and a subtle fabric-noise overlay. Optimise by caching tile sprites on offscreen canvases per orientation and drawing with drawImage and rotation transforms. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Design a charming typewriter-themed loading sequence, "Composing…". Scene: a vintage typewriter drawn in SVG (mint-teal body, black keys with white rims, round metal key rims, a carriage with a sheet of paper, ribbon spools, a bell) seen from the front-top; text types itself letter by letter onto the paper as the carriage advances, each key striking with a small animation, a bell ding at line end and a carriage-return slide. The lines are progress messages in typewriter style, e.g. "Dear Reader, / Please hold while we set the type. / 27% — inking the ribbon…", with the percentage typed as it changes and occasional strike-over corrections ("xxxx") for charm; the paper accumulates lines and scrolls up as it fills. At 100% the last line types "Yours faithfully, The Page" and a red "APPROVED" rubber stamp thumps onto the paper with a slight bounce and ink bleed, then the sheet lifts out to reveal a "Continue" button. Palette: typewriter mint #a7d3c8 / teal #2f6f6a, paper #f8f3e6, blue-black ink #1b2a4a, stamp red #c0392b, desk kraft #d8c3a0. Type: Courier / typewriter stack for the paper plus small sans labels. Sound (opt-in): tiny key-click noise bursts and a bell ding via WebAudio. Interaction: press any key to type your own line onto the paper (fast-forward); a "Restart" button re-composes. Delightfully tactile. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create "Bell Curve Machine", a Galton board (bean machine) with a live histogram. Canvas physics: a triangular pegboard (12 rows) with brass pegs; glossy balls (coral #e4572e, teal #1f8a8a, mustard #e0a82e, sage #8aa67a) drop from a funnel, bounce off pegs with simple elastic collisions plus a touch of randomness, and fall into 13 bins where they stack realistically inside the bin walls, so the pile itself is the histogram. A superimposed theoretical Binomial(12, p) normal curve is drawn as a thin ink line with the mean and ±1σ marked; live stats: number of balls, mean, standard deviation and a chi-square-like "fit" score. Sliders: "Bias" p (0.1–0.9), which tilts the board (pegs visibly shift), "Rows" (6–16), "Speed" (1×–8×) plus a "Pour 100" button and "Reset". A view toggle "Distribution" morphs the piled balls into a clean data-viz histogram (bars with rounded 4px tops and 2px gaps) with the normal curve overlay. Palette: warm paper #f7f1e3, ink #2a2622, brass #b8862b plus the ball colours. Type: an editorial serif title "Bell Curve Machine" with subtitle "Order, arising from chaos", mono readouts. Use fixed-step circle–circle collisions; cap active balls (~1200) with older ones merging into the histogram bars to keep performance. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Build a scroll-driven scrollytelling dive, "The Descent" — from the sunlit surface to the deepest trench (0 → 10,935 m). A tall page (~600vh) with a sticky full-viewport canvas stage: as the visitor scrolls, a depth meter along the left edge (ruler with ticks and a floating marker) increases and the water colour moves through the zones — Sunlight 0–200 m (turquoise #1ec9d8 to #0e7fa5, god rays, plankton, sun glints), Twilight 200–1000 m (#0a4a7a to #061d3c, rays fading), Midnight 1000–4000 m (near-black #020817 with cyan/blue-green bioluminescent particles), Abyss 4000–6000 m, Hadal 6000–10,935 m (pure black with the faint red-orange glow of a vent, marine snow). Creatures appear at plausible depths as elegant vector illustrations (SVG or canvas): sea turtle (~50 m), tuna school (~100 m), jellyfish with pulsing bell and trailing tentacles (~600 m), giant-squid silhouette (~900 m), lanternfish with photophores (~1000 m), anglerfish with a lure light (~2000 m), gulper eel (~3000 m), tripod fish (~4000 m), snailfish/amphipod (~8000 m) — each with a fact card fading in beside it ("Pressure here: 100 atm", "Temperature: 2°C", "Sunlight: 0%"). Live readouts: depth in m, pressure in atm (depth/10 + 1), a temperature curve, light percentage. Marine snow drifts upward faster with scroll velocity; a small submersible at the top-centre carries a lamp whose light cone grows as ambient light disappears. Ending: a quiet closing line and "Scroll up to rise". Type: a light sans for facts, tabular mono for numbers; title "THE DESCENT". Smooth the scroll progress with lerp. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Build "Circles that Draw", a Fourier-epicycle drawing toy on a chalkboard. Setting: a slate-green chalkboard #1f2f2a with subtle smudges and eraser marks (noise and gradients), a wooden frame #8a5a33 and a chalk tray holding chalk sticks (white, yellow #f2d98a, rose #f2a6b5, blue #9cc9ef). The visitor draws any shape with the pointer as a chalk stroke; on release, compute the discrete Fourier transform of the path (complex points), sort by amplitude and animate a chain of rotating circles whose tip re-draws the shape in glowing chalk. Controls: number-of-circles slider (1 → N with a live label showing how the approximation improves), speed, show/hide circles, trail-fade toggle; presets (author the point lists): heart, treble-clef-like curve, spiral, a π outline, star, "Signature". Circles are thin chalk-white with radius lines; the tracing point leaves a bright chalk-yellow trail that slowly fades. Handwritten-style annotations appear ("f(t) = Σ cₖ e^{ikt}", "k = 41 circles") in a chalk-like italic cursive stack; chalk dust falls from the tip and a tiny tick sounds when a loop completes (optional WebAudio). Palette: slate green, chalk white #f3f1e7, chalk yellow, rose, blue, wood. Performance: precompute coefficients once; draw ≤ 200 circles per frame. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Craft an origami-style loading animation, "Fold", where a sheet of paper folds itself into a paper airplane as progress rises 0→100%, then launches. SVG/CSS 3D: a square sheet (red #e4573d on one side, white #fbf8f1 on the other, with a crisp shadow and fibres) lies on a soft blue-grey desk #dfe6ee; 6–7 sequential folds, each drawn as polygon halves rotating around a crease axis in 3D (transform-origin at the crease, rotateX/rotateY with perspective, shading darkening folded flaps and lightening top surfaces, crease lines appearing as they form): fold in half and unfold (crease), fold the top corners to the centre, fold the new edges to the centre again, fold in half along the spine, fold the wings down. Each step advances with progress (~14% each) with easing; the red/white sides reveal colour contrast as folds happen. Percentage and status ("Creasing…", "Sharpening the nose", "Checking aerodynamics") sit below in elegant small type. At 100% the plane rises, tilts and glides off-screen along a curved path with a dotted trail line and tiny cloud puffs, then a card "Ready for take-off" with a "Fold another" replay. Interaction: click to speed up; after completion, drag the plane and release to throw it (release velocity sets a gentle glide path) — it loops around the screen and returns. Palette: paper white, vermilion, soft blue-grey, ink navy #22304a. Type: a clean geometric sans. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Design a luxurious word clock, "Hour of Words". A square matrix of 11×10 letters on a matte charcoal slab #101112 with a bevelled aluminium frame; the letters spelling the current time in English light up in warm ivory #f6ecd4 with a soft glow and slow fade transitions while the rest stay dim graphite #2a2b2d. Use a well-known word-clock arrangement (IT IS · TWENTY / HALF / QUARTER / TEN / FIVE · TO / PAST · ONE…TWELVE · O'CLOCK) — author your own letter layout and define each phrase as contiguous cell ranges, verifying that every 5-minute phrase is correct ("HALF PAST", "QUARTER TO", "TWENTY FIVE PAST", "TEN TO", etc.); fill unused cells with deterministic seeded random letters; four corner dots show minutes 1–4. Seconds appear as a thin ring of 60 tiny LEDs around the frame (or a sweeping light streak) lighting progressively; on each minute change the letters cascade with a glow wave from the changed words. Interaction: clicking the plate opens a small dial to scrub the time (drag a circular slider or use arrow keys to advance 5 minutes) so all phrases can be checked; theme toggle: "Ivory on Graphite", "Ember" (deep red glow #ff5a36 on black), "Paper" (ink on cream #efe8d8 with letterpress emboss). Details: a spaced small-caps serif date line under the clock, a faint reflection on the table, and an ambient glow behind the letters following the lit words' centre of mass. Minimal, exact, expensive. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create a journey across the Solar System at TRUE scale, "How Big Is Empty?". Use a canvas stage driven by a virtual position p (in px) controlled by wheel, drag, arrow keys, and a bottom minimap slider — not by a giant scrolling element. Scale: the Sun is 120 px wide, so 1 AU ≈ 12,890 px; place bodies at true relative distance (Mercury 0.387 AU, Venus 0.723, Earth 1.000, Mars 1.524, Jupiter 5.203, Saturn 9.537, Uranus 19.19, Neptune 30.07 → Neptune ≈ 387,600 px away) with true relative sizes (Earth ≈ 1.1 px, Jupiter ≈ 11.7 px, Saturn ≈ 9.8 px…). Planets therefore appear as tiny glowing dots in vast dark emptiness; as you approach each, a callout and a magnified inset circle show its true look (Mercury grey, Venus cream-yellow, Earth blue-green with cloud swirls, Mars rust with polar cap, Jupiter banded with the Great Red Spot, Saturn with rings, Uranus pale cyan, Neptune deep blue) drawn with shaded spheres. Include a light-pulse travelling beside you and a live counter of light-time from the Sun (Earth 8 min 19 s, Jupiter 43 min, Neptune 4 h 10 m), distance readouts in AU and km, a "Warp" button/key that accelerates travel with a streak effect, and a beyond-Neptune hint ("Voyager 1 is over four times farther still"). Left edge: a giant Sun partially visible whose glow fades with distance. Three-depth parallax stars. Palette: space black #05060a, warm white #f4efe6, sun gold #ffb547 plus per-planet accents. Type: a slender sans and mono numerals. A quiet, awe-inducing piece. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create an optical-art composition, "Vibration", inspired by 1960s op art (original work). A canvas filled with hundreds of horizontal lines (black on white) whose vertical positions are displaced by a sum of moving sine waves and a radial bulge, producing undulating fields that appear to pulse and shimmer. A second set of lines at a slight angle (a second canvas via CSS transform with mix-blend-mode multiply/difference) creates evolving moiré bands as it rotates slowly. Additional modes: "Checker Warp" (a checkerboard warped by a sine field with black/white cells) and "Concentric Eyes" (concentric circles with offset centres). Colour modes: "Monochrome" (ink #0a0a0a on paper #f5f3ee), "Riley" (thin lines alternating cobalt #1738c8 and vermilion #e8391d on cream), "Acid" (fluorescent #b6ff00 on black). Interaction: pointer position controls the bulge centre and amplitude with smooth easing; wheel/pinch changes line frequency; click cycles modes; Space pauses; a tiny slider set (frequency, amplitude, speed, thickness). A discreet caption in tiny Swiss type: "VIBRATION No. 4 — 1,024 lines". Render efficiently (~200–400 rows, ~200 segments each, lower on mobile). It should induce genuine shimmer illusions. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Build "Candle Hour", a focus timer designed as a real burning candle. Scene: a tall ivory pillar candle on a small brass holder in a dark room (#0b0806 with warm vignette); a lifelike flame drawn on canvas (teardrop with a blue base, yellow-orange body, additive soft glow, flicker from layered noise, sway from subtle airflow, leaning away when the pointer moves near); wax that melts — the candle's height decreases linearly with remaining time (5 / 15 / 25 / 50 minutes plus custom), drips run down the sides at times (droplets that slide and harden into persistent ridges), and a glossy translucent pool of melted wax around the wick. Light logic: the flame casts flickering warm light on the candle, holder, table and a wall behind (radial gradient with noise flicker); smoke wisps rise when extinguished. Controls: minimal glass-and-brass buttons — Light, Pause (snuff temporarily), Reset, duration chips; time left in an old-style serif numeral (e.g. "24:12") that fades to low opacity, and a poetic message that rotates each minute ("Let the noise burn down."); document.title shows the remaining time. When time is up: the flame shrinks, drowns in the wax pool with a last flare, goes out with a curling smoke trail and a soft bell chime (WebAudio, only after a user gesture), and a note "Well done. Breathe." with "Light another". Palette: ivory #f3e9d2, flame #ffb347 / #ffd98a / core #7fb5ff, brass #b88a44, near-black room. Type: elegant serif numerals. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create "Glyph Forms", a real-time ASCII-art renderer of rotating 3D objects. A monospaced grid (~120×56 cells scaled to fill the viewport, drawn with canvas fillText per row or one <pre> update per frame — choose the fastest reliable method and compute cell size from measureText) renders a luminance-mapped ASCII image of a 3D scene computed in JS: (1) the classic spinning torus with a proper z-buffer and Lambert lighting, (2) a trefoil-knot tube, (3) a sphere with a moving light, (4) an icosahedron/cube wireframe with depth shading, (5) a terrain heightfield flyover, (6) animated metaballs ("Fluid"). Character ramps: classic " .:-=+*#%@", blocks " ░▒▓█", and a custom "ink" ramp. Colour modes: "Amber phosphor" (#ffb000 on #140c00), "Ice" (#bfe9ff on #050b14), "Ink on paper" (#1a1a1a on #f2eee3), "Rainbow" (per-character HSL by depth, curated). Controls: object chips, ramp chips, colour chips, sliders for rotation speed and resolution (character size); dragging over the render moves the light toward the pointer; drag with a modifier or two fingers rotates manually with inertia; Space pauses. Overlay: fps counter and characters-drawn count; a header with a hand-made ASCII title; footer math caption "x = R cos θ …". Smooth ~60 fps with a single monospace font. Playful, geeky, beautiful. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Design "The Reading Room", a beautiful interactive bookshelf. A wooden wall shelf (three shelves with warm walnut grain from layered gradients and noise, shadows under each shelf, a brass rail with a small rolling ladder drawn in CSS/SVG, a reading lamp with warm glow, a plant, a stack of horizontal books) holds ~24 book spines standing upright in varied heights, widths, colours and typographic treatments — gold-foil title on deep green cloth, a Swiss-modernist white spine with a red dot, art-deco geometric patterns from gradients, a bright pulp paperback with a tiny illustration, a leather-bound volume with raised bands (repeating gradients). Fictional witty titles and authors ("A Short History of Almost", "The Cartographer's Apology", "Ninety-Nine Ways to Boil Water", "Salt & Static"…). Interaction: hovering a spine pulls it toward the viewer in 3D (translateZ plus a slight tilt) while neighbours lean apart; clicking opens a centred 3D "book cover" card (front cover with a typographic design, slowly rotating, draggable to spin; click to open a page spread with a blurb and a fake first paragraph) and "Back to shelf" returns it with animation; arrow keys move focus, Enter opens. A genre filter row (Fiction, Poetry, Science, Cook, Travel) dims non-matching spines; a "Surprise me" button pulls a random book. Palette: walnut #4a2f1d, oxblood #6b1e23, forest #1f3d2f, navy #1d2a4d, mustard #d8a63a, cream #f2e6cf, terracotta #c65d3b. Type: a mix of serif / sans / slab per spine, vertical titles via writing-mode: vertical-rl. Ambient: dust floating in the lamp light. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create an animated Islamic geometric-pattern piece, "Girih", built as if by compass and straightedge. SVG (JS computes the geometry; the visual design is handcrafted): start with a circle, then reveal the construction — a ring of 8 (then 12, then 10) equally spaced points, construction circles and lines drawn progressively with stroke-dashoffset in pale gold hairlines #d9c27a — then the interlaced {8/3} star bands emerge with over–under weaving (bands drawn as double lines with gaps at crossings), and finally the tiles fill with colour (turquoise #1fa8a6, lapis #1c3f94, ivory #f5efdc, terracotta #c8553d, gold #d4af37) with soft glazed gradients and thin gold outlines. The pattern tiles the screen in a repeating lattice (e.g. an 8-fold star-and-cross tiling: a central rosette repeated on a square grid with offset kite/cross fillers), the rosettes slowly rotating and breathing. Controls: pattern family 6-fold, 8-fold, 10-fold, 12-fold; a "Construct" button replaying the compass-and-straightedge animation; a colour toggle cycling palettes (Alhambra: turquoise/lapis/gold; Marrakech: terracotta/saffron/cream; Nocturne: indigo/silver/rose). Typography: a subtle serif caption "Girih · the geometry of order" (Latin script only) and an ornamental border with scalloped arcs. Background: deep indigo #0b1633 with a faint zellige-tile texture. Interaction: hover a rosette to spin and glow it; click to reveal the underlying construction lines for that region; drag to pan the lattice with inertia. Precise, luminous, calming. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create "Tesseract", an interactive 4D-polytope visualiser on canvas with elegant thin glowing lines. Objects: tesseract (16 vertices, 32 edges), 5-cell, 16-cell, 24-cell (vertices by permutation) and a Clifford-torus point set — each projected 4D → 3D → 2D. Rotation in six planes (XY, XZ, YZ, XW, YW, ZW): the three W-planes animate slowly by default for the mesmerising inside-out folding; sliders styled as fine lines with dot handles control each plane's angular speed, and a "Manual" drag mode (horizontal drag rotates in XW/ZW, vertical in YW, with inertia). Visual style: black-blue background #04050d, hairline edges coloured by w-depth on a curated gradient (ice-blue #7dd3fc, magenta #f0abfc, amber #fcd34d) with depth-based width/alpha, vertices as small glowing dots with halos, optional translucent faces (additive blending, "Faces" toggle) and a faint 3D axes indicator. A small "Shadow" inset shows the cube-within-cube projection with the hovered vertex's 4D coordinates labelled (nearest vertex highlighted). Title "TESSERACT" in ultra-thin wide-tracked caps with a subtitle "A cube's four-dimensional cousin — 8 cubic cells, 24 square faces, 32 edges, 16 vertices". A "Cell-by-cell" toggle highlights each of the eight cubic cells in turn. Precompute edges and avoid allocations for smooth 60 fps. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Build "Molecule Cabinet", a beautiful interactive 3D molecule viewer on canvas (no libraries) presented as a curio cabinet. Molecules (author approximate atomic coordinates in ångströms; label "schematic"): water H₂O (bent 104.5°), methane CH₄ (tetrahedral), ethanol C₂H₅OH, benzene C₆H₆ (planar hexagon), caffeine C₈H₁₀N₄O₂ (approximate planar fused rings with slight z jitter), and buckminsterfullerene C₆₀ (compute the 60 vertices of a truncated icosahedron and bonds between nearest neighbours). Render ball-and-stick with painter's-algorithm depth sorting: spheres with radial-gradient shading and specular highlight sized by atomic radius, element colours in a softened premium palette (carbon graphite, hydrogen near-white, oxygen red #e63946, nitrogen blue #3a5bd9), bonds as shaded cylinders, double bonds as parallel lines. Interaction: drag to rotate with inertia, wheel/pinch to zoom, hover an atom to show element name and atomic number and highlight its bonds, click to select and see bond length/angle for neighbours; a Style toggle (Ball & stick / Space-filling / Wireframe); a molecule selector as a row of framed "specimen jars" with mini spinning previews; idle auto-rotate. Cabinet aesthetic: white-lacquer or light lab-wood cabinet with brass labels — cream #f7f3ea, walnut #5b4030, brass #b8862b, glass tint #dfeeee. Info card: formula with proper subscripts via <sub>, molar mass (H₂O 18.015, CH₄ 16.04, C₂H₅OH 46.07, C₆H₆ 78.11, C₈H₁₀N₄O₂ 194.19, C₆₀ 720.66 g/mol) and a fun-fact line. Type: refined serif plus mono. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create a cyberpunk scene, "Ramen Alley 2049" — a rainy neon alley at night with a reflective wet street. Layers: (1) far skyline silhouettes with blinking aircraft lights and huge holo-ads (animated gradient billboards); (2) alley buildings in perspective (converging walls in CSS 3D or SVG) covered in stacked neon signs — vertical signs with invented Latin-letter names ("RAMEN", "NOODLE PARADISE", "ZEN CYBER-CLINIC", "PACHINKO", "24H") built as neon tubes (multi-layer text-shadow glow with flicker keyframes, one broken sign buzzing on/off), steam vents billowing (particles), hanging lanterns and sagging catenary cables; (3) foreground: a wet street plane with reflections (draw the scene mirrored below the horizon at reduced alpha with blur, ripple distortion and puddle sheen), rain streaks (canvas, diagonal lines with splash rings on the ground), umbrella-carrying silhouettes with glowing umbrellas passing by, a noodle stall with warm light and steam, a drone with a blinking light crossing the sky, a flying-car streak. Colour: teal #0fb5ae and orange #ff8a3d dominant, magenta #ff2fa5 and violet #6d28d9 neon accents on deep blue-black #070b14. Interaction: the pointer shifts the camera (parallax across layers) and controls a flashlight-like glow; clicking a neon sign toggles it or triggers flicker; a "Rain intensity" slider; a "Lights out" button kills all neon then restores it in sequence; ambient audio (opt-in): rain noise plus distant hum. Title "RAMEN ALLEY · 2049" in a tall condensed sans with neon underline. Pre-render static layers; animate only rain/steam. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create a typographic "glitch manifesto" page, "SIGNAL / NOISE", in stark black, white and acid yellow (#e6ff00). Hero: enormous text "SIGNAL/NOISE" split into horizontal slices (clip-path/inset bands) that shift left/right randomly with RGB channel offsets (red/cyan duplicates via mix-blend-mode: screen) in bursts driven by a JS scheduler (a burst every 2–5 s with decaying intensity), plus scanline tearing, block displacement and random character corruption (text scrambles to █▓▒░/\|<> then resolves). Below: a manifesto of 10 numbered statements in a bold grotesque, each line decoding as it scrolls into view; inline highlights in acid yellow with black text; marquee strips of repeating phrases running in opposite directions; a "CORRUPT" slider (0–100) that raises glitch frequency and intensity globally; a big invert toggle (white on black ↔ black on white); the cursor spawns tiny pixel-sort trails (a canvas overlay where pixels smear horizontally near the pointer). Add a "data-moshed" grid of coloured blocks that shuffle and smear (canvas), a fake terminal error dump ("SEGFAULT 0x0000DEAD") and a ticking "signals lost" counter. Type: heavy grotesque for statements, mono for meta, big sizes with clamp(). Palette: #0a0a0a, #f2f2f0, #e6ff00, with tiny #ff3b30 and #00e5ff only inside RGB-split effects. Disciplined: strong grid, sharp edges, high contrast. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Design a futuristic holographic HUD interface, "HELIX — Orbital Operations Console" (all fictional). Space-black background #03060c with a faint perspective grid floor and drifting particles; thin-line UI in cyan #5ef0ff and white with occasional amber #ffb547 warnings. Centre: a large circular instrument of concentric rotating ring segments (SVG with dashed strokes, tick marks, arc gauges, numeric labels, chevrons) and a radar sweep with moving blips (the sweep highlights them with fading trails). Left: a rotating wireframe globe on canvas (lat/long lines with dotted city lights). Right: telemetry — three live oscilloscope traces with glow, a spectrum bar analyser, a vertical fuel gauge and a thrust-vector compass. A top status bar with UTC time, a mission clock counting up and ticking latency readouts. A bottom command line with autocomplete: "scan" (radial wave and a list of detected objects), "lock" (targeting brackets on a blip with its data), "jump" (hyperspace star-streak effect), "status" (a systems table). Panels have chamfered corners (clip-path), bracketed frames and an animated boot sequence at load (elements scan in sequentially with glitchy flicker). Optional beeps (WebAudio, default off). Type: a condensed uppercase sans (Bahnschrift / Arial Narrow stack) plus mono numerals. Interaction: hover panels for glow, drag the globe to rotate, click blips to select. Mobile: panels reflow into one column with the radar first. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create "Memphis Playground", an interactive 1980s Memphis-style poster maker. A large poster canvas (DOM/SVG) scattered with draggable shapes — squiggles, zigzags, triangles, half-circles, dotted grids, checkerboard tiles, bold arcs, lightning bolts, plus-signs, terrazzo confetti — in the Memphis palette: black and white patterns with teal #00b3a4, yellow #ffd400, pink #ff5fa2, blue #2f4bff, red #ff4b3e and lilac #b8a1ff. A huge editable headline (default "HELLO WORLD") in a heavy sans with a stacked-shadow extrusion (multiple offset text-shadows in contrasting colours) and a wavy underline; a text input changes the word live. Interaction: drag any shape (pointer events, raise z-index, spring settle); mouse wheel or a rotation handle rotates the selected shape; double-click cycles its colour; keyboard delete removes; a "Shuffle" button animates all shapes into a fresh, tasteful composition (random positions with spring physics), "Add shape" buttons for each kind, background pattern chips (dots, stripes, checker, terrazzo, plain), and "Save PNG" (render the SVG to canvas → download). Bouncy toy feel: overshoot easing, squash on pick-up, playful cursors. Type: chunky sans headline plus rounded small labels. Composition should look art-directed, not random. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create "Calibre 07 — Skeleton", a mechanical skeleton-watch movement in SVG whose gears actually mesh and turn. Compute gear geometry with JS (a tooth-path generator with involute-like teeth for a given module and tooth count, hub, and spoke cut-outs so the wheels look skeletonised), arranged so meshing pairs have correct ratios: mainspring barrel, centre wheel (1 rpm — minute hand), third wheel, fourth wheel (1 rpm — seconds hand), escape wheel with a pallet fork oscillating with the balance wheel (hairspring spiral pulsing, balance rocking ±250° at ~4 Hz visual), and ruby jewels (#b3122f) in gold settings. Timekeeping: the hour/minute/second hands show real local time; gears animate consistently with their ratios, the seconds gear ticking in discrete 1/4-second steps with a small impulse bounce. Aesthetic: dark bronze/gunmetal plate #15130f with radial sunburst engraving, polished brass/gold gears #c9a24d with gradient highlights and bevelled edges, steel screws with slotted heads at varied angles, blued-steel hands (#2a4a9c to sapphire), an engraved ring with minute ticks and Roman numerals, a sapphire-glass highlight over the top, ambient shadows under each gear. Interaction: hover a gear to highlight its train chain with a label ("Escape wheel · 15 teeth · 18,000 vph"); drag the crown (small knob on the right) to set time (gears spin rapidly forward/back); a "Slow-motion" toggle (0.1×) reveals the escapement; a "Wind" button charges a power-reserve indicator. Palette: bronze, brass, sapphire, ruby. Type: engraved small caps. Phase-align meshed teeth so the meshing looks plausible. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Build "Sky Clock", a panoramic landscape whose sky, light and life follow the time of day (real local time by default, plus a 24-hour scrubber). SVG/canvas landscape: a lake valley with layered mountains, a pine ridge, a small village with houses and a jetty, a boat, reeds. The sky gradient is keyed by hour with smooth interpolation: 04:00 pre-dawn indigo #1b2350, 06:00 sunrise coral/gold (#ffb37a to #f7d6a0 with blue above), 12:00 clear azure (#5aa9e6 to #cfe9ff), 17:30 golden hour (#ffcf8a to #ff9d6b), 19:30 dusk magenta/violet (#c2568a to #4a3a7d), 22:00 night navy #0b1030 with stars. Sun and moon travel arcs (moon with today's approximate phase), stars fade in and twinkle with a Milky Way band at night, clouds drift and take on light (under-lit pink at dawn), sun rays, lake reflections with ripples, village windows lighting at dusk, birds by day, bats at dusk, fireflies at night, mist over the lake at dawn. A large time readout in a thin serif ("17:42") with a phrase for the moment ("Golden hour", "Blue hour", "Deep night"); a scrubber shaped as an arc dial or slider to drag through 24 hours with instant scene updates; an "Auto" button to resume real time and a "Time-lapse" button that runs a whole day in ~20 s. Show approximate sunrise/sunset times for the user's date (standard solar formula at 45°N). Palette dynamic. Mobile-friendly. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Design "Lunar Almanac", an elegant moon-phase calendar for the current month computed from real astronomy. Compute moon age with the synodic month (29.530588853 days) from a known new-moon epoch (Julian date 2451550.1, 2000-01-06 18:14 UTC); illumination fraction = (1 − cos(2π·age/29.5306))/2; draw the terminator geometry properly. Centre: a giant moon disc drawn in SVG/canvas (procedural craters from layered radial gradients, maria as soft darker blotches, subtle limb darkening) shaded correctly for the chosen date's phase (proper terminator ellipse, faint earthshine on the dark side), gently rocking (libration) with a soft halo. Around/below it: a month grid of 28–31 small moons (one per day) each with the correct phase (SVG mask) and today highlighted; the phase names (New Moon, Waxing Crescent, First Quarter, Waxing Gibbous, Full Moon, Waning Gibbous, Last Quarter, Waning Crescent) with computed dates of the primary phases for the month (approximate to the day); an info card "Moon age: 12.4 days · Illumination 88% · Next full moon in 2 days · Distance ≈ 384,000 km (approx.)" and traditional full-moon names by month ("Harvest Moon", "Wolf Moon"…). Interaction: hover/tap a day to morph the giant moon to that date (phase animating smoothly), left/right keys, a month stepper and "Today" button, and a slider to scrub a whole year like a flip-book. Palette: midnight indigo #0b1026, silver #d9dde8, warm moon cream #f2ead3, rust #b5563a accent. Type: an elegant high-contrast serif with small caps and wide tracking; mono numerals for dates. Twinkling stars on canvas; a tiny wolf silhouette on a ridge that howls (a subtle head-tilt animation) at full moon as an Easter egg. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create "Nocturne — Window Seat", a rainy night-city view through a window. Canvas 2D: the background is an out-of-focus city rendered as soft bokeh discs (hundreds of circles of 20–120 px in amber #ffb454, sodium orange #ff8a3d, teal #2dd4bf, magenta #f43f9a and white, gently pulsing with slow parallax) on deep blue-black #060912, with slow horizontal smears of car lights along the lower third. In front: window glass with hundreds of raindrops — each drop a refractive lens (draw the offscreen background canvas flipped and slightly magnified inside a small clipped circle, plus a bright specular edge and darker rim); drops sit still, grow as tiny drops merge into them, and when heavy enough slide down leaving a thin wet trail (a translucent line that distorts the background slightly), wobbling and merging with drops they touch. Foreground: a fogged glass patch you wipe with the pointer (a fog layer of white-blue translucent noise erased by dragging, slowly re-fogging over time), condensation, optionally a tiny mug silhouette and a plant-leaf edge in the bottom corner with warm light and a faint lamp reflection. Rain audio (opt-in toggle: filtered noise plus occasional soft thunder), default off. Text: a small italic-serif "Nocturne" with faint glow at the bottom-left and a line like "Rain until morning." Efficiency: cap ~350 active drops, pre-render the bokeh to an offscreen canvas and animate its pulsing with an overlay layer. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Build "Sandglass", a falling-sand cellular simulation in the shape of a giant hourglass, painted in layered coloured sand. Grid ~160×280 cells on a canvas (ImageData scaled crisply), each cell empty / wall / sand with a colour index; classic rules (fall down, else diagonal down-left/right randomly) with a mask defining the glass shape (two bulbs and a narrow neck), a glassy frame with highlights, wooden caps top and bottom and brass pillars (DOM/CSS or SVG around the canvas). Sand starts in the top bulb as layered strata in a desert-dusk palette (terracotta #c8553d, ochre #e0a458, sand #f2d8a7, sage #9bb08c, indigo #34457a, rose #e6a5a1) and flows through the neck at a steady rate, forming a conical pile below with visible avalanches and stratified colours. Interaction: "flip" the hourglass (click the frame or press F) — the whole piece rotates 180° smoothly and the sand re-falls (swap the simulation orientation at the end of the rotation); paint mode: drag to pour a stream of the chosen colour anywhere inside the glass; a "Poke" tool opens a small hole in the glass so sand leaks out into a pile outside; tilt via device orientation or a pointer-drag gesture to rotate the gravity vector slightly so sand slides accordingly. A timer readout ("Elapsed 00:41") and an optional rustling sound (filtered noise, default off). Palette: sand tones on soft dusk grey #1e1b24 with warm light. Type: engraved serif small caps "SANDGLASS · 3 min". Performance: Uint8Array cells, update bottom-up with alternating scan direction. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create a self-playing motion-graphics title sequence, "FORM / MOTION — Showreel 2026", as a ~30-second loop choreographed in JS with easing (a small custom timeline engine on requestAnimationFrame; each scene driven by t in [0,1]; no libraries). A 16:9 stage centred and letterboxed (scales to fit). Scenes: (1) black → a white dot expands into a ring, the ring splits into bars that become the word "FORM" letter by letter (kinetic typography with overshoot); (2) geometric shapes (circles, half-circles, triangles, quarter-arcs) in a limited palette — cream #f4ecd8, ink #14110f, vermilion #ff4b2b, cobalt #2340ff, sun #ffc233 — bounce, roll and assemble into a Bauhaus-poster grid with hard-cut rhythm on a ~100 bpm beat; (3) a line-drawing scene where an SVG path draws itself into a face/character, then morphs into a flower and a bird (path morphing by resampling); (4) a typographic scale scene — "WHERE / IDEAS / TAKE / SHAPE" wiping in with masks, sliding lines and scale punches; (5) a radial burst of 48 rays with alternating colours rotating with easing while a counter rolls from 000 to 100; (6) an end card, "Made by hand, moves by code.", with a slowly rotating asterisk. A bottom control bar (auto-hides) has play/pause, a scrubber with scene markers (click to seek), scene names and a speed toggle (0.5×, 1×, 2×). Add film grain and a subtle vignette. Optional synthesised tick and whoosh at scene cuts (WebAudio, toggle, default off). Everything should feel choreographed — punchy timing, hand-implemented cubic/back/elastic eases, pixel-aligned, one consistent design language. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create a data-art chord diagram, "Flyways" — the annual migration of shorebirds between seven regions (illustrative data): Arctic Tundra, North America, Central America, South America, Europe, Africa, Asia-Pacific. A circle of 7 arcs sized by total flow with chords whose widths encode flow magnitude (thousands of birds), drawn as smooth ribbon paths (Béziers through the centre) with gradients from source to target colour and 2px surface gaps. Palette: warm paper #f5f0e6 with seven distinct earthy hues — tundra slate #56707a, North America terracotta #c8553d, Central America saffron #e0a12b, South America moss #6b8f47, Europe indigo #2f3f8f, Africa brown #9a5a2e, Asia-Pacific teal #1f8a8a. Animation: tiny bird-shaped particles (small triangles) flow along chords from origin to destination at speeds proportional to flow; a "Season" toggle (spring north / autumn south) switches direction and highlights different chords; a month scrubber animates seasonal pulses. Interaction: hover an arc to isolate its chords and dim the others, with a tooltip of totals in/out; hover a chord for "Arctic Tundra → South America: 1.2M birds"; click to lock a selection; a table-view toggle (accessible matrix) and a legend; keyboard focus on arcs. Header: editorial title "Flyways" with a hand-drawn bird line icon and a sentence of context; footnote "Illustrative data". Type: a refined serif for the title, small-caps sans for labels. Extra polish: an inner ring of tick marks with month labels, subtle grain. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Build "Bloom", a watercolour painting toy on cotton paper. Canvas layers: (1) paper texture (cold-press cotton: subtle grain generated on an offscreen canvas, cream #f8f4ea, deckled border), (2) a paint layer where pigments accumulate. Pressing the pointer drops pigment that blooms — a wet blob expanding over ~1.5 s with a soft feathered edge and darker rim (radial gradient plus an outline ring at lower alpha), an irregular organic outline (radius perturbed by low-frequency noise), granulation (fine speckle noise multiplied inside) and colour mixing via multiply blending; dragging paints a wet line as a series of smaller blooms, and pigment diffuses subtly for a moment after each stroke (a couple of blurred re-draws). Tools: Drop, Brush, Water (lightens/blends), Salt (sparkly crystalline starburst blooms on wet paint), Splatter (random flicks when the pointer moves quickly). Pigments with cute names shown as tin paint pans: Quinacridone Rose #d94f7c, Cerulean #2f7fb8, Hansa Yellow #f2c230, Sap Green #5d8a3a, Burnt Sienna #b85a30, Indigo #2b3a67, Payne's Grey #4c5b66, Violet #7b5aa6; a size slider, a "Wet-on-wet" toggle changing bloom radius/feathering, "Clear paper" and "Save PNG". A starting demo composition (an abstract sunset wash with hills) paints itself in ~6 s to show the medium, then the visitor paints over it. Type: hand-lettered small labels (cursive/italic stack) and a delicate serif title "Bloom". TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create "Four Seasons Tree", a single generative tree (recursive branching or a stochastic L-system) that lives through the seasons controlled by a slider or a loop. Canvas 2D on a paper-cut-style background: sky gradient and ground change per season; the trunk and branches (tapered, slightly curved Bézier segments with bark shading) sway in wind (branch angles perturbed by low-frequency noise, growing toward the tips). Foliage: leaves as small ellipses/hearts on terminal branches (up to ~4000). Spring: bare branches bud into pale green leaves and pink-white blossoms, petals falling occasionally, sky #cfe8f5, ground #b7d99a. Summer: dense deep-green leaves #3f8f4a with dappled light, sky #8fd0ff, birds and butterflies. Autumn: leaves turn amber #e8a33d / rust #c8553d / crimson #a72d2d with variation by branch depth, detach and fall with fluttering rotation, sky peach #ffd9b0, leaves scattered on the ground. Winter: bare dark branches #3a2e2a with snow caps drawn on upward-facing segments, snowfall, cold grey-blue sky #c7d6e2, a small perched bird. The season slider (0–4 continuous, wrap-around) blends everything smoothly; "Auto" loops through a year in ~40 s; clicking the tree regrows it (branch-by-branch growth over ~4 s); a "Wind" slider; "New tree" generates another seed. Show the month names, a ghosted numeral of the month, and a tiny sun/moon arc for day length. Type: a light serif italic season name (e.g. "Autumn"). Add subtle paper grain and a soft shadow ellipse under the tree. TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create "Nail & Thread", mathematical string art on a wooden board. A ring of N brass nails (N adjustable 60–360, default 200) pressed into a dark walnut board (#3a2416 with wood grain from layered gradients and SVG noise, vignette, top-left lighting, small shadows under each nail); threads connect nail i to nail (i × m mod N) for a multiplier m — the classic times-table circle producing a cardioid (m=2), nephroid (m=3) and beyond. Threads are thin (0.6–0.9px) with additive blending in coloured silk: a gradient along nail index from coral #ff6f59 through amber #ffb84d, cream #fff1c9 and teal #4dd8c4 to periwinkle #7b8cff, giving a luminous woven look with glints where threads overlap. Animation: m animates smoothly (fractional m — endpoints lerp between neighbouring integer mappings so the shape morphs continuously), sweeping from 2 toward N/2 with slow easing and pausing at pleasing integers, with the curve name appearing ("Cardioid", "Nephroid", "Trefoil-ish", "Quadrifolium"…). Controls: a beautiful large circular dial (or slider) for m, nail count, thread opacity, palette chips (Silk; Ink on Paper: black threads on cream; Neon: cyan/magenta on black), Play/Pause, a "Draw threads one by one" mode (threads appear sequentially like a maker winding them, with a needle point moving), and "Reveal envelope" overlaying the analytic envelope curve in thin gold. Arrow keys adjust m by 0.1. Type: a refined old-style serif brass plaque "y = x · m (mod N)" and a one-line explainer "The envelope of these chords is a cardioid." TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Create "Lava Lamp 1972", a lava-lamp object with convincing wax blobs in a 1970s room. Scene: a wood-panelled wall (#6b4226 with vertical grooves from gradients), a mustard shag-rug floor, a side table with a lamp — a tall tapered glass body with a chrome base and cap (SVG shapes with chrome gradients), lit from below by a bulb whose soft glow colours the wall. Inside: tinted liquid (translucent #ff7a1a to #ff3d81, selectable) and 7–9 wax blobs simulated as a metaball field with buoyancy physics — blobs heat at the bottom and rise, cool at the top and sink — rendered at low resolution (~90×220) by summing r²/d² per pixel on a canvas, or with the CSS/SVG gooey filter approach (blurred circles + threshold via feColorMatrix); choose whichever gives the smoothest merges and splits, clipped to the lamp silhouette. Shading: inner glass gradients and refraction highlights, a specular vertical streak, bulb glow beneath, blob translucency (lighter edges), and wax-coloured light spilling onto the wall. Controls: a chunky retro toggle switch (off: blobs cool and sink, the room darkens), colour chips ("Sunset" orange/pink, "Lagoon" green/blue, "Grape" purple/yellow), a "Heat" knob (dial) for motion speed; clicking/tapping the glass warms nearby wax so blobs rise. Extras: a psychedelic wall poster "PEACE · LOVE · GROOVE" in 70s rounded display letters with stripes, a record-player silhouette, drifting dust motes and warm film grain. Palette: burnt orange #d2691e, avocado #6b8e23, harvest gold #e3a018, brown #4a2c17, cream #f3e3c3 plus lamp glow. Type: chunky rounded 70s display (ui-rounded / Arial Rounded stack at heavy weight, tight tracking). TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.

Build "Organic Wave Lab", a generative blob-and-wave design lab. Left: a large stage showing a smooth organic blob (a closed Catmull-Rom/Bézier spline through N points around a centre with radii from noise) filled with a gradient and slowly morphing (points moving along smooth noise so the shape flows like a living cell), stacked with 3–5 concentric offset blob layers (translucent, multiply/screen) that create ribbons of overlapping colour. A second mode, "Wave", shows layered flowing wave bands like SVG wave dividers (each layer a sum of sinusoids animated horizontally with its own phase) with adjustable layers and turbulence; a third, "Rings". Controls panel (right, glass/soft card): sliders for Complexity (3–12 points), Distortion, Speed, Layers, Blur/Grain; a Seed with a "Randomize" dice button and lock; a gradient editor with 2–4 stops from curated palettes (Sunrise #ff9a8b / #ff6a88 / #ffd166; Lagoon #0f766e / #5eead4 / #fef3c7; Orchid #6d28d9 / #c084fc / #fbcfe8; Deep #0b132b / #1c2541 / #5bc0be) with click-to-cycle and a validated custom hex input; a live "SVG code" box that outputs real static SVG (path data computed from the current points plus the gradient definition) with "Copy SVG" and "Download .svg" (Blob URL, local); Pause/Play morph; a snapshot strip of up to six saved blobs (thumbnails you can click to restore). Visual design: soft, breathable, pastel-meets-deep; the page background subtly tints to the blob's dominant colour with grain; a friendly rounded sans (ui-rounded stack) with a big light title "Organic Wave Lab". Keyboard: R randomise, Space pause, S snapshot. Responsive: the panel becomes a bottom sheet on mobile. Default palette: deep indigo #1b1a55 background with peach/coral/lilac blobs, with a light theme toggle (#fdf6ef). TECHNICAL REQUIREMENTS: Deliver one completely self-contained, standalone HTML5 file with all CSS inline in a <style> tag and all JavaScript inline in a <script> tag. No external dependencies of any kind: no CDN, no external fonts (system font stacks only), no external images, no external SVG files, no libraries, no network requests. It must work by simply opening the file in a browser, fully offline. It must be responsive from 360px phones to large desktops, validate as standard HTML5, respect prefers-reduced-motion, support mouse and touch input, and run without console errors. Hand-craft it as a premium, award-worthy piece of digital art with real, evocative copy (no lorem ipsum), a disciplined palette, careful typography, polished motion and delightful details.