Claude Opus 5.5 100 HTML Files

Design a premium landing page for "Stillwater", a fictional breathing and meditation app, in refined glassmorphism. Background: deep midnight (#070b1f) with three slow-drifting aurora ribbons rendered on a canvas (layered, sine-deformed gradient bands in teal #2de2c4, violet #7b5cff and rose #ff6fa8, additive blending, very soft) over a faint twinkling star field. Foreground: frosted-glass panels (backdrop-filter blur + saturate, 1px inner highlight border, subtle grain) — a hero with a large, airy, light-weight sans headline; a centred "breathing orb" that expands and contracts on a 4-7-8 rhythm with a caption that cross-fades Inhale / Hold / Exhale; a row of three feature cards; a testimonial strip; and a pricing section whose monthly/yearly toggle animates a sliding glass pill. Delight: cards tilt in 3D toward the pointer with a moving specular glare; the aurora bends gently toward the cursor. Interaction: hover/tilt cards; click the orb to start/stop a guided one-minute session with a progress ring; pricing toggle. Mobile: cards stack, the orb stays hero-centred.

Create an immersive cyberpunk street at night titled "NEON RAIN — District 9 Night Market" (fictional). A full-viewport canvas scene with four parallax layers of skyline silhouettes (#05010f → #1a0433) and randomly lit windows; holographic vertical signs with katakana-like glyphs drawn in canvas that flicker with believable neon failure (brief dropouts, buzz); a wet street reflecting the signs (mirrored, blurred, rippled); dense diagonal rain with splash particles on the ground. Palette: hot magenta #ff2a6d, cyan #05d9e8 and acid-yellow #f9f002 accents on ink black. Overlay a thin HUD: time, temperature, "SIGNAL" bars and a scrolling ticker of fictional news in monospace. Typography: condensed uppercase sans with chromatic-aberration text-shadow. Interaction: the pointer moves the parallax camera; a click triggers a lightning flash that briefly lights the whole skyline plus a thunder rumble (Web Audio noise, after a gesture, with a mute toggle); a toggle switches rain intensity. Must stay fluid at 60fps using pooled particles.

Build "RASTER — Swiss Poster Machine", an homage to the International Typographic Style. The page is a single poster on an off-white (#f2efe8) sheet set on a strict 12-column modular grid (revealable with the G key or a toggle that shows hairline cyan grid lines). Palette strictly signal red #e30613, black #111 and white. A heavy grotesque sans stack ("Helvetica Neue", Helvetica, Arial, "Nimbus Sans", sans-serif) used with extreme scale contrast: a giant numeral or word, small flush-left body text, rotated captions. Geometric elements (circles, bars, quarter-arcs) occupy grid cells. Every click (or Space) recomposes the poster from a new seed — elements slide and rotate to new cells with crisp eased FLIP-style transitions, never overlapping text illegibly. Show the seed as an edition mark ("No. 0417"). A small control strip: previous/next composition, grid toggle, invert (black ground). It must look like a museum-quality, Müller-Brockmann-inspired print at any viewport, reflowing the grid for portrait phones.

Create "The Clockmaker's Orrery", an interactive mechanical model of the solar system in the style of an 18th-century brass instrument. Parchment background (#efe3c6 with a subtle radial vignette and paper fibres from layered gradients), deep ink lines (#2b1d0e), and brass/gold metallic gradients (#b8860b → #f3d27a → #7a5410) for arms, rings and gears. Centre: a glowing sun; eight planets on brass arms orbiting at correct relative orbital periods (Mercury 0.241 y … Neptune 164.8 y) with log-compressed distances; an engraved zodiac ring with degree ticks around the edge; interlocking gears in a corner that rotate in sync with simulated time. Typography: engraved-looking serif small caps ("Iowan Old Style", "Palatino Linotype", Palatino, "P052", Georgia, serif) with generous letter-spacing. UI: a brass-styled readout of the simulated date, a speed dial (pause, 1 day/s, 1 month/s, 1 year/s), and click-a-planet to open an ornate cartouche with its name, period and a short engraved description. Delight: optional tiny ticking sound (Web Audio, after a gesture) and hover glints on the brass. SVG for the instrument, requestAnimationFrame for motion.

Make "Sumi — Ink in Water", a meditative fluid simulation. A full-screen canvas showing warm washi paper (#f4efe6 with procedurally generated fibre noise). Clicking or tapping drops ink that blooms, curls and diffuses like sumi ink in water — implement a small grid-based stable-fluids solver (advection, diffusion, pressure projection) at reduced resolution with smooth upscaling, or an equivalent dye-advection approach; dragging the pointer stirs the water. Default ink is deep sumi black-indigo (#1b1f2a); a minimal vertical toolbar on the right, set in a quiet serif, switches to indigo (#2c3e75), vermillion (#d23c26) or pale gold (#b89b5e). A red hanko seal in the corner (SVG, carved-looking characters approximated with geometric strokes) signs the piece; a "Still the water" button slowly fades the ink away. Typography: an elegant vertical title using writing-mode: vertical-rl. Delight: an occasional falling ink droplet when idle; ink leaves faint tidelines at its edges. Must run smoothly on laptops and lower its resolution on mobile.

Design "LOUD HOUSE RECORDS — Issue 07", a neo-brutalist web zine for a fictional independent record label. Raw, confident and loud: flat saturated colours (cobalt #1d3cff, electric yellow #ffe600, black #000, off-white #f7f5f0, one hit of hot pink #ff3ea5), 3–4px black borders everywhere, hard offset shadows (8px 8px 0 #000) with no blur, oversized uppercase grotesk headlines, monospace metadata, and a deliberately collaged layout on a visible grid. Sections: a massive masthead with a marquee strip of release names; a "NEW RELEASES" grid of album cards whose covers are generated geometric CSS/SVG art, unique per card; a tracklist table; a tour-dates list with rotated SOLD OUT stamps; and a sign-up box. Interaction: cards physically "press down" on hover/click (shadow collapses, element translates); a sticker you can drag anywhere; a "SHUFFLE COVERS" button that re-rolls the cover art; and a "preview" button that plays a short synthesized drum loop (Web Audio, after a gesture). Must remain highly legible and responsive.

Create "SOFT MACHINE", a playable neumorphic synthesizer. Everything is sculpted from one soft clay surface (#e4e8ee) with paired light/dark shadows (#ffffff / #b8bec7), raised and pressed states, and a single accent — warm coral #ff6b5a — for active LEDs and the waveform. Layout: a device centred on the page with an OLED-like inset screen showing a live oscilloscope (AnalyserNode drawn on canvas); four rotary knobs (cutoff, resonance, attack, release) dragged vertically; a waveform selector (sine/triangle/saw/square) as neumorphic segmented buttons; a 16-step sequencer row of soft pads; and a two-octave keyboard of soft keys. Typography: a rounded sans stack ("SF Pro Rounded", Nunito, "Varela Round", "Segoe UI", system-ui, sans-serif) with small-caps labels in muted slate. Interaction: click/touch keys or use computer keys A–K to play (Web Audio oscillator → filter → envelope); knobs update the sound in real time with smooth value tooltips; the sequencer plays/stops with adjustable tempo. Audio starts only after the first gesture. Responsive: the device scales down and the keyboard becomes compact on phones without page overflow.

Design a long-read editorial feature: "The Last Keepers — Life at the Edge of the Light", a fictional magazine story about lighthouse keepers. Write original, evocative literary prose (~900 words), impressionistic rather than presenting invented facts as real history. Typography-led: a classic book serif ("Iowan Old Style", "Palatino Linotype", Palatino, "P052", Georgia, serif) for body text at a comfortable measure, a large Didone-feeling headline, an ornamental drop cap, small-caps bylines, pull quotes that break the column, and marginal notes on wide screens. Palette: cream paper #f6f1e7, ink navy #14213d, signal red #c0392b, fog grey. Hero: a full-bleed SVG illustration of a lighthouse on rocks at dusk with a rotating light beam that sweeps across the headline and a gently animated sea. Scroll storytelling: sections fade and rise in; a reading-progress bar styled as a lighthouse beam; a section where the background shifts from dusk to night as you scroll; and an illustrated "anatomy of a lens" figure (Fresnel lens rings) that assembles on scroll. Footnotes pop up on click. Must read beautifully on phones.

Build "Asterism — Draw Your Own Sky", an interactive star chart where you invent constellations. A deep indigo night gradient (#060818 → #141a3d) with a procedurally placed star field (varying magnitude, subtle colour temperature from blue-white to amber, twinkle), a faint Milky Way band made of clustered noise particles, and fine gold line work (#e8c872) in the style of antique celestial atlases. Click one star and then another to draw gold connecting lines; when you close a shape (or press "Name it"), the constellation receives a generated mythic name (combined from curated word lists, e.g. "The Weeping Heron") and an engraved label with a faint illustrated halo appears. A side panel (glass, collapsible on mobile) lists your constellations; hovering highlights them. Also: a slowly rotating sky (drag to rotate), a toggle for a coordinate grid of curved RA/Dec-style lines, "Clear sky" and "Save as PNG". Constellations persist in localStorage. Typography: elegant serif capitals with wide tracking and italic Latin-flavoured subtitles.

Create "MERCURY", a hero page for a fictional generative-audio studio whose centrepiece is a liquid chrome blob. On near-black (#050506), render a metaball cluster (canvas or SVG gooey filter) shaded as polished liquid metal — environment-map-like banding in silvers (#e8ecf1, #9aa3ad) and deep blacks with a thin iridescent rim (cyan → magenta → gold). The blobs orbit, merge and split organically; the cursor acts as a magnet, pulling a droplet that stretches and then snaps back with viscous easing. A giant wordmark "MERCURY" in a wide, heavy sans with a chrome gradient fill and a slow specular sweep; the blob passes behind and in front of letters (layering). Minimal navigation, a one-line manifesto, three glass "capability" chips, and a CTA button whose hover makes a small droplet drip from it. Interaction: pointer magnetism, click to split a droplet off, scrolling gently shrinks the blob into the corner. Tasteful, luxurious, silky 60fps; reduced motion shows a static sculpted frame.

Design "Herbarium Imaginarium", a Victorian botanical specimen cabinet of procedurally grown plants that do not exist. Aged paper (#efe6d2 with foxing spots and fibre texture from layered radial gradients), sepia ink (#4a3622), faded botanical greens (#6b7f4e, #9aa77a) and madder-red accents for seeds and berries. Each specimen card shows a plant grown by an L-system/recursive branching algorithm and drawn in SVG with ink-like stroke variation, leaves, buds and occasional flowers; a paper tape strip "holding" the stem; a handwritten-feeling label in an italic serif with an invented Latin binomial (generated from syllable lists), a collection date and a specimen number. A grid of six specimens on desktop, one or two on mobile. Interaction: "Collect a new specimen" grows a plant stroke by stroke (animated stroke-dashoffset); clicking a card opens it large in a lightbox with a magnifying-loupe hover; a "Press" button toggles a flattened pressed-flower look (desaturated, slightly translucent). Typography: "Iowan Old Style", Palatino, "P052", Georgia, serif, with italic labels and ornamental rules.

Build "Nimbus", an elegant weather dashboard for the fictional coastal city of Port Aurelia (clearly fictional sample data). The hero is an animated sky that changes with the selected condition: clear day (drifting sun glare, soft clouds), rain (parallax raindrops, darker gradient), snow (flakes with sway), thunderstorm (lightning flashes) and clear night (stars, moon). The palette adapts per condition but stays sophisticated (e.g. day #7cc4f5 → #e8f6ff, night #0b1026 → #2b2f63). Foreground glass cards: current temperature as a huge thin numeral, feels-like, humidity and UV; an animated wind compass; a sunrise/sunset arc with the sun's current position; a 24-hour temperature line chart (SVG smooth curve with gradient fill and hover tooltip); and a 7-day forecast strip with custom SVG weather icons that animate on hover. Interaction: clicking a forecast day switches the whole scene and its data with a smooth cross-fade; a °C/°F toggle. Typography: a clean sans with tabular numerals.

Create "Woolgathering", Conway's Game of Life rendered as a living piece of knitting. Each cell is drawn on a canvas as a knit stitch (a small V-shaped pair of loops with shading); live cells are coloured yarn and dead cells are background yarn, so the evolving pattern reads as Fair Isle knitwear. Palette of cosy wools: oatmeal #e9dcc5 background, rust #b5502b, mustard #d9a441, forest #2f5d50, cream #f6efe2 — plus a colourway selector with four palettes. Add a subtle fuzz/halo on stitches and gentle drape shading across the fabric. Frame the canvas as if it hangs from knitting needles (SVG at the top) with yarn-ball illustrations. Warm rounded controls: play/pause, step, speed, randomise, clear, and preset patterns (glider, pulsar, Gosper glider gun, a snowflake motif). Draw cells with pointer or touch. Show the generation count as a knitted row counter. Typography: a friendly serif ("Cooper", Georgia, "URW Bookman", serif).

Design "MOVE — A Manifesto in Motion", a scroll-driven kinetic typography experience. Black background (#0a0a0a), off-white type (#f1f1ec) and one acid accent (#c6ff00). Seven original manifesto statements about motion, attention and design each get a full-screen scene with a distinct typographic motion driven by scroll progress: letters assembling from scattered positions; words stretching horizontally with scaleX; a line splitting in half to reveal an accent line; characters cascading like dominoes; a word rotating in 3D; a sentence typed out with a caret; and a giant word zooming until its counter becomes the next scene's background. Use sticky sections and custom scroll-progress mapping, with CSS transforms only for performance. Typography: a heavy grotesque/condensed sans stack for display and monospace for small annotations such as scene numbers ("SC. 03 / 07"). A progress rail on the side. Reduced motion: statements appear statically with simple fades.

Create a landing page for "The Aurelian", a fictional 1928 Art Deco grand hotel. Black lacquer (#0b0b0c) and deep emerald (#0f3d33) grounds with gold (#d4af37, grading to #f5e3a1) geometric ornament — sunbursts, stepped ziggurat frames, chevrons and fan motifs, all inline SVG. Typography: tall, thin, high-contrast display capitals (stack: Didot, "Bodoni 72", "Bodoni MT", "C059", Georgia, serif) with wide letter-spacing, plus refined small caps. Sections: a hero with an animated sunburst radiating behind the hotel name and a symmetrical Deco frame that draws itself in gold; "The Suites" as three arched cards with gilded hover states; a dining section with a menu styled as an engraved card; an elevator-dial floor selector that scrolls to sections while its needle rotates; and a reservation form with Deco-bordered inputs. Delight: a gold-foil shimmer sweeping across headings and fan patterns that open on scroll. Elegant and symmetrical on desktop, gracefully stacked on phones.

Build "PLAZA AETERNA — Mall of Tomorrow (Est. 1994)", a vaporwave dreamscape. Background: a sunset gradient (#ff71ce → #b967ff → #01cdfe) with a striped retro sun, a 3D-perspective neon grid floor scrolling toward the viewer, palm silhouettes, and a slowly rotating marble bust built from layered SVG shapes with procedurally generated marble veining. Overlay draggable Windows-95-style windows (bevelled grey #c0c0c0, navy title bars) containing: a "Store Directory" with pastel icons, a mock MIDI player that plays a synthesized chord progression (Web Audio, after a gesture), and a "Welcome" message in full-width styling (Ａ Ｅ Ｓ Ｔ Ｈ Ｅ Ｔ Ｉ Ｃ). Typography: a mixture of serif italics, pixel-feeling monospace and widely spaced letters. Interaction: drag windows by their title bars, minimise them to a taskbar with a Start button and clock, click desktop icons to open windows, and a VHS tracking glitch on hover. Responsive: windows become stacked cards on phones.

Create "Harmonia — Pendulum Wave", a physically accurate pendulum-wave simulation as minimalist kinetic art. Charcoal background (#16171b); 18 pendulums whose lengths are chosen so they complete 51, 52, 53… oscillations in 60 seconds (the classic pendulum-wave set-up), rendered from a slightly elevated 3D perspective with fine white strings and glowing spheres in a gradient spectrum from #ffd6a5 to #9bf6ff, plus optional light trails that paint Lissajous-like ribbons. A thin brushed-metal mounting bar at the top. Beneath, an elegant monospace readout: elapsed time, cycle phase, and a timeline scrubber showing where you are in the 60-second pattern (snake, split, chaos, realignment). Controls: play/pause, speed (0.25×–4×), trails toggle, view toggle (side / top-down), and "Release", which pulls every pendulum back and lets them drop. Optional soft chime whenever a pendulum crosses centre (Web Audio pentatonic, after a gesture, muted by default). Typography: thin sans plus mono.

Design "Foxglove Hollow", a layered paper-cut forest diorama. Seven to nine stacked layers of hand-cut-looking paper (SVG paths with slightly irregular edges) — distant hills, pines, a winding river, mushrooms, ferns, a small fox and foreground grasses — each casting a soft drop shadow onto the layer behind it so the scene has real depth. Day palette: sage #9bb89b, moss #5f7f5b, deep teal #274e52, ochre #d9a45b, burnt orange #c8642d, cream sky #f3e8d2. Night palette: indigo layers, tiny glowing windows, fireflies and a paper moon. Subtle paper grain from procedural noise. Interaction: pointer movement creates parallax between layers (touch-drag on mobile); a day/night toggle recolours every layer with a staggered transition; clicking the fox makes it hop to a new spot; paper leaves drift gently. The title sits on a small paper tag hanging from a string, in a warm serif. The composition must recompute nicely for portrait screens.

Build "HELIOS/OS v2.3", a retro CRT terminal operating system simulation. Full-screen phosphor green (#33ff66 on #031a07) with themes for amber (#ffb000 on #1a0f00) and ice (#9fe7ff). CRT effects in CSS/canvas: scanlines, subtle screen curvature (vignette, rounded corners, inner shadow), phosphor glow/bloom text-shadow, gentle flicker and a rolling refresh bar. On load: a believable BIOS boot sequence (memory check counting up, device list) followed by a login banner. A working shell with an input line and blinking block caret supporting: help, ls, cat <file> (several short fictional files including a poem and a mission log), clear, date, whoami, theme <green|amber|ice>, matrix (glyph rain for a few seconds), weather (ASCII art), snake (a small playable ASCII snake game inside the terminal), command history with ↑/↓, and tab completion. Typography: a monospace stack. Keyboard-first, with tap-to-focus on phones so the soft keyboard appears. Optional typing sounds (Web Audio clicks, off by default).

Create "Long Water — The World's Great Rivers", an elegant data-art visualization comparing the ten longest rivers. Use these commonly cited approximate lengths (label them "approx." and note that sources vary): Nile 6,650 km; Amazon 6,400; Yangtze 6,300; Mississippi–Missouri 6,275; Yenisei 5,539; Yellow River 5,464; Ob–Irtysh 5,410; Paraná 4,880; Congo 4,700; Amur 4,444. Each river is a flowing, meandering SVG ribbon whose length is proportional to its real length, flowing left to right with particles drifting along it like current. Palette: deep river blues and teals on pale limestone (#f3f1ec) — a sequential scale from #0b3d5c to #7fc8c2 — with thin ink labels. Typography: refined serif titles, small-caps continent labels, tabular numerals. Interaction: hover a river to highlight it and show a tooltip (length, continent, where it flows out); sort toggle (by length / by continent); unit toggle (km / miles); a "race" button where droplets travel every river at the same speed so the differences in length can be felt. Include an elegant legend and a short intro paragraph. Mobile: ribbons become vertical flows.

Build "Formlehre — Bauhaus Composer", a tactile composition toy honouring Bauhaus design. A board on warm cream (#f1ead8) with a tray of primary shapes — circle, square, triangle, semicircle, quarter-circle, bar — in the Bauhaus triad red #d62d20, yellow #f4c20d and blue #1d4e9e, plus black #111. Drag shapes onto the board; they snap to a hidden 8×8 grid with a satisfying spring; rotate with the wheel or R key, scale with handles, recolour by clicking a swatch, bring to front. A "Kandinsky" button auto-composes a balanced composition using Kandinsky's colour–form associations (yellow triangle, red square, blue circle) with a short explanatory caption. Typography: a geometric sans stack (Futura, "Century Gothic", "Avenir Next", "URW Gothic", sans-serif) with lowercase-only headings in the Bayer "universal" spirit and large numeral section markers. The toolbar is made of coloured geometric buttons. Export the composition as PNG. Keyboard: Delete removes, arrows nudge. Works with touch.

Create "Descent — Eleven Thousand Metres Down", a scroll-driven journey from the ocean surface to the bottom of the Mariana Trench (~10,935 m). As you scroll, the background transitions through the ocean zones — sunlight (#1e90c8), twilight (#0b3a66), midnight (#04142b), abyssal (#020812) and hadal (#000204) — while a fixed depth gauge counts metres and shows the zone name, pressure (≈ 1 additional atmosphere per 10 m) and temperature notes. Illustrated SVG/canvas creatures appear at approximately correct depths: dolphins and sunlit fish near the top, jellyfish, a sperm whale (~1,000 m and deeper), an anglerfish with a glowing lure, a vampire squid, a gulper eel, amphipods, and finally the trench floor. Deeper creatures are bioluminescent, with pulsing blue/green light; marine snow drifts through the water; light rays from the surface fade out gradually. Short, accurate captions (keep claims general and well established). Interaction: scroll; in the dark zones the pointer is a faint torch revealing nearby creatures; clicking a creature opens a caption card. It ends with an elegant "Return to surface" button that smooth-scrolls up.

Build "Rosette — Symmetry Painter", a radial-symmetry drawing instrument. A black canvas (#070707) where every stroke is mirrored across N rotational segments (selectable 3–24, plus mirror on/off) around the centre, producing mandala-like jewel artwork. Brushes: glowing neon line (additive blending), ink line with velocity-based width, dotted stardust, and ribbon. Palette presets: "Jewels" (#ff006e #fb5607 #ffbe0b #8338ec #3a86ff), "Byzantine" (golds and deep blues), "Porcelain" (cobalt on white — switches the background to white), plus a hue-cycling rainbow mode. A faint guide shows the segment lines while drawing and fades out afterwards. UI: a floating, elegant control dock (glass on dark) with segment slider, brush picker, palette swatches, undo, clear (with a dissolve animation) and PNG download. Delight: an idle "autodraw" that paints slowly on its own until the user touches the canvas, and a gentle rotation mode that spins the artwork. Touch-friendly with pointer capture.

Design a product page for "Maison Varenne — Calibre 01", a fictional minimalist luxury watch. Palette: ivory #f5f1ea, champagne #d8c3a5, charcoal #1c1c1c and a hint of midnight blue #1b2a41 for a dial variant. The hero is a large, photoreal-feeling SVG watch built entirely from gradients: a brushed-steel case with conical highlights, a domed sapphire reflection, applied indices with tiny shadows, dauphine hands showing the REAL current local time, and a smoothly sweeping seconds hand (8 beats per second). Typography: a refined high-contrast serif for headings with wide-tracked small sans captions. Sections with generous whitespace: an exploded view of the movement whose layers separate on scroll; a dial variant selector (ivory / midnight / salmon) that recolours the watch with a smooth transition; a specification table; and a "Reserve" CTA. Interaction: hovering the watch tilts it slightly and moves the sapphire reflection; a "Night" toggle shows lume glowing on the hands and indices. Quiet, precise animation — nothing gaudy.

Create "Pocket Metropolis", an isometric tiny-city builder toy. A canvas-rendered isometric grid (12×12 on desktop, fitted on mobile) in soft pastels: grass #a8d5a2, water #7ec8e3, roads #d6d0c4, and buildings in peach #ffb5a7, blush #fcd5ce, mint #b8e0d2 and lavender #cdb4db, with gentle ambient-occlusion shading on each block face. A bottom toolbar places houses, towers, trees, parks, roads and water; buildings pop in with a squash-and-stretch bounce. Little cars travel along connected road tiles and tiny people stroll in parks. A day/night cycle slowly shifts the lighting (sky gradient behind, windows lighting up at night, glowing streetlamps). A stats bubble shows population and happiness (parks near homes increase it). Interaction: click/tap tiles to place; right-click/long-press to bulldoze with a puff of dust; drag to pan; pinch/scroll to zoom; "Random town" seeds a charming city. Persist to localStorage. Typography: a rounded, friendly sans.

Build "PULSE — Generative Audio Visualizer". On first click, a built-in generative electronic track starts, synthesized entirely with Web Audio (kick, hi-hat from filtered noise, a bassline and an arpeggiated pad in a minor key at ~110 BPM, evolving every 8 bars). An AnalyserNode drives the centrepiece: a radial frequency bloom — 128 bars around a circle with mirrored symmetry, a pulsating core that swells on each kick, orbiting particles that accelerate with high frequencies, and a smoky trail (canvas feedback with a slight zoom/rotation each frame). Before audio starts, an idle breathing version of the visual must already look beautiful. Palette: sunset-to-violet gradient (#ff9a3c → #ff3c78 → #7b2ff7 → #16d9e3) on deep plum-black #0c0612. Typography: wide, spaced uppercase sans for the title and a small monospace readout of BPM, bar count and track section. Controls: play/pause; mode switch between "Bloom", "Tunnel" (concentric rings rushing toward the viewer) and "Horizon" (mirrored waveform landscape); volume. Optional "Use microphone" button with a graceful fallback if permission is denied.

Create "Senbazuru — Fold a Paper Crane", an animated, step-by-step origami crane made with CSS 3D transforms or canvas 3D projection. A square of patterned washi paper (generated seigaiha waves or asanoha pattern in indigo #264653 on cream, with a coral #e76f51 reverse side) folds through about eight key stages — square base, bird base, narrowing folds, head fold, wings — with smooth hinge rotations, correct front/back faces and soft directional shading on each facet that changes with its angle. A clean Japanese-minimal layout: off-white #f7f3ec, lots of space, the step number as a large thin numeral, a one-line instruction for each step, and a progress rail of eight dots. Interaction: next/previous buttons, arrow keys and an auto-play toggle; drag to orbit the model; a picker for three washi patterns. Finale: the finished crane flaps gently and floats above a soft shadow while a counter reads "1 of 1000". Typography: an elegant serif plus tiny wide-tracked sans labels.

Design "Elementa", an interactive periodic table of all 118 elements with a premium dark look (#0d1117). Each tile shows atomic number, symbol and name, coloured by category with a harmonious palette (alkali metals #ff6b6b, alkaline earth #ffa94d, transition metals #ffd43b, post-transition #69db7c, metalloids #38d9a9, nonmetals #4dabf7, halogens #748ffc, noble gases #da77f2, lanthanides #f783ac, actinides #e599f7) at soft opacity with glowing borders. Use standard atomic weights, rounded sensibly. The layout follows the standard 18-column table with the f-block below; on narrow phones the table pans horizontally inside its own scroll container (the page itself must not overflow). Interaction: hovering or focusing a tile fills a large detail panel with an animated Bohr-model shell diagram (electrons orbiting on shells with correct per-shell counts), category, atomic mass and state at room temperature; the category legend buttons filter and highlight; a search box jumps to an element. Keyboard navigable with arrow keys.

Build "Carriage Return — A Typewriter for Letters", an interactive typewriter writing experience featuring a fictional machine, the "Marlowe 44". A three-quarter illustrated typewriter (SVG; mint-green enamel #9fc9b6 with cream keys and chrome details) sits at the bottom, and a sheet of textured paper (#faf6ec) feeds out above it. Typing on the physical keyboard (or tapping on-screen keys) stamps characters onto the paper with realistic imperfections: slight baseline jitter, varied ink density, an occasional faint double strike, ribbon texture. The carriage visibly shifts left as you type, a bell dings near the right margin, and Enter triggers a carriage return with the lever animation and a line feed. Synthesized sounds (Web Audio clicks and bell) after the first gesture, with a mute toggle. Typography: a typewriter monospace stack ("Courier Prime", "American Typewriter", "Courier New", "Nimbus Mono PS", monospace). Extras: a red/black ribbon toggle, "New sheet" pulls the paper out with an animation, and "Save letter" downloads a PNG of the page. A warm desk background with wood-grain gradients and soft lamplight.

Create "Orbital — N-Body Gravity Playground". A full-screen canvas of deep space (#03040a) with a subtle nebula (layered noise gradients in #1b1464 and #5f0f40) and parallax stars. Click and drag to fling a new body: the drag vector sets its velocity, shown as a dotted aiming line with a predicted trajectory that accounts for existing masses. Bodies attract with softened Newtonian gravity, leave glowing fading trails, and merge on collision (conserving momentum and mass, mixing colours) with a flash. Colour and glow reflect mass (small icy blue → large hot orange/white). Presets: "Binary star", "Solar system", "Figure-eight three-body", "Galaxy collision" (hundreds of light particles around two cores). A minimal monospace HUD shows body count, total energy and simulation speed. Controls: mass selector for new bodies, pause, slow motion, trail length, clear, and "follow" (camera tracks the heaviest body). Scroll/pinch to zoom, right-drag or two-finger drag to pan. Use a fixed-timestep velocity-Verlet integrator.

Design "Nijūshi Sekki — The Twenty-Four Seasons", a contemplative calendar of the traditional East Asian 24 solar terms. A large circular SVG dial divided into 24 arcs at 15° intervals of the sun's ecliptic longitude, each filled with a traditional Japanese colour suited to that part of the year (e.g. sakura-iro #fef4f4, moegi #aacf53, ruri #1e50a2, kuchiba #e0c38c, kakishibu). The current date's term is marked by a small sun computed from today's date (approximate dates are fine; say so). Selecting a term shows its romanized name, kanji and English meaning (e.g. Risshun 立春 "Beginning of Spring"), its approximate date range, a short poetic description, and a softly animated seasonal generative motif behind the text (petals, rain, fireflies, falling leaves, snow). Typography: vertical Japanese text using writing-mode for the kanji and an elegant serif for English. Palette: washi white #f8f5ee and sumi #2b2b2b, tinted by the selected term's colour. Interaction: click arcs, arrow keys to step through, a "Today" button. Responsive: the dial scales and the detail panel moves below it on phones.

Create "MYTHIC — Holographic Card", a premium collectible trading card with realistic holographic foil. One large card centred on a dark velvet background (#0e0b16 with a soft spotlight). The card art depicts an original creature, "Lumidrake, the Prism Wyrm", composed entirely of SVG shapes: a stylised crystalline dragon silhouette over a starburst. The foil: layered conic/linear rainbow gradients with color-dodge/overlay blend modes, a procedural glitter texture, and a diagonal glare band — all driven by pointer position so the rainbow shifts and the glare slides as the card tilts in 3D (rotateX/Y with spring easing and perspective). An embossed frame, a stat block (ATK/DEF, rarity stars), italic-serif flavour text and a set number "077/250". Interaction: pointer tilt (touch-drag on mobile); click to flip the card to its patterned back; a "Pack opening" button plays a short sequence in which a foil pack tears open and the card slides out with a flash. Foil palette: iridescent pastels over deep indigo art.

Build "Labyrinthos", a maze game styled as an ancient stone labyrinth seen from above. Generate a new perfect maze each round (recursive backtracker or Wilson's algorithm), rendered on canvas as carved terracotta/sandstone walls (#c4773b, #e2b07a, with highlight and shadow edges for relief) on a darker dusty floor (#6b4a2b), with subtle noise texture and a Greek-key meander border. The player is a small flickering flame that lights only a radius around it — the rest of the maze is dark (fog of war that dimly remembers visited corridors). Controls: arrow keys/WASD, swipes on touch, and an on-screen d-pad on mobile. The exit is a glowing golden thread spool. Features: the maze visibly carves itself at the start of each round; a "Show Ariadne's thread" hint animates the solution path (BFS) as a red thread; a timer; three sizes; and a victory screen with a laurel illustration. Typography: an inscriptional Roman-capitals feeling serif with wide spacing.

Create "Currents — Flow Field Studio", generative art made of thousands of particles following a Perlin/simplex noise vector field (implement the noise inline). Particles leave long, fine, semi-transparent strokes that accumulate into silky flowing textures like wind maps or marbled paper. Five curated palettes, each with its own background: "Kyoto Dusk" (#1a1423; #e8a87c #d45d79 #6e5773 #ea9085), "Glacier" (#f4f7f6; #264653 #2a9d8f #8ab17d), "Ember" (#0d0d0d; #ff4800 #ff7b00 #ffb700), "Riso" (paper #f2eee3; fluorescent pink #ff48b0 and blue #0078bf with multiply blending) and "Mono Ink". A slim, elegant side panel holds noise scale, particle count, stroke length, curl/turbulence, palette, a seed field, "Regenerate" and "Download PNG". Clicking the canvas plants an attractor/vortex that bends the field locally; the piece slowly evolves over time (the noise's z-axis). Typography: understated monospace labels and a serif title. Must stay performant (typed arrays, batched paths).

Design a landing page for "Ember & Oak Coffee Roasters" (fictional). Warm palette: espresso #2b1a12, roasted brown #5c3a21, crema #c8a27a, oat #efe5d6, copper #b87333. Hero: a large SVG coffee cup at a three-quarter angle with animated curling steam (turbulence-displaced SVG paths) and a latte-art rosetta in the crema that redraws on hover. Sections: "Our Beans" — a horizontal scroll-snap carousel of origin cards (fictional estates in real coffee-growing countries such as Ethiopia, Colombia and Guatemala), each with a custom SVG illustration and altitude/process notes; an interactive tasting-notes flavour wheel (SVG donut with sub-segments — fruity, floral, sweet, nutty, spices, roasted) where hovering expands segments and selecting one shows matching beans; a "Roast level" slider that shifts a bean illustration from green to dark roast with crackle particles at first crack; brew-guide steps with timers; and a subscription CTA. Typography: characterful serif headings (Cooper, Rockwell, Georgia, serif) with a clean sans for body text. Tactile hover states throughout.

Create "Meridian Metro", an animated transit map for a fictional city in the tradition of Beck and Vignelli diagrams. White ground (#fbfbf9); six coloured lines (#e4002b red, #0072ce blue, #00a651 green, #ffb81c amber, #9b26b6 purple, #00b2a9 teal) drawn as thick SVG paths with only 45° and 90° bends; interchange stations as white capsules with black outlines, regular stations as tick marks; a river as a pale blue band and a park area. Station names in a clean humanist sans with careful placement. Trains (small rounded rectangles in the line colour) run along the lines on simulated schedules, pausing at stations. Interaction: hover a line to spotlight it (others fade); hover or click a station for a card with next departures whose countdowns tick live; a route planner — pick origin and destination to highlight the shortest path (Dijkstra on the station graph) with transfer count and estimated time; zoom/pan on mobile. The line legend doubles as toggles. Include a subtle "service status" panel ("Good service", "Minor delays"). It should look like a crisp printed map.

Build "Frost Garden — Diffusion-Limited Aggregation", a crystal-growth simulation that produces delicate branching ice and coral structures. A canvas with a deep blue-black gradient (#020617 → #0b1d3a). Random walkers diffuse and stick when they touch the growing cluster; stuck particles are coloured by arrival time (pale ice #e0f7ff through cyan #67e8f9 to violet #a78bfa) with a soft glow, so the structure looks like frost lit from within. Use an efficient approach (spawn walkers near the cluster radius, grid occupancy, many steps per frame) so growth is visibly lively. Modes: "Point seed" (radial frost), "Line seed" (frost growing up from the bottom like on a window) and "Snow" (6-fold symmetric growth). Interaction: click to add seed points; a stickiness slider (branch density); speed; palette (Ice / Coral / Gold filigree); pause; download. A subtle particle count and elapsed time in elegant monospace. Title in thin, widely spaced capitals.

Create "HYPERBRICK", a polished, playable Breakout-style arcade game with a synthwave aesthetic. A canvas playfield framed by an arcade bezel; background dark purple (#12002b) with a perspective grid horizon and a glowing sun. Bricks in glowing neon rows (#ff2e97, #ff9e00, #fff200, #00f5d4, #00bbf9, #9b5de5); a sleek neon capsule paddle; a ball that leaves a motion trail. Juicy feedback: bricks shatter into particles, screen shake on impact, a combo counter with pop text, paddle squash, flashes, and synthesized sound effects (Web Audio blips whose pitch rises with the combo; mute toggle). Power-ups drop from some bricks: multi-ball, wide paddle, laser, slow-mo. Five hand-designed levels (e.g. heart, invader, spiral) plus an endless mode. Controls: mouse/touch drag and arrow keys; Space to launch/pause. Screens: a title screen with an attract-mode demo, pause, and game over with a high score saved in localStorage. Typography: bold italic sans with neon glow for the HUD. Scales to phone screens with a portrait playfield.

Build "Galerie Nocturne", a walk-through virtual museum room in CSS 3D. A corridor with a polished marble floor (CSS gradients plus reflection), warm walls (#e9e2d6), soft ceiling spotlights casting pools of light, and eight framed paintings hung on the side walls. Each painting is an original generative artwork rendered on canvas and seeded so it is stable: a colour-field piece, a primary-colour grid, a geometric abstraction, a pointillist sunset, a flow field, an op-art piece, an ink landscape and a gold mosaic. Gilded or slim black frames with museum placards (title, fictional artist, year, medium). Navigation: arrow keys/WASD or on-screen buttons move the camera along the corridor with smooth easing; clicking a painting walks up to it and shows it frontally with a detail card; Escape steps back. A small floor-plan minimap shows your position. Typography: a museum-grade sans for placards and a classic serif for the title. On phones, fall back to a swipeable wall of the same framed works.

Design "Nonna Lucia's Lemon Ricotta Tart", a beautiful interactive recipe page. Mediterranean citrus palette: lemon #f7d44c, leaf green #5b8c51, terracotta #c65d3b, cream #fbf6ea, ink #2e2a24. Hero: a hand-drawn-style SVG illustration of the tart with lemons and leaves (wobbly line quality, flat colour fills, subtle paper texture), with lemon slices that rotate gently. Two columns on desktop (ingredients left, method right), one column on mobile. Features: a servings scaler (−/+) that recalculates every quantity with nice fractions (½, ¾) plus a metric/US toggle; an ingredient checklist with a satisfying strike-through animation; numbered steps that can be marked done, each with a built-in countdown timer where relevant (e.g. bake 35 min) showing ring progress and playing a gentle chime when finished (Web Audio); and a "cook mode" that enlarges the current step. Typography: warm serif headings ("Iowan Old Style", Palatino, "P052", Georgia, serif) with an italic, handwritten-flavoured style for notes such as "Nonna's tip". Include a short story intro and a print stylesheet (@media print).

Create "Midnight Window", rain on a window pane at night. Behind the glass, a canvas shows a blurred city bokeh scene (soft glowing circles in amber #ffb347, warm white, tail-light red #ff4b4b and teal signage #3fd0c9 on deep blue-black #0a0f1f), drifting slowly. On the glass: realistic raindrops — small static beads plus larger drops that grow, then slide down in wobbly paths leaving trails and merging with others; each drop refracts the background (render the background flipped and magnified inside the drop). Condensation fogs the glass; the user can wipe it clear with pointer or finger, and the cleared area slowly fogs back. Ambient layers: occasional distant lightning and rain sound synthesized with Web Audio (filtered noise plus droplet ticks) behind a "sound" toggle. A small caption in a light serif: "It's 00:47. The city is still awake." using the live local time. Controls: rain intensity slider and a city/forest background toggle (forest = green bokeh). Performance-minded.

Build "Infinite Coastline — Mandelbrot & Julia Explorer". A full-screen canvas rendering the Mandelbrot set with smooth (continuous) colouring and a choice of cyclic palettes: "Aurum" (black → deep blue → gold → white), "Abyss" (navy → cyan → white), "Magma" and "Pastel Dream". Render progressively (low-resolution preview, then refinement in chunks scheduled with requestAnimationFrame, optionally in a Web Worker created from an inline Blob) so the UI never freezes. Interaction: click/tap to zoom in on a point (animated); right-click or a button to zoom out; drag to pan; mouse-wheel zoom; and a live mini Julia-set window that follows the cursor showing the Julia set for the hovered c — press J to make it the main view. HUD: coordinates, zoom level and iteration count (rising automatically with zoom); bookmarks of famous locations (Seahorse Valley, Elephant Valley, a triple spiral, a mini-brot). Palette-cycling animation toggle. Download PNG. A sleek dark UI with thin gold typography.

Design "ATELIER NOIRE — Autumn/Winter Collection" (fictional), a high-fashion editorial lookbook. Palette: bone #efe9e1, blush #e8c4b8, oxblood #5a1a1d, black #0d0d0d. Typography is the star: an ultra-high-contrast Didone display stack (Didot, "Bodoni 72", "Bodoni MT", "C059", serif) set enormous and overlapping the imagery, mixed with tiny tracked sans labels. Since no photographs are allowed, each "look" is an abstract fashion illustration built from CSS/SVG — elongated silhouettes, draped fabric shapes with gradient folds, a hat brim, the geometry of a coat — elegant and minimal like fashion croquis. Layout: a horizontal-scroll gallery on desktop (the wheel drives horizontal movement) and vertical on mobile; asymmetric compositions with numbered looks ("LOOK 07"), material captions, and a giant word ("RESTRAINT") sliding in parallax behind. Interaction: hovering a look reveals a detail-zoom fabric swatch (procedural tweed, silk sheen, herringbone); a custom cursor becomes a thin ring labelled "VIEW"; a progress bar. Page-load intro: a curtain wipe.

Create "Selene — Tide & Moon Clock", a poetic instrument showing today's moon phase and a stylised tidal cycle. Compute the current moon phase from the date (synodic month ≈ 29.53059 days from the reference new moon of 2000-01-06 18:14 UTC) and render a large, photoreal-leaning moon on canvas with a correct terminator, craters and maria from procedural noise shading, and earthshine on the dark side. Below it, a flowing sea of layered animated SVG waves (navy #0b1d3a, #13315c, #1d4e89 with silver highlights #c9d6e3) whose level rises and falls with a simplified semi-diurnal tide model (two highs and two lows per ~24h50m, clearly labelled illustrative, not for navigation). A circular 24-hour dial around the moon marks tide highs/lows and the current time. Text: phase name, illumination %, days until the next full/new moon, and the next (illustrative) high tide. Interaction: a date scrubber travels ±30 days so you can watch the moon wax and wane; hovering the sea makes it sparkle; a calm night mode dims the UI. Typography: a light, elegant serif with small caps.

Build "Vitrail — Stained Glass Generator". A tall Gothic lancet window (pointed-arch SVG clipPath) filled with a Voronoi tessellation computed in JavaScript (half-plane clipping is fine), where each cell is a pane of jewel-toned glass — ruby #9b111e, sapphire #0f52ba, emerald #046307, amber #ffbf00, amethyst #9966cc — with subtle internal texture (noise, bubbles, streaks) and thick dark lead came lines (#1a1a1a with a slight highlight). Light pours through: the glass glows and coloured light patches are cast, blurred, onto a stone floor below, shifting as a "sun angle" slider moves. Interaction: click inside the window to add a cell (it splits smoothly); drag cell sites to watch the leading reflow; a "Rose window" mode switches to a circular window with radially symmetric cells; palettes (Chartres blues, Sunset, Modern pastel). The surrounding stone tracery is drawn in SVG with carved shading. Typography: a classical inscriptional serif with an illuminated initial letter drawn in SVG.

Design "Tend — A Habit Garden", an elegant habit tracker in which every habit is a plant that grows with its streak. Soft sage palette: #f4f6f0 background, sage #9cb59a, deep green #2f4f3a, clay #d98e73, sun yellow #f2c14e. A header with today's date and a greeting based on the time of day. Each habit card holds a small SVG plant whose growth stage (seed → sprout → leaves → bud → bloom) reflects the current streak, a "done today" button with a satisfying bloom/particle animation, the streak count, and a 12-week contribution-style heatmap in greens (hover shows the date). Add, edit and delete habits in a modal (name, an icon from a set of SVG glyphs, colour). All data persists in localStorage; on first run, prefill three example habits with generated history so the page feels alive. A stats view shows a completion-rate ring chart and best streaks. Typography: a friendly humanist sans with rounded numerals. Micro-interactions: plants sway slightly; a watering-can cursor over the done button. Fully keyboard accessible and responsive.

Create "Vast — A Scroll Across the Solar System", a horizontally scrolling journey through the solar system at true relative scale: once the Sun's width is chosen (e.g. ~600px), every distance and diameter follows from real mean values, so Earth is a few pixels across and Neptune lies an enormous scroll away. Vertical wheel/scroll maps to horizontal travel; touch swipes work; a fast-travel control jumps between planets; and a "speed of light" button auto-travels at light speed relative to the scale (Earth arrives after ~8 min 20 s — show a real-time counter). Pure black background (#000) with very minimal white type; planets rendered as small canvas spheres with subtle banding and atmospheric shading. While crossing the emptiness, poetic and factual messages appear in the void ("Most of space is this.") and an odometer shows kilometres travelled and light-time. Typography: thin sans with generous letter-spacing. Keep all facts well established (mean distances in km, diameters).

Build "Squishy — Claymorphism UI Kit" (a fictional product), a playful landing page in claymorphism: puffy, soft 3D shapes made with layered inner/outer shadows and radial gradients so elements look like modelling clay. Candy-pastel palette: bubblegum #ffb3c6, butter #ffe5a5, mint #b8f2e6, periwinkle #aab7ff, peach #ffcfb0 on a cream-lilac background (#f7f1ff). Hero: a cluster of 3D clay icons (heart, cloud, star, chat bubble, toggle switch, rocket) built purely with CSS/SVG that bob and wiggle; clicking one makes it squash and stretch with elastic physics and burst into little clay confetti. Sections: a component showcase (clay buttons with pressed states, toggles, sliders, a progress bar that fills with a jelly wobble), feature cards, a pricing section with a squishy toggle, and an FAQ accordion whose panels open with bouncy height animations. Typography: a chunky rounded sans (Nunito, "Varela Round", "SF Pro Rounded", "Segoe UI", system-ui, sans-serif) at heavy weights. Every interactive element should feel tactile.

Create "Riso Lab — Halftone Print Studio", a tool that turns procedural artwork into a two- or three-colour risograph print simulation. The source image is generated in-page, chosen from: a gradient sphere, a sunset landscape, a big typographic word the user types, a geometric face made of shapes, or a doodle drawn on a small canvas. The output renders colour separations as halftone dot screens at classic angles (e.g. 15°, 45°, 75°) in fluorescent pink #ff48b0, medium blue #0078bf, yellow #ffe800 and black, printed on off-white paper (#f4efe2) with multiply blending, slight misregistration, ink-density variation and paper grain. Controls: dot size/LPI, per-ink screen angle, misregistration amount, ink colours, dot shape (circle, line, square) and PNG download. Each ink has a small "drum" control that toggles its layer with a satisfying roller animation. Layout: a clean studio UI in white and black with tiny monospace labels, the print displayed like a poster pinned up with tape.

Design "Loading, Beautifully — a Gallery of 16 Loaders & Micro-interactions". A refined grid gallery (4×4 on desktop, two columns on mobile) on warm charcoal (#141414) where each card is a small stage demonstrating an original loading animation or micro-interaction made with CSS/SVG (JS only for toggling): e.g. a morphing blob, orbiting dots with trails, a pen stroke drawing a checkmark, a liquid-fill progress, folding squares, a breathing ring, a DNA ladder, a typewriter ellipsis, a pendulum, a gradient spinner with a comet tail, a pixel wave, a page flip, an elastic heart-like burst, a day/night toggle switch morph, a download button that morphs into a progress ring and then a success tick, and a skeleton-shimmer card. Each card has a title, a "replay" button and a "copy CSS" button that copies that card's CSS to the clipboard with a toast. Harmonised muted accents (#e07a5f, #f2cc8f, #81b29a, #3d405b, #f4f1de). Typography: a crisp sans with monospace labels.

Create "Hytte — A Winter Cabin", a cosy interactive scene: the interior of a log cabin at night, illustrated in SVG/CSS with warm wood tones (#7a4a2a, #a0673c). A stone fireplace with an animated fire (layered flame shapes with flicker plus canvas embers rising); a large window onto a snowy spruce forest with falling snow at several depths and a green-violet aurora (#4dffb4 → #8a5cff) rippling in the sky; a steaming mug on the sill; a reading lamp; and a sleeping cat that breathes. Warm vs cold light: the firelight flicker subtly modulates the room's lighting. Interaction: click the lamp to toggle it (room lighting changes); click the fireplace to add a log (the fire flares, more embers); click the window to open it (cold wind — snow blows inside briefly and the fire dims); click the cat to make its ear twitch; an optional ambient sound toggle (synthesized fire crackle and wind). A title placard in a Scandinavian-style serif. The composition adapts to portrait screens (window above, fireplace below).

Build "Helix — The Double Helix Explained", an educational, beautiful interactive visualization. Centre: a rotating B-DNA double helix drawn on canvas with 3D projection — two sugar-phosphate backbones as glossy ribbons (#2ec4b6 and #e71d36 with depth shading) and base pairs as rungs coloured by nucleotide (A #ff9f1c, T #ffbf69, G #6a4c93, C #8ac926), with correct pairing (A–T, G–C), ~10.5 base pairs per turn, and depth fading for the back strands. A clean biotech palette on off-white (#f7f9fb) with a dark-mode toggle. A side panel with annotations and leader lines (major/minor groove; hydrogen bonds: 2 for A–T, 3 for G–C; 5'→3' direction), a sequence input where typing A/T/G/C rebuilds the helix live (auto-generating the complementary strand), and an "Unzip" button that animates replication — the strands separate and new complementary nucleotides float in. Interaction: drag to rotate, scroll to zoom, hover a base pair to highlight and label it. Typography: a modern sans with a monospace sequence display.

Create "Arcana Nocturne — A Three-Card Reading". A midnight-purple ground (#140a24) with drifting star dust and a velvet tablecloth texture; gold-foil (#d4af37 → #f7e7a1) and moonlight-silver accents. A deck of the 22 Major Arcana, each face designed procedurally in SVG with an original geometric/esoteric motif (e.g. The Moon: crescents and a path between two towers; The Star: eight-pointed stars above water; The Tower: lightning-struck tower geometry), framed with an ornate gold border, a Roman numeral and the title in engraved serif capitals. The back: an intricate symmetric pattern around a central sun/eye. Interaction: "Shuffle" animates the deck riffling; the user fans the deck and picks three cards (Past, Present, Future), which fly to their positions and flip in 3D with a glint; each revealed card shows an evocative, original short interpretation (framed as entertainment). Cards tilt with a shimmer on hover. Optional reversed cards. Typography: serif small caps with generous letter-spacing; body text in an italic serif.

Build "ELASTIC — Letterforms on Springs", an experimental typography playground. A giant word (default "BOUNCE", editable via an input) is converted into points sampled from its glyphs (draw the text on an offscreen canvas and sample filled pixels); each point is tied to its home position by a spring. Render the points as connected dots/filaments forming the letters. The pointer repels (or attracts — toggle) points with a force field; releasing lets them spring back with overshoot and jiggle. Click to explode the word into particles that reassemble. Palette: hot magenta #ff2e88 on deep ink #111018, with cyan #29e7cd on fast-moving points (velocity-coloured). Modes: dots; lines (connecting nearby neighbours); threads (points tied to home with visible springs). Sliders: stiffness, damping, force radius. UI typography in small monospace; the display lettering is generated from the heavy system sans. Responsive: sampling density adapts to screen size for performance.

Create "Dune Engine — Falling Sand Sandbox", a cellular-automaton physics toy. A pixel-art canvas (each cell 3–4px) with elements: Sand (warm variations #e6c07b, #d8a95b), Water (#3d7ee0 with shimmer, flows sideways), Stone (static greys), Fire (flickers, rises, burns wood, turns water to steam), Wood (#8b5a2b), Steam (rises and condenses back into water), Oil (floats on water, highly flammable), Lava (turns sand into glass), and Plant (grows into water). Correct density-based interactions (sand sinks in water, oil floats). Desert-dusk UI palette: sand #f3e3c3, terracotta #c1440e, deep dusk blue #1f2a44. An element picker as a row of textured swatches with icons, brush-size slider, pause, clear, and "Scenes" (hourglass, volcano, oasis). Pointer/touch painting interpolated along the stroke. A tiny monospace readout of particle count and fps. Efficient: typed arrays, bottom-up updates with alternating direction, ImageData rendering.

Design "Casa Lumen — Architectural Blueprint", an animated technical drawing of a fictional modernist house. Blueprint blue (#0b3d91 to #134a9e with a fine grid of lighter lines) with white/cyan line work (#e8f1ff, #9fd3ff). The plan draws itself on load: walls first (thick lines with hatched cuts), then doors with swing arcs, windows, stairs, furniture outlines, dimension lines with arrowheads and measurements, room labels, a north arrow, and a title block in the corner (project name, scale 1:100, sheet A-101, drawn by). Use staggered SVG stroke-dashoffset animations, like a hand drafting. Interaction: hovering a room fills it with translucent cyan and shows its area (m²) in a floating label; switch between "Floor plan", "Elevation" (south façade) and "Section" views with a cross-drawing transition; a "Pencil mode" switch re-renders the drawing as graphite on paper (#f5f3ee paper, #333 pencil). Typography: technical lettering (monospace/architectural sans stack, uppercase).

Build "Hi-Fi Walnut — Vinyl Listening Room", a luxury music player. A photoreal-leaning turntable in CSS/SVG: a walnut plinth (#5c3d2e, wood grain from layered gradients), a brushed-aluminium platter, a black record with realistic grooves (repeating radial gradients) and specular light arcs that stay fixed while the record spins, a centre label designed per album, and a tonearm that swings onto the record when playing. Music: three original "albums" synthesized with Web Audio — ambient generative pieces (e.g. Rhodes-like FM chords under a slow melody, with soft vinyl-crackle noise), each with a distinct mood. The UI panel: generative CSS album art, track title, animated progress, play/pause, next, a volume knob, and a pair of VU meters whose needles respond to the audio (AnalyserNode). Palette: walnut, brass #c9a227, cream #efe6d8 and a deep green felt background #1f3b2d. Typography: elegant serif album titles with small caps. Changing albums triggers a record-swap animation.

Design "RADICAL SHAPES — Milano Design Fest '86" (fictional), a Memphis-Group-inspired event landing page. Palette: black #111, pink #ff90b3, turquoise #2ec4b6, yellow #ffd23f, lilac #b388eb, red #ef476f on white, with terrazzo/confetti patterns and squiggle backgrounds (SVG patterns). The composition is bold, playful and asymmetric: geometric objects (cylinders, zigzags, dotted triangles, half-moons) float and rotate slowly around the hero title. Typography: chunky geometric sans headlines, bold outlines and two-colour offset text shadows. Sections: a countdown to the fictional opening with flip digits; a lineup of fictional designers on cards with patterned headers; a schedule timeline; a venue map made of playful illustrated blocks; and ticket tiers. Interaction: shapes bounce away from the cursor; clicking the hero spawns new random Memphis shapes with a pop; cards wobble on hover; a pattern-shuffler button changes every background pattern. Keep chaos from overwhelming readability: a strong grid underneath.

Create "Karesansui — A Zen Sand Garden": a top-down view of a raked gravel garden on canvas with fine sand texture (#e8e0cf with grain noise and subtle lighting), a few natural stones (procedurally shaped and shaded, with moss patches #6b7d4b) and a wooden border frame (#5b3f2a). Dragging with the rake carves parallel grooves (4–5 tines) that follow your path, with realistic light and shadow on the ridges; the ripple tool draws concentric rings around a stone on click. Tools in a minimal vertical bar: rake, ripple, place stone, smooth (softly erases grooves), and "return to calm" (animated smoothing). Ambient touches: a maple leaf occasionally drifts across and settles; soft shadows move slowly as if the sun were passing; an optional distant wind chime (Web Audio, after a gesture). Typography: small, elegant serif captions and a vertically set title. Touch on mobile is first-class.

Build "QUANTA Terminal", a dark, premium trading dashboard with clearly fictional tickers and simulated data (labelled "Simulated market"). Near-black ground (#0b0e11), panel surfaces #12161c, gains emerald #16c784, losses crimson #ea3943, gold accent #f0b90b, hairline borders. Layout: a scrolling ticker tape at the top; a main candlestick chart (canvas) with volume bars, moving averages, a crosshair with OHLC tooltip, time-range tabs and smooth panning/zooming; a live order book with depth bars that flicker as orders update; a recent-trades feed; a watchlist with sparklines; a portfolio allocation donut; and a buy/sell ticket with validation and a confirmation toast. Data evolves in real time via a random walk with volatility clustering. Typography: tabular numerals, a clean sans, monospace for prices; prices flash green/red on change. Responsive: panels reflow into tabs on mobile. Smooth and crisp at high DPI.

Create "Dusk Meadow — Fireflies", a tranquil canvas scene. A meadow at dusk: a sky gradient from deep indigo (#141b41) to a very soft dusty rose at the horizon (#e8a0a0), layered silhouettes of rolling hills and a treeline in near-black greens (#0b1a12), and a foreground of hundreds of grass blades swaying in a noise-driven wind field and bending away from the pointer. About 120 fireflies wander with boids-like motion, each blinking on its own rhythm in warm yellow-green (#e8ff8a) with bloom, and slowly synchronising their flashes over time (Kuramoto-style coupling) — a quiet emergent delight. The pointer is a gentle lantern: fireflies drift toward it when it is held still and scatter when it moves fast. A crescent moon rises slowly and stars appear as the sky darkens. Minimal controls at the bottom-left that fade when idle: sync strength, wind, and sound (synthesized crickets). Title in a delicate italic serif.

Build "GROOVY — Lava Lamp", a 1970s lava lamp rendered with real metaball physics. A classic lamp silhouette (chrome/gold base and cap drawn in SVG with metallic gradients) centred on warm retro wallpaper (repeating SVG pattern of orange/brown circles, #f4a259, #bc4b51, #5b8e7d on #f4e1c1). Inside the glass, wax blobs heated at the bottom rise, cool and sink, merging and splitting (metaball field computed on a low-resolution grid with smooth thresholded edges, glossy highlights and inner glow). Colour combinations: "Classic" (red wax in yellow liquid), "Purple Haze" (magenta in blue), "Lime" (green in violet) and "Ocean". Interaction: click the lamp's switch to turn it on/off (the light fades, the wax slows and settles); a temperature knob; a colour-combo switch; the pointer heats the glass locally. The whole room's glow is tinted by the lamp colour. Typography: a groovy rounded bold display with an outline shadow.

Design "Skyward — A Brief History of Flight", an interactive horizontal timeline. Sky palette: dawn blue #bde0fe, cerulean #3a86ff, cloud white, sunset accent #ff8fab, ink #1d3557. A long drag-scrollable (and wheel/keyboard) timeline from 1783 to 1969 with well-established milestones: 1783 first crewed hot-air balloon flight (Montgolfier brothers' balloon); 1853 Cayley's crewed glider; 1891 Lilienthal's gliders; 1903 the Wright Flyer at Kitty Hawk (12 seconds, 120 feet); 1909 Blériot crosses the English Channel; 1919 Alcock and Brown make the first non-stop transatlantic flight; 1927 Lindbergh's solo transatlantic flight; 1932 Amelia Earhart's solo transatlantic flight; 1939 first jet-powered flight (Heinkel He 178); 1947 Chuck Yeager breaks the sound barrier in the Bell X-1; 1957 Sputnik 1; 1961 Yuri Gagarin orbits Earth; 1969 Apollo 11 lands on the Moon. Each milestone has an elegant SVG line illustration of the craft, its date and a short caption. Parallax clouds at several depths; a small paper plane travels along the timeline. Clicking a milestone expands its card. A progress altimeter shows the year. Typography: an aviation-inspired sans with serif captions.

Build "Fridge Verse — Magnetic Poetry", a tactile word-magnet toy. A large enamel fridge door (subtle vertical gradient #eef0f2 with faint metallic noise and a chrome handle at the side) holding about 120 word magnets: small white tiles (#fffdf7) with a slight drop shadow and a serif word, each rotated slightly at random, a few coloured (pale pink, mint, butter) for flair. Choose a vocabulary (nouns, verbs, adjectives, suffixes -s, -ing, -ed) that makes poetic combinations likely. Dragging a magnet gives a pleasing lift (shadow grows, slight rotation) and a snap back onto the door; magnets may overlap. Features: a "Shake" button that scatters magnets with physics; theme packs (Love, Ocean, Space, Kitchen); a poem detector that reads tiles arranged in lines left to right and shows the current poem in a small card you can copy; a few decorative fridge items (a drawn polaroid picture, a fruit magnet). Persist positions in localStorage. Typography: classic serif tiles with a rounded sans for the UI.

Create "Patchwork — A Generative Quilt". Every visit (and every click on "Stitch a new quilt") generates a unique quilt made from traditional blocks — Log Cabin, Flying Geese, Half-Square Triangles, Nine Patch, Pinwheel, Churn Dash, Ohio Star — laid out on a grid with sashing and borders. Fabrics are procedural SVG patterns: gingham, calico florals (tiny flower motifs), polka dots, stripes and chambray, in warm cottage palettes (e.g. barn red #9e2a2b, mustard #e09f3e, denim #335c67, cream #fff3b0, sage #9fb8ad). Visible dashed stitching, slight puffy shading on each patch (quilted look via inner shadows) and a wavy binding edge. Interaction: hovering a block lifts it slightly and shows its pattern name; clicking cycles its pattern; a palette chooser (Farmhouse, Indigo, Sunset, Scandinavian); a "drape" toggle shows the quilt hanging on a line, waving gently in the wind. Download PNG. Typography: a warm serif with an embroidery-like dashed underline.

Build "Planet Forge — Procedural World Generator". A canvas renders a rotating sphere with per-pixel shading (ray–sphere intersection or a pre-baked equirectangular texture sampled by rotation): terrain from fractal noise mapped to biomes (deep ocean, shallows, beaches, forests, deserts, mountains, ice caps by latitude), an animated cloud layer, an atmospheric rim glow, a day/night terminator with city lights on the night side, and optional rings casting a shadow. A cosmic black background with a faint nebula and stars. A sci-fi control panel (thin lines, cyan #4cc9f0 accents, glass panels) with sliders for sea level, temperature, cloud cover, terrain roughness, ring toggle, moon count, rotation speed and seed, plus presets (Earthlike, Desert world, Ocean world, Lava world, Ice world, banded Gas giant). Each planet receives a catalogue designation (e.g. "KX-4471 b") and playful stats. Interaction: drag to rotate, "Randomize", PNG download. Keep rendering efficient (render at lower resolution and upscale smoothly).

Create "ASCII TIDES", an animated ocean scene made entirely of monospace characters rendered into a <pre> or a canvas character grid. Characters map to wave height and foam (e.g. " .,:;~=≈*#@"). Layers: a sky with slowly drifting ASCII clouds and a sun or moon made of characters, a horizon, rolling swells (sum of sines plus noise), foam crests, and a small character-built boat bobbing on the surface. Palette: amber phosphor #ffb000 on #140c00 by default, switchable to "Seafoam" (#7fffd4 on #001414) and "Paper" (ink #222 on #f2ecdc). Pointer/touch disturbances create ripples that propagate across the water (2D wave equation on the grid). A time-of-day slider changes the sky (stars at night). Typography: a monospace stack with tight line-height; the grid adapts to the viewport to keep characters crisp. A tiny caption in the corner inside an ASCII box-drawing frame. Smooth at 30–60fps with efficient string building.

Design a bento-grid portfolio for "Mira Okafor — Product Designer" (fictional). Neutral palette: #f5f5f7 page, #ffffff tiles, #1d1d1f text, one vivid lime accent #c3f53c and a deep indigo feature tile #1b1f3b. A responsive bento grid of 10–12 tiles of varied sizes with 24px radii and delicate shadows: an intro tile with name and role; a local-time tile with a live analog clock; a "Now playing" tile with an animated equalizer; a project tile containing a mini animated UI mockup (a CSS-drawn phone screen scrolling); a stats tile with counting numbers; a location tile with a stylised abstract SVG map and a pulsing pin; a tools tile with floating chips; a testimonial tile; a "Currently reading" tile with a CSS book; a contact tile with a magnetic button; and a dark tile with a generative gradient mesh. Interaction: tiles lift and reveal extra detail on hover; a cursor spotlight glides across tile surfaces; clicking a project tile expands it into a full-screen case-study overlay with a smooth shared-element transition. Typography: a system sans with tight tracking.

Build "Apiary — The Honeycomb", an interactive hexagonal-grid artwork. The screen fills with hexagonal cells (canvas or SVG) in honey tones — amber #f6a821, gold #ffc93c, deep honey #c77d0a, wax #fff1c1 — with dark comb gaps (#2a1a05). Cells have a subtle inner bevel and translucency: some are filled with glowing honey (animated fill level with a meniscus shine), others are empty wax, a few are capped. Hovering sends a spreading ripple of brightness through neighbouring cells (delayed by hex distance). A handful of bees (small creatures with blurred beating wings) fly figure-eight "waggle dance" paths and visit cells, filling them over time. Interaction: click a cell to fill it with honey (drip animation); drag across cells to paint; a "Harvest" button drains the cells with a flowing animation into a jar counter; the grid regenerates on resize. A side panel explains the waggle dance in two short, accurate sentences. Typography: a warm serif title with small-caps labels.

Create "Grandmaster's Study", an elegant, playable two-player chess board (local hot-seat). A luxurious board of maple (#e8d0aa) and walnut (#8a5a3b) squares with subtle wood-grain gradients, a lacquered frame with brass corner fittings, and file/rank coordinates engraved in serif. Pieces drawn in SVG as original Staunton-inspired silhouettes — ivory (#f7f0e1, warm shading) and ebony (#1e1b18, soft highlights). Full legal chess rules: legal move generation with check detection, castling, en passant, promotion (with a chooser), and checkmate/stalemate detection. UX: click or drag pieces; legal moves shown as subtle dots/rings; last move highlighted; check shown as a red glow on the king; a move list in algebraic notation in a side panel styled like a score sheet; a captured-pieces tray; undo; flip board; new game. Smooth gliding piece animations and a soft synthesized "clack" on each move (toggle). Responsive: the board fits the width on phones with the panel below. Typography: a classic serif.

Build "Chroma — Color Palette Studio", an elegant tool for generating harmonious palettes. A clean white UI (#ffffff, #f4f4f5 panels, #18181b text). The main view is five tall colour columns filling the screen (horizontal bands on mobile); each shows hex, RGB, HSL and a name (nearest match from a curated list of ~150 named colours) and has lock, copy and adjust controls. Space (or a button) generates a new palette that respects locked colours using harmony rules — analogous, complementary, split-complementary, triadic, tetradic, monochromatic — computed in OKLCH for perceptual evenness (implement the conversion). Extra panels: a WCAG AA/AAA contrast checker for text on each colour; a live preview card (a mini UI mockup) using the palette; a gradient preview; and export (CSS variables, JSON) copied to the clipboard. Interaction: drag columns to reorder, click a hex to edit it, and a colour-wheel diagram showing the harmony geometry with draggable points. Smooth colour transitions. Typography: a crisp sans plus monospace.

Create "Somewhere Inside", a double-exposure art piece: a large human profile silhouette (a smooth SVG path of a face in profile with shoulders) acts as a mask revealing a whole landscape inside it — layered mountain ranges, a pine forest, a lake reflecting the moon, drifting fog and birds — while outside the silhouette is a pale misty gradient. Palette: a dusk gradient inside (#1d2b53 → #7e2553 → #ff9e7d), mist outside (#f2efe9 → #d9d4cc), ink details. The inner landscape moves in subtle parallax with the pointer (and slowly on its own), fog layers drift, and the moon's reflection shimmers. Original poetic text fragments fade in and out beside the profile in an elegant italic serif. Interaction: pointer parallax; clicking cycles the inner landscape between "Mountains", "Ocean" (waves and a lighthouse) and "City" (skyline with lights), each with its own palette and a smooth cross-fade. A film-grain overlay. The composition reflows for mobile, with the silhouette scaled and centred.

Build "Silicon — Living Circuit Board". An SVG printed circuit board in rich green solder mask (#0a4d2e with subtle texture) with gold traces and pads (#d4a537 with highlights), white silkscreen labels (component references such as U1, R12, C4, "REV 2.1"), chips (black epoxy with pin legs and printed markings), capacitors, resistors with colour bands, LEDs and a crystal oscillator. Signals — glowing pulses of cyan (#3cf2ff) and warm white light — travel along traces from chip to chip, routed along a graph of trace segments. Interaction: hovering a component highlights all of its connected traces and shows a spec tooltip; a "power" switch boots the board (LEDs light in sequence, a small OLED component shows boot text); clicking a chip "overclocks" it (faster pulses, a slight heat shimmer); a "logic probe" cursor mode shows voltage readings on traces. A title block in silkscreen monospace in the corner. Scales responsively via viewBox.

Create "Iridescence — Soap Bubbles". A soft, bright sky (#dbeafe → #fef3f2 gradient with faint drifting clouds). Bubbles of varied sizes float upward and drift on a gentle wind, wobbling as their shape oscillates; each is rendered with thin-film interference colours — swirling bands of magenta, gold, cyan and green on a mostly transparent sphere — plus a bright window-shaped specular highlight and a smaller secondary one, with the swirl animating over time (canvas gradients and noise-driven hue shifts). Bubbles collide softly. Interaction: clicking/tapping a bubble pops it — it bursts into a ring of tiny droplets and a quick shimmering film fragment, with a soft "pop" (Web Audio, after the first gesture); dragging blows a new bubble from a wand (it grows with drag distance and detaches on release); wind direction follows pointer movement. A tiny, elegant "bubbles popped" counter. Typography: an airy light sans title that is itself slightly iridescent.

Build "Brush & Ink — Calligraphy Pad". A sheet of rice paper (#f5f0e1 with visible fibres and an optional faint grid of practice squares) on a dark wood desk (#2b1d14), with an inkstone and a brush illustrated at the side. Drawing produces convincing brush strokes: width responds to speed (slow = thick, fast = thin) and to pointer pressure when available; ink runs out over a long stroke, producing dry-brush "flying white" texture; stroke ends taper; ink bleeds slightly into the paper (a subtle blurred halo). Ink colours: sumi black, diluted grey and vermillion. Tools: brush size, ink wetness, undo, clear (the paper slides away and a fresh sheet slides in), a red seal stamp you can place (SVG seal with generated square characters), and PNG download. Include a "trace" mode that shows faint model strokes of a simple character (e.g. 永) to practise over. Typography: small, elegant serif labels with vertical-text accents.

Create "ARES VII Mission Control", a dashboard for a fictional crewed Mars mission with clearly simulated telemetry. Aesthetic: "NASA-punk" — dark slate panels (#0e1116), safety orange #ff6b1a, off-white #e8e6e3, amber warnings #ffb000, cyan data #4ee1ff, thin grid lines, rounded-rectangle panels with corner brackets and tiny monospace labels. Panels: a mission elapsed time (MET) counter and a countdown to orbit insertion; a trajectory diagram (SVG Hohmann transfer between Earth and Mars with the spacecraft moving along it); live telemetry charts (cabin O₂, CO₂ ppm, power, velocity) as smoothly scrolling line charts; crew status cards with heart-rate waveforms; a comms log whose messages arrive after a one-way light-time delay; a subsystem status grid with nominal/caution/warning lights; and an animated spacecraft schematic. Interaction: click subsystems for detail; an "acknowledge" button when a random caution appears (flashing, with a Web Audio beep after a gesture); a toggle between Earth time and Mars sol time. A responsive grid that collapses gracefully.

Build "The Glass Alibi", a short interactive film-noir detective story (original, about six scenes with branching choices and two or three endings). Black-and-white visuals with dramatic chiaroscuro: venetian-blind shadow bands sweeping across the scene, rain streaking the window (canvas), a flickering desk lamp, a steaming coffee cup, film grain and vignette overlays, and occasional old-film frame jitter. Scenes are illustrated with SVG silhouettes (office, rainy alley, jazz club, pier) in greys, with a single accent colour reserved for the key clue (a red lipstick mark #b3001b). Narration and dialogue appear with a typewriter effect in a period serif; choices are presented as typed index cards. Include an ambient sound toggle (synthesized rain and a low, jazzy bass line). Features: a case-file notebook that collects clues, iris-wipe scene transitions, and restart. Typography: a Courier-like monospace for notes and a condensed serif for titles.

Create "Four Seasons — A Fractal Tree", a generative tree swaying in the wind whose appearance follows a seasons slider. Trunk and branches are grown recursively (randomised angles, tapering widths, gentle curvature) and drawn on canvas with bark colouring; noise-driven wind bends branches in proportion to their depth. Seasons: Spring (pale blossoms #ffc8dd and fresh green buds), Summer (a lush green canopy #52b788 with dappled light), Autumn (leaves turning #e76f51, #f4a261, #e9c46a and falling with tumbling physics to pile on the ground) and Winter (bare branches, snow accumulating on limbs, snowfall). Sky and ground transition smoothly with the season. Interaction: drag the slider (or press "Play the year" for a 60-second cycle); click the tree to shake it (leaves or snow fall); "New seed" grows a new tree with a growth animation. Typography: a gentle serif title with month names around a small circular season dial.

Build "Pulsar Ridges", an animated, original piece in the spirit of classic stacked ridge-line plots. Black background (#000) with ~60 stacked white lines (#f5f5f5) drawn on canvas with occlusion (each line filled black beneath so nearer lines hide farther ones); each profile comes from layered noise plus a central peak region and animates continuously, so the ridges roll like a landscape of signals. Interaction: the pointer position becomes the source of the peaks (ridges swell toward the cursor); clicking switches data modes: "Pulsar" (sharp central peaks), "Terrain" (mountain noise), "Audio" (a built-in synthesized drone analysed with an AnalyserNode drives the lines, after a gesture) and "Heartbeat" (ECG-like spikes). Settings: line count, amplitude, speed, colour mode (white, amber, spectrum gradient). Minimal typography: a small, uppercase, widely tracked monospace caption at the bottom like an album credit. PNG download. Perfectly crisp on high-DPI screens.

Create "Luminote — Piano with Falling Lights". A full-width three-octave piano keyboard along the bottom (glossy black and ivory keys with realistic depth and pressed states), playable by mouse/touch (multi-touch) and computer keyboard (two rows mapped). Above it, a dark stage (#0a0a12) where notes fall toward the keys like a rhythm-game visualizer: glowing rounded bars coloured by pitch (a soft chromatic rainbow), with sparks and a light burst when they land. Sound: a pleasant piano-like tone synthesized with Web Audio (several detuned harmonics, fast attack, exponential decay, and reverb from a convolver with a generated noise impulse). Modes: "Free play" — played notes rise as light trails; "Listen" — auto-plays public-domain melodies (Ode to Joy, the opening of Für Elise, Twinkle Twinkle Little Star, the opening of Gymnopédie No. 1) with falling notes; "Learn" — the song waits for you to press the right key. Tempo slider and a note-name toggle. Typography: a refined sans with small caps.

Design "SIGNAL/NOISE", the portfolio of a fictional glitch artist, "k.oshiro". Stark black #000 and white #fff with RGB channel accents (#ff0040, #00ff9f, #0070ff). The page is intentionally corrupted but controlled: a headline with RGB split and horizontal slice displacement that re-randomises periodically; project thumbnails that are generative canvases (pixel-sorted gradients, datamosh-like block smears, scanline interference) and glitch harder on hover; CRT scanlines and occasional full-screen tear events; a scrolling "corrupted" hex-dump sidebar. Sections: a works grid (eight generative pieces with titles and years), an about text in monospace that types itself with random character corruption resolving into readable text, an exhibitions list and contact. Interaction: hovering intensifies the glitch; clicking a work opens it full-screen with a "corruption" slider; a "stabilize" toggle calms every effect (and prefers-reduced-motion defaults to stable). Typography: monospace and a heavy grotesk. Despite the chaos, it stays navigable and legible.

Create a product page for "Rosée — Eau de Parfum" by a fictional maison. Palette: blush #f4d6d0, rose gold #b76e79 → #e8b4a0, cream #fff8f3, deep plum text #3b1f2b. Hero: a tall faceted glass bottle drawn in SVG with realistic refraction highlights and a gold cap, holding pink liquid whose surface sloshes in a gentle wave and responds to pointer tilt (the liquid level tilts against the pointer). Rose petals (gradient SVG shapes) drift down the page with a 3D flutter, staying clear of the text column. Sections: the fragrance pyramid (top/heart/base notes) as an elegant layered triangle where each note appears on hover with a small botanical line illustration; "The Story" editorial paragraph; a size selector (30/50/100 ml) that resizes the bottle smoothly and updates the price; and a luxurious "Add to bag" button with a shimmering sweep. Typography: a refined high-contrast serif with wide-tracked sans captions.

Build "Connected — A Dot-Matrix Globe". A rotating 3D globe rendered on canvas as a sphere of evenly spaced dots (Fibonacci sphere), with bright land dots and faint ocean dots — land determined from an embedded low-resolution land mask (a compact hand-encoded bitmap, e.g. a 72×36 character grid of the continents). Palette: midnight background #050a18, ocean dots #1b2a4a, land dots #5ad1e6 → #a6fff2, arcs in coral #ff6f61 and gold #ffd166. Animated great-circle arcs travel between about fifteen major world cities placed at their real latitude/longitude (London, New York, Tokyo, São Paulo, Lagos, Sydney, Mumbai, Cairo…), each with a glowing head, a fading tail and a pulsing ring on arrival. An atmospheric glow halos the globe. Interaction: drag to rotate with inertia; hover a city dot for its name; click a city to fly the globe round to face it; auto-rotation resumes after idle. A side panel with clearly simulated stats ("connections per second"). Typography: a clean geometric sans.

Create "Crystalline — No Two Alike", a procedural snowflake generator. Each snowflake grows with 6-fold (dihedral) symmetry using a branching algorithm — main arms with side dendrites, plates and needles that vary with "temperature" and "humidity" parameters, loosely echoing the Nakaya diagram. Rendered in SVG/canvas as translucent ice with inner facets, edge highlights and a faint glow on a deep winter-blue background (#0c1b33 → #1c3a5e). The hero shows one large flake slowly rotating; below it, a gallery of smaller generated flakes. Background: gentle snowfall of micro-flakes with depth blur. Interaction: "Grow a snowflake" animates growth outward from a hexagonal seed; temperature and humidity sliders show how the form changes (plates at some settings, dendrites at others — keep the explanation light and approximate); clicking a gallery flake enlarges it; each flake gets a catalogue number and date; download as SVG. Typography: a thin, wide-tracked sans with a delicate serif italic.

Design "Maison Lierre — Botanical Teas, Paris 1899" (a fictional tea house) as an Art Nouveau poster page in the spirit of the era's great poster artists (original artwork, nothing copied). Palette: muted sage #a3b18a, olive #588157, antique gold #c9a227, terracotta #bc6c25, cream #fefae0, deep teal #264653. The page is framed by an ornate SVG border of whiplash curves, stylised lilies and ivy that draw themselves on load and sway gently; a circular halo motif with radiating mosaic sits behind the title; flowing, organic panels hold the content (the house's story, three signature blends, an afternoon-tea menu, a contact card). Decorative initials and dividers. Typography: a serif stack plus custom SVG-drawn title lettering with curved terminals. Interaction: hovering a blend grows vines around its card; a subtle gold sparkle on the halo; a toggle between "Day" (cream) and "Salon" (deep teal with glowing gold lines). Graceful responsiveness: the border simplifies on phones.

Build "Rule 30 — Tapestries of Elementary Cellular Automata". Explore all 256 Wolfram elementary cellular-automaton rules rendered as woven textiles: each cell is a small woven block with warp/weft shading, so Rule 30's chaos, Rule 90's Sierpiński triangles and Rule 110's structures read as jacquard fabric. Palette sets: "Kilim" (madder red #a4161a, indigo #1b263b, saffron #f4a300, cream #f1e9da), "Monochrome linen" and "Neon loom". The rule is displayed as its eight neighbourhood patterns → output, each clickable to toggle a bit, building a custom rule number live. The tapestry scrolls continuously upward as new rows are generated (like a loom producing cloth), with a shuttle illustration moving across. Controls: rule number input/slider, random or single-cell start, speed, palette, and "famous rules" chips (30, 90, 110, 184, 150, 45, 73). Hovering the tapestry shows the rule applied at that cell. Typography: a textile-label serif with monospace numbers.

Create "Pages from Juno's Sketchbook" (a fictional illustrator), a portfolio designed as a physical sketchbook. Dot-grid paper (#fbf8f1 with faint blue dots), graphite lines (#3d3d3d), highlighter yellow (#fff176) and a single red-pencil accent (#d64545). All illustrations are SVG line drawings with a hand-drawn wobble (SVG turbulence displacement plus slightly irregular paths) that draw themselves as they enter the viewport. Elements: washi-tape strips holding polaroid-style frames of CSS/SVG doodle artworks; sticky notes in a casual handwriting stack ("Segoe Print", "Bradley Hand", "Comic Neue", Chalkboard, cursive); margin doodles (coffee rings, arrows, stars); a spiral binding along the left edge. Sections: a hello note, selected work (six sketched projects), process scribbles, and contact written on an envelope. Interaction: pages flip horizontally with a page-curl animation on desktop and scroll on mobile; doodles wiggle on hover; a pencil cursor leaves a faint fading trail.

Build "Tempus — Hourglass Timer", a beautiful focus timer with a physically simulated hourglass. Two glass bulbs drawn in SVG with realistic reflections inside a turned-wood and brass frame (#6b4226, #c9a227); sand simulated as particles (or a cellular sand grid) flowing through the neck: the top pile drains with a conical dip, a thin stream falls, and a mound builds in the lower bulb with grains tumbling down its slopes. Warm desert-glass palette: sand #e3b778, glass tint #e8f4f8, dusk background #2d1b3d → #d98d62. Set the duration with elegant preset chips (1, 5, 15, 25 min) or a custom input; the flow rate adapts so the sand runs out exactly on time. Click the hourglass (or a flip button) to flip it with a smooth 180° rotation — the sand keeps flowing with gravity reversed. Remaining time appears as a large, thin numeral with a progress arc; a gentle chime plays at the end (Web Audio). Pause/resume. Typography: classic serif numerals with old-style figures.

Create "SENTINEL — Radar Array", a radar/sonar console as polished UI art, set in a clearly fictional scenario. Phosphor green (#39ff88) on dark olive-black (#020a05), with an amber mode. The centrepiece: a circular PPI radar scope on canvas with range rings, bearing ticks (0–359°), a rotating sweep beam with a fading afterglow wedge, and contacts (blips) that brighten when swept and then decay; contacts move along plausible tracks (aircraft, ships, a fast unknown), each with a small data tag (ID, heading, speed, altitude) and a trail of past positions. Surrounding console panels: a contact table, a signal-strength waterfall/spectrogram, system status indicators, a compass heading readout and a scrolling event log. Interaction: click a contact to lock on (target reticle, detailed readout); a range selector (10/25/50 nm) that rescales smoothly; a radar/sonar toggle — sonar switches to a blue-green water palette with pings and a Web Audio ping sound after a gesture. Typography: monospace with stencilled headings.

Build "Horologe — The Word Clock", a typographic clock that spells the current time in words on a grid of letters (an original English layout in the letter-grid clock tradition: "IT IS HALF PAST TEN", five-minute precision plus four corner dots for single minutes). An 11×10 letter grid in a clean, wide-tracked sans; inactive letters are faint (#2a2a2a on #111) and active ones glow warm white (#fff6e5) with soft bloom, fading on and off in a gentle stagger when the time changes. Faces: "Obsidian" (dark), "Paper" (ink on #f3efe6), "Copper" (letters etched into a brushed-copper gradient, lit ones glowing) and "Neon" (magenta tube glow). A small subtitle gives the date in words. Interaction: a face switcher; clicking the grid toggles between the English layout and a second-language layout (e.g. Spanish); a fullscreen button; and a "demo" button that runs through a whole day in 20 seconds. The clock scales to fill any screen while keeping its square grid.

Create "Alpenglow — A Day in the Mountains", a parallax landscape that cycles through a full day. Six procedurally generated mountain ridge layers (midpoint displacement) with atmospheric perspective (farther = lighter and bluer), a foreground lake reflecting sky and mountains with gentle ripples, pine silhouettes on the nearest ridge, and birds that occasionally cross. Time of day animates (or is scrubbed with a slider): pre-dawn indigo, sunrise with pink alpenglow on the peaks (#ff9eaa, #ffd6a5), bright noon blues, golden hour, sunset reds, dusk violets, and a starry night with a moon and the occasional meteor. The sun and moon follow arcs; sky gradients interpolate smoothly between keyframes; ridge colours are recomputed for each moment. Interaction: pointer parallax; a time slider with icons; "Play day" (60 seconds); clicking the sky regenerates the mountains from a new seed. Typography: a small, elegant sans showing the current time and a poetic name for each phase ("Blue hour").

Build "Ambience — Soundscape Mixer", a calm app for mixing natural ambient sounds, all synthesized with Web Audio (no audio files): rain (filtered noise plus random droplet clicks), thunder (low noise bursts), wind (band-pass-swept noise), ocean waves (noise with slow amplitude swells), campfire (crackle impulses and a low rumble), forest birds (short FM chirps at random intervals), crickets (pulsed high sine tones), café murmur (band-limited noise through formant-like filters) and a soft drone pad. Each sound is a card with a hand-crafted SVG illustration that animates subtly while that sound is active (raindrops fall, flames flicker, waves roll), a volume slider and an on/off toggle. Earthy, calm palette: moss #606c38, deep forest #283618, cream #fefae0, sand #dda15e, clay #bc6c25. Presets ("Stormy cabin", "Beach at dusk", "Deep focus"), a master volume, and a sleep timer that fades everything out. The background gradient shifts subtly with the active mix. Typography: a soft humanist sans. Audio starts only after a gesture.

Create "Windwalker — A Kinetic Sculpture Simulation", inspired by Theo Jansen's wind-walking beach creatures (an original rendering). Simulate the Jansen linkage with its canonical link lengths (a=38, b=41.5, c=39.3, d=40.1, e=55.8, f=39.4, g=36.7, h=65.7, i=49, j=50, k=61.9, l=7.8, m=15), solving every joint position each frame from the crank angle with circle–circle intersections. Draw a multi-legged creature (e.g. 6–12 legs with phase offsets) walking across a beach (sand #e9d8b4, sea #6fb3c7, sky #f0f4f5) in its pale-yellow tube aesthetic (#f4e3a1 tubes with darker joints), with each foot's path traced as the characteristic curve and a wind sail driving it. Interaction: a wind slider (walking speed); a "single leg diagram" toggle showing one linkage with labelled lengths and its foot trajectory; a trace-paths toggle; buttons to add/remove leg pairs; drag to pan along the beach. Parallax clouds and footprints fading in the sand behind it. Typography: an engineering-notebook sans with monospace labels.

Build "Aquarelle — Generative Watercolor Landscapes". Each generation paints a new landscape in convincing watercolour: layered translucent washes built by recursively deforming polygons (many low-alpha layers with jittered edges) for sky gradients, distant hills, mid-ground mountains, a lake, trees as dabbed blobs, and a sun or moon — all on textured cold-press paper (procedural grain, with pigment darkening where it pools at edges). Palettes rotate among seasonal watercolour sets: "Ultramarine & Burnt Sienna", "Sap Green Spring", "Quinacridone Sunset" and "Payne's Grey Winter". The painting builds up layer by layer over about six seconds, as if being painted. Interaction: "Paint another"; palette choice; a "wet-in-wet" slider controlling bleed; clicking the paper drops water that creates a cauliflower bloom in the wet wash; "Sign & download" adds a small signature and date before saving a PNG. The painting sits on a wooden easel/table background. Typography: a delicate serif with a script-like italic.

Create "Lines of Force — Magnetic Field Explorer". A lab-styled canvas where you place and drag bar magnets (red N / blue S halves, #d62828 / #1d4e89) on a sheet of paper; the field is computed from magnetic dipoles (or magnetic charges at the poles) and rendered in three switchable styles: (1) iron filings — thousands of tiny dark filings aligned with the field, denser where it is stronger, like the classic school experiment on off-white paper; (2) field lines — smooth streamlines traced from the poles with arrowheads, in elegant ink; (3) a heat map of field magnitude in a refined sequential palette. A small compass follows the pointer and points along the field. Interaction: drag magnets; rotate with the wheel, R key or a handle; double-click to flip polarity; add/remove magnets; presets (single bar, attracting pair, repelling pair, quadrupole, horseshoe). Short explanatory captions in a sidebar. Palette: steel grey #6c757d, paper #f8f6f1, red/blue poles. Typography: a clean scientific sans.

Design "MONOLITH — Architecture & Landscape" (a fictional studio), a brutalist-minimal architecture portfolio: raw concrete surfaces (procedural texture from layered noise with formwork tie-hole dots and board-mark grain) in greys #8d8d8a, #b5b3ad, #d6d4ce and charcoal #262624, with a single accent of oxidised-copper green #4f7f73. Typography: huge, tight, uppercase grotesk headlines and precise small captions with project data (location, year, area in m²). Composition: a severe grid, vast negative space, heavy slabs. Five fictional buildings appear as axonometric SVG drawings of monolithic volumes whose light and shadow shift as a "sun angle" slider moves (shadows computed from the angle). Scroll storytelling: slabs slide in; a building assembles piece by piece as you scroll; a horizontal material-library strip shows concrete, corten, timber and glass as procedural textures. Interaction: the sun slider; hovering a project rotates its axonometric slightly; clicking opens a project sheet. Calm, heavy, precise motion.

Build "Harmonograph — A Drawing Machine", simulating the Victorian pendulum drawing device. Two or three damped pendulums (x, y and rotary) combine to trace delicate, decaying Lissajous-like curves: x(t) = A1·sin(f1·t + p1)·e^(−d1·t) + A2·sin(f2·t + p2)·e^(−d2·t), and similarly for y. Render a very fine pen line accumulating on cream paper (#f6f1e3) in sepia ink (#3e2c1c) or selectable inks (indigo, oxblood, or gold on black paper). The machine is illustrated beside the drawing (a wooden table with pendulums swinging in sync, SVG). Controls styled as brass knobs and engraved dials: frequencies (with harmonic-ratio presets such as 2:3, 3:4 and near-unison detuning), phases, damping, pen width and speed. "Release pendulums" starts a fresh drawing that animates stroke by stroke; "Randomize" picks tasteful parameters; "Save drawing" downloads a PNG. Show the current ratio as a musical interval name (fifth, fourth). Typography: Victorian scientific-instrument labels in serif small caps.

Create "Pip and the Paper Moon", an interactive children's picture book (an original short story in eight spreads about a little fox who wants to give the moon a gift). Watercolour-pastel illustrations built from SVG shapes with soft gradients, paper texture and gentle outlines: a forest at dusk, a pond reflecting the moon, a hill, a lantern festival, and more. Palette: peach #ffcdb2, dusty pink #e5989b, mauve #b5838d, pale blue #a8dadc, midnight #1d3557, warm yellow #ffd166. Book UX: a two-page spread on desktop and a single page on mobile; a realistic 3D page turn (CSS 3D with shading on the curling page) triggered by clicking page corners, arrow keys or swiping. Each spread hides small delights: tap the fox to make it hop, tap stars to twinkle and chime, tap the pond for ripples, fireflies follow the finger. Large, readable story text in a friendly rounded serif; a "Read along" mode highlights each word in turn and turns the page automatically. A cover page with a sparkling title.

Build "Droste — The Infinite Room", an endless-zoom artwork: a self-similar scene that zooms forever — a room with a framed picture on the wall that contains the same room, which contains the picture… Render on canvas by drawing the scene recursively at successive scales (each level scaled by the frame ratio), animating the zoom continuously and wrapping seamlessly each time a full level is reached. The room is illustrated in a flat, elegant mid-century-modern style: warm walls (#f1dac4), a teal armchair (#2a9d8f), a mustard lamp (#e9c46a), a geometric rug, a window with a changing sky and a plant; the framed painting is the recursion portal. Each depth level shifts the palette subtly so the journey feels alive. Interaction: scroll/pinch controls zoom speed and direction (zooming out is infinite too); click to switch scenes ("Room", "Spiral staircase" with an Escher-like spiral, "Ocean window"); pause; and a "Droste twist" toggle that applies a logarithmic-spiral (conformal) transform for the famous Droste spiral effect. Typography: tiny modernist sans captions.

Create "Organic Wave Lab — Ripple Tank", an interactive wave-interference laboratory. A full-screen 2D wave simulation (discrete wave equation on a grid with damping and absorbing boundaries) rendered with gorgeous shading: a water-like surface lit from above with normal-based highlights, coloured from aqua #3ee6d6 through deep teal #0b4f6c with coral #ff7b6b crests (plus palettes "Lagoon", "Bioluminescent" and "Monochrome ink"). Tools: click to drop a droplet; place continuous oscillating point sources (adjustable frequency/phase) to show interference patterns; draw walls/barriers with the pointer; and presets — double-slit experiment, single-slit diffraction, a lens (a region of slower wave speed that focuses waves), reflection in a parabolic dish, and rain. A lab-instrument UI panel (glassy, rounded, organic shapes) with sliders for wave speed, damping and source frequency, plus a probe that plots amplitude over time at a point as a live oscilloscope trace. Performance: a Float32Array grid at reduced resolution, drawn via ImageData and smoothed. Typography: a rounded scientific sans.