Ornith 1.5 122B 100 HTML Files

Build a standalone, fully offline HTML5 page: an "Aurora borealis glassmorphism dashboard hero" — floating glass panels over animated northern lights. Palette: deep midnight blue, emerald, violet, soft cyan glow. Signature: layered animated gradient aurora behind frosted-glass (backdrop-filter) cards with subtle mouse parallax. Hard constraints: one self-contained .html, all CSS in one <style>, all JS in one <script>, zero external dependencies (system fonts only, no CDN, no external images/SVG files), responsive 320px→4K, valid HTML5, must run by double-click with no network requests. WOW bar: Awwwards/SiteInspire-caliber, distinctive art direction, real motion, one signature effect. A matching .txt with the same base name must accompany it.

Build a standalone, fully offline HTML page: a neon cyberpunk cityscape landing with scanlines, holographic glow and chrome type. Palette: near-black, magenta, cyan, electric purple. Signature: CSS/inline-SVG city silhouette, text-shadow neon-glow flicker, animated scanline overlay, and a perspective grid floor. One self-contained .html file, all CSS in a single <style>, all JS in a single <script>, zero external dependencies (system fonts only, no CDN, no external images), responsive 320px→4K, valid HTML5.

Build a standalone, fully offline HTML page: a soft morphing mesh-gradient product page with pastel liquid blobs drifting. Palette: peach, lilac, mint, sky. Signature: multiple blurred radial gradients animated with border-radius morph + scroll reveal. One self-contained .html file, all CSS in a single <style>, all JS in a single <script>, zero external dependencies (system fonts only, no CDN, no external images), responsive 320px→4K, valid HTML5.

Build a standalone, fully offline HTML page: a raw brutalist magazine spread using monospace + heavy serif, offset black borders and high contrast. Palette: paper white, ink black, one acid accent (red or yellow). Signature: CSS grid editorial layout, hard offset shadows, rotated/tilted elements. One self-contained .html file, all CSS in a single <style>, all JS in a single <script>, zero external dependencies (system fonts only, no CDN, no external images), responsive 320px→4K, valid HTML5.

Build a standalone, fully offline HTML page: a Neumorphic climate dashboard with soft extruded gauges, dials, and cards. Palette: soft off-white/grey with a single accent. Signature elements: dual inset/outset box-shadows, animated needle gauges, and conic progress rings. One self-contained .html file, all CSS in a single <style> block and all JS in a single <script> block, zero external dependencies (no CDN, fonts, images, or libraries), responsive 320px→4K, valid HTML5, and a genuinely premium Awwwards-caliber look with intentional motion and delightful polish.

Build a standalone, fully offline HTML page: an interactive canvas galaxy where particles orbit with mouse gravity. Palette: deep space black, star white, nebula violet/cyan. Signature: requestAnimationFrame attraction to the cursor, and a translucent clear each frame for light trails. One self-contained .html file, all CSS in a single <style> block and all JS in a single <script> block, zero external dependencies (no CDN, fonts, images, or libraries), responsive 320px→4K, valid HTML5, and a genuinely premium Awwwards-caliber look with real motion.

Build a standalone, fully offline HTML page: an origami paper crane that folds and unfolds, with a washi-paper texture and a Japanese minimalist feel. Palette: rice-paper cream, vermilion, indigo. Signature: CSS 3D transforms folding paper panels, soft drop shadows, and a sequential fold animation. One self-contained .html file, all CSS in a single <style> block and all JS in a single <script> block, zero external dependencies (no CDN, fonts, images or libraries), responsive 320px→4K, valid HTML5, and a genuinely premium Awwwards-caliber look with real motion.

Build a standalone, fully offline HTML page: a 90s vaporwave sunset with a perspective grid floor, palm silhouettes and a chrome sun. Palette: magenta, cyan, purple, hot pink. Signature: a CSS perspective grid floor, a gradient sun cut by horizontal slits, palm SVG silhouettes, and a scanline overlay. One self-contained .html file, all CSS in a single <style> block and all JS in a single <script> block (or none), zero external dependencies (no CDN, fonts, images or libraries), responsive 320px→4K, valid HTML5, and a genuinely premium Awwwards-caliber look with real motion.

Build a standalone, fully offline HTML page: a minimal luxury watch landing page. Huge serif headline, gold on black, generous whitespace, slow reveal. Palette: black, champagne gold, ivory. Signature effects: a CSS-drawn watch (radial + conic gradients for the dial ticks and brushed-gold case), a slow fade/scale reveal on load, and a shimmer of light sweeping across the gold. One self-contained .html file, all CSS in a single <style> block and all JS in a single <script> block, zero external dependencies (no CDN, fonts, images or libraries), responsive 320px to 4K, valid HTML5, works by double-clicking offline.

Build a single self-contained HTML page (no external libraries) that renders an animated generative "flow field" on an HTML5 canvas, styled like ink lines drawn on cream paper. Layout / chrome: - Full-viewport fixed canvas (inset:0), with the body background a subtle radial gradient of warm cream/paper tones (center #efe8da near the upper-middle, darkening to #d8cfbc at the edges) to give a soft vignette. Body has overflow:hidden and a crosshair cursor. - Add a faint paper-grain overlay using a fixed full-screen ::before element that uses an inline SVG feTurbulence fractalNoise texture at ~4.5% opacity with mix-blend-mode:multiply. - Top-left: a large serif (Georgia) title "Flow Field" (clamp 28–72px, ink color), with a small uppercase letter-spaced subtitle "Seeded noise · thousands of particles · ink on cream". - Bottom-left: a small editorial UI block (also mix-blend-mode:multiply) with an italic serif mark "perlin, drawn by hand", a meta line showing the current four-digit zero-padded SEED and the live PARTICLE COUNT, two small uppercase outlined buttons ("New Field" and "Pause"/"Play"), and a hint line: "Move the cursor to part the ink. / Click anywhere to seed a new field." Hide the hint under 520px width. Buttons invert (ink background, paper text) on hover. Core algorithm: - Implement a seedable PRNG (mulberry32) and a seeded 2D Perlin noise generator (permutation table shuffled via Fisher-Yates via the PRNG, quintic fade curve, standard gradient noise returning ~[-1,1]). - Spawn thousands of particles (count scaled to viewport area, clamped roughly 900–6500, ~area/150), each placed at a random position with a random remaining lifetime (120–420 frames). - Each frame, instead of clearing, draw a translucent paper-colored rectangle (globalAlpha ~0.05) over the whole canvas so previous strokes fade slowly and long ink trails accumulate. - Advance each particle along the field: the flow angle is the (multi-octave, 2-octave fractal) Perlin noise value at the particle's position plus slowly evolving time offsets, multiplied into a curling radians value (~*2.6*PI). Move the particle a small step (~1.15px) along that angle, drawing a thin round-capped line from its previous to its new position. Stroke color is dark ink with slight per-particle alpha/width variation tied to vertical position (deeper = slightly darker/thicker). Particles that die or leave the canvas are respawned at a random point. - DPR-aware: size the canvas by devicePixelRatio (capped at 2) and setTransform so drawing stays in CSS pixels; repaint the paper background gradient on resize. Cursor interaction ("part the ink"): - Track mouse/touch position and velocity. Within a radius (~150px) of the cursor, add a tangential swirl (perpendicular to the particle-to-cursor vector, scaled by cursor motion) plus a radial repel push, fading linearly to zero at the radius edge, so the ink visibly parts and swirls around the pointer. Controls: - "New Field" button and clicking the canvas both pick a new random seed, rebuild the Perlin noise, reset time, repaint the background, and reseed all particles; the seed label updates to the new zero-padded value. - "Pause"/"Play" toggles the animation (trails freeze but the loop keeps ticking). Resize is debounced and reflows/reseeds. Palette: cream paper (#efe8da / #e4dccB / vignette #d8cfbc) with dark warm ink (#1b1913, soft #3a352b). Typography: Georgia serif for display, Segoe UI / system sans for UI labels. Overall mood: minimal, editorial, tactile, hand-drawn.

Build a single self-contained HTML page (no external libraries) that shows a photoreal-ish "holographic" membership/credit card which tilts in 3D and shifts its rainbow iridescent foil as the cursor moves across it. Layout / chrome: - Centered vertically and horizontally. Body background is a dark radial gradient (#16171f → #0a0b10 → #050507) with an off-white text color (#e9e9f2). - Behind the card, a large (60vmax) blurred (blur ~70px) conic-gradient "bloom" (rose→amber→green→blue→violet, mix-blend-mode:screen, ~35% opacity) that slowly rotates via a 26s linear infinite spin keyframe. - A stage element with CSS perspective (~1400px) holds the card. The card is a fixed aspect ratio (~1.72:1, like a credit card) with 18px rounded corners, a deep drop shadow, and an inset 1px white hairline. It uses transform-style: preserve-3d and rotates on X/Y axes driven by CSS custom properties (--rx, --ry), with a smooth cubic-bezier(.16,1,.3,1) transition. Card layers (back to front): - .card-bg: dark base with a soft metallic sheen — a 135deg linear gradient (#14151d → #0c0d14 → #1b1c28) plus two faint radial highlights (::after). - .foil: an iridescent rainbow foil layer, inset slightly outside the card (-18%), filled with an 8-stop conic gradient (rose #ff2d92 → orange → amber #ffbd2e → lime → green #2ee6a6 → blue #2d9cff → violet #7b2dff → magenta → back to rose). mix-blend-mode:screen, ~62% opacity, saturate(1.2). Its rotate transform is driven by JS so the rainbow sweeps as the mouse moves. - .foil2: a finer repeating-conic-gradient interference layer (white 0–3deg, transparent 3–12deg) in mix-blend-mode:overlay at ~25% opacity to give true holographic banding. - .glare: a radial-gradient specular highlight positioned at CSS vars --mx/--my (cursor position), with variable --glare intensity and --glare-op overall opacity, mix-blend-mode:screen; fades in/out on hover. - .edge: an inset embossed-edge box-shadow framing the card. - .content: the card "print", pushed toward the viewer with translateZ(42px): a serif brand "Aurora" + "Platinum · No. 0042", a contactless-payment SVG icon, a gold EMV chip (linear gold gradient with etched line details via ::before/ ::after), a large embossed card number "4921 · 1024 · 7788 · 0042", holder name "J. Meridian", and a "Valid thru 09 / 31" block. Below the card, a caption: a serif headline "The Holographic / Membership", a letter-spaced uppercase sub "Iridescent foil · 3D tilt · live specular", and a hint: "Move your cursor across the card — it tilts, the rainbow sweeps, and the highlight follows." Core behavior (JS): - Track the cursor position within the stage as normalized 0..1 values (mx, my). - Map position to a target tilt: rotateY = (px-0.5)*2*MAX_TILT (±16°), rotateX = -(py-0.5)*2*MAX_TILT. Map mx to a foil rotation sweep (spin + (mx-0.5)*2*MAX_FOIL_ROT, ~±55°) and to the glare position/intensity. - Run a requestAnimationFrame loop that eases the current values toward the targets (~0.08 factor) and continuously increments a base foil "spin" (~+0.25/ frame) for a living holographic drift even at rest. Every frame it writes the custom properties (--rx, --ry, --mx, --my, --glare, --glare-op) and the foil transform. - On mouseleave (and touchend) return tilt/foil/glare to neutral; the glare opacity drops to 0 so the highlight only exists while hovering. Support touchmove/touchend. Palette: near-black card base with warm/cool metallic sheen; full ROYGBIV iridescent foil; gold chip; cool off-white text on a deep navy-black room with a soft rainbow bloom. Typography: Georgia serif for brand/headline/number, Segoe UI system sans for labels. Mood: premium, luxe, iridescent, interactive.

Build the following standalone HTML page(s) as files in the current working directory. GLOBAL CONSTRAINTS (non-negotiable): - One self-contained .html file per page. ALL CSS in a single <style> block, ALL JS in a single <script> block. Inline everything. - ZERO external dependencies: no CDN, no external fonts (only system stacks: system-ui, Georgia, 'Segoe UI', Menlo, Consolas, serif, sans-serif, monospace), no external images, no external SVG files, no libraries/frameworks. Create all visuals with CSS, HTML, inline SVG, or <canvas>. - Must work fully offline by double-clicking the file. No network requests whatsoever. - Responsive from ~320px to 4K. Include <meta name="viewport" content="width=device-width, initial-scale=1">. - Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic structure where sensible. WOW QUALITY BAR (this is the point): - Genuinely stunning, premium, Awwwards/SiteInspire-caliber. NOT generic. Distinctive art direction, curated palette, refined typography, real motion, delightful details, one signature effect. Take real design risks. For EACH page, also create a matching .txt with the SAME base name containing: the exact full prompt you used; a short TITLE; a one-paragraph DESIGN DESCRIPTION; a bulleted list of MAJOR VISUAL TECHNIQUES; and the INTENDED INTERACTION MODEL. Numbering: three-digit prefix. File in this task: 4. 012-isometric-city.html + 012-isometric-city.txt — CSS isometric city with a day->night cycle, tiny animated window lights and cars. Palette: transitions from dawn to night. Signature: isometric transforms, animated window lights, moving dots as cars.

013-sumi-e.html + 013-sumi-e.txt — Japanese ink-wash (sumi-e) bamboo painting; wet ink bleed on rice paper. Palette: ink black/grey, paper cream, single red seal. Signature: SVG/Canvas ink strokes with animated bleed/opacity and wet edges, red seal stamp reveal.

014-art-deco.html + 014-art-deco.txt — Art Deco frame inspired by 1920s posters; gold geometric ornaments, symmetry. Palette: black, gold, deep emerald or burgundy. Signature: CSS/SVG symmetric ornaments, gold gradient rules, fan motifs, elegant serif.

Build a standalone, fully offline HTML page (single self-contained .html, all CSS in one <style>, all JS in one <script>, no external dependencies/fonts/images/CDN). Responsive 320px–4K, valid HTML5. WOW bar: Awwwards/SiteInspire-caliber, distinctive art direction. Theme: Claymorphism — a playful mini-app (a "mood selector") with squishy 3D soft buttons. Palette: pastel mint, peach, lavender, butter. Signature: soft inner + outer shadows for clay extrusion, squish hover/active transforms.

Build a standalone, fully offline HTML page (single self-contained .html, all CSS in one <style>, all JS in one <script>, no external dependencies/fonts/images/CDN). Responsive 320px–4K, valid HTML5. WOW bar: Awwwards/SiteInspire-caliber, distinctive art direction. Theme: a retro CRT terminal boot sequence with green phosphor and typing text. Palette: phosphor green on black, scanlines. Signature: monospace typing animation, scanline + flicker overlay, cursor blink, phosphor glow.

Build a standalone, fully offline HTML5 page: a cathedral stained-glass window with sun rays and colored glow. Palette: rich ruby, sapphire, emerald, gold lead lines. Signature: SVG geometric panels, animated light rays, soft colored glow pulsing. Hard constraints: one self-contained .html, all CSS in one <style>, all JS in one <script>, zero external dependencies (system fonts only, no CDN, no external images/SVG files), responsive 320px→4K, valid HTML5, must run by double-click with no network requests. WOW bar: Awwwards/SiteInspire-caliber, distinctive art direction, real motion, one signature effect. A matching .txt with the same base name must accompany it.

Build a standalone, fully offline HTML5 page: an orrery of the solar system with orbiting planets and hover info tooltips. Palette: deep space, glowing sun. Signature: concentric orbit animations with transform-origin, hover tooltips, starfield background. Hard constraints: one self-contained .html, all CSS in one <style>, all JS in one <script>, zero external dependencies (system fonts only, no CDN, no external images/SVG files), responsive 320px→4K, valid HTML5, must run by double-click with no network requests. WOW bar: Awwwards/SiteInspire-caliber, distinctive art direction, real motion, one signature effect. A matching .txt with the same base name must accompany it.

Build a standalone, fully offline HTML5 page: an interactive kaleidoscope whose mirror-symmetric canvas drawing follows the mouse/touch. Palette: vivid jewel tones. Signature: canvas radial mirror (multiple reflections), trailing coloured strokes. Hard constraints: one self-contained .html, all CSS in one <style>, all JS in one <script>, zero external dependencies (system fonts only, no CDN, no external images/SVG files), responsive 320px→4K, valid HTML5, must run by double-click with no network requests. WOW bar: Awwwards/SiteInspire-caliber, distinctive art direction, real motion, one signature effect. A matching .txt with the same base name must accompany it.

Build a standalone, fully offline HTML5 page: a layered paper-cut parallax landscape (mountains, fog, sun) drifting. Palette: dusk teal, sage, cream. Signature: stacked SVG silhouettes with auto parallax drift + mouse parallax. Hard constraints: one self-contained .html, all CSS in one <style>, all JS in one <script>, zero external dependencies (system fonts only, no CDN, no external images/SVG files), responsive 320px→4K, valid HTML5, must run by double-click with no network requests. WOW bar: Awwwards/SiteInspire-caliber, distinctive art direction, real motion, one signature effect. A matching .txt with the same base name must accompany it.

Create a full-screen, animated "synthwave / outrun" hero scene in a single self-contained HTML file (inline <style>, no external assets, no JS required). The viewport is a fixed, overflow-hidden landscape with a deep purple-to- magenta night sky, a large glowing sun with horizontal dark slats on its lower half, a jagged mountain range silhouette on the horizon, and a perspective "floor" of glowing cyan-and-magenta grid lines scrolling toward the viewer. Layer a twinkling star field above the horizon, a warm horizon glow, a CRT scanline overlay and a heavy vignette. Overlay editorial neon type: a large flickering wordmark top-left and a small status footer bottom. Use CSS custom properties for the neon palette, CSS keyframe animations for all motion, CSS perspective for the floor, SVG for the mountains, and mask/gradients for the sun slats and grid fade. Respect prefers-reduced-motion.

Create a single self-contained HTML file (inline <style> and inline <script>, no external assets) of an editorial "line garden" art card. Layout is a two- column grid (SVG art frame on the left, serif editorial copy on the right) on a warm ivory radial-gradient paper background with a subtle grain overlay. The left column holds a 4/5 framed panel containing an SVG "continuous line" botanical illustration of a fern frond: one long S-curve stem plus pairs of small curved pinnae strokes, a second crossing leaf sprig, an accent-colored flower bud at the tip, and small accent dots. Every stroke is drawn onscreen using the stroke-dasharray / stroke-dashoffset technique, staggered with per-element animation-delay, then pops/fades in. The right column has a kicker, a large serif headline (with an italic accent word), a hairline rule, a lede paragraph, a metadata row, and a "Replay the drawing" button. The button restarts the draw animations by resetting each element's animation to 'none', forcing a reflow, then clearing it. Use an old-style serif for body/headings and a system sans for labels. Respect prefers-reduced-motion.

Create a single self-contained HTML file (inline <style>, no external assets, no JS) of an upscale gallery landing page for sculptural marble forms. The background is a warm stone/beige radial gradient suggesting a studio room, with a perspective-tilted floor strip, faint tile lines, and a blurred, slowly drifting diagonal light shaft (multiply blend). A header shows a spaced-out brand and a large serif headline with an italic gold accent word. Below, a three-column grid (two on tablet, one on mobile) of six "pieces": each is a marble sculpture rendered purely with CSS (a div whose background is a radial gradient from white to marble to vein tones, with inset + drop shadows for roundness), given a distinct silhouette via a unique border-radius, sitting on a small pedestal with a blurred ground shadow, and captioned with a number, italic name, and material/year line. Each form has two animated layers: a slow drifting marble-vein texture (::before, conic + repeating gradients, multiply) and a specular sheen sweep (::after, screen blend). Two of the pieces are "gilded" variants with gold-toned gradients and veining. Pieces rise into place on load with staggered delays. Use old-style serif for display type and system-sans for labels. Respect prefers-reduced-motion.

Create a single self-contained HTML file (inline <style> plus inline <script>, no external assets) of a dark, product-style hero showing a morphing "liquid chrome" blob. Center a large circular form on a dark radial-gradient stage with a faint reflective environment glow and a soft perspective "reflection pool" beneath it. The blob is a div with a multi-stop diagonal linear-gradient in silver/chrome tones, an animated morphing multi-value border-radius (the signature effect), a slow hue-rotate loop, and layered sheen/sweep/specular highlight pseudo-elements and child divs (screen blend). Behind it, a full-size <canvas> continuously draws flowing horizontal chrome light bands (sine-moved vertical gradients) and a few drifting cyan radial highlight points. The blob wrapper reacts to the pointer: translate + rotateX/rotateY tilt with a smoothed (lerped) follow. Overlay minimal chrome-tinted type — a top brand/status row and a bottom headline with a metallic gradient-text fill, a caption and an interaction hint. Use system sans-serif. Respect prefers-reduced-motion.

Build a single self-contained HTML page (no external assets) that presents a cream "paper sheet" centered on a warm beige desk, styled to look like a technical plotter output card from a fictional instrument company called "Meridian Instruments". LAYOUT & FRAME - Full-viewport body centered with flex; background is a radial-to-linear warm beige/taupe gradient (paper tones like #ece5d5 → #ded6c6 → #cfc6b2). - A `.sheet` element: width min(96vw, 900px), aspect-ratio 4/3 (switch to 3/4 under 520px), rounded 4px, layered paper shadows, overflow hidden. - Paper grain via two faint multiply radial-gradient dot textures (::before) and a soft inset vignette (::after). - Inside the sheet a full-size <canvas> (z-index 2) for the dots. - A dashed registration frame (`.frame`, inset 5%, 1px dashed rgba(20,21,26,.28)) and four corner registration marks (`.reg`) each with a crosshair plus a small ring. - A plotter gantry: a horizontal `.rail` near the top (5%) and a `.pen` that slides left/right along it. The pen has a dark `.carriage`, a vertical `.arm` whose CSS height is set dynamically, and a triangular `.nib` at the bottom tip. HUD (mono/technical typography, all uppercase, wide letter-spacing) - Top-left brand block: "Meridian Instruments" / bold "Halftone Field". - Top-right spec block (right-aligned, mono): "Sheet 025 · Ink on Cotton", "Grid {cols}×{rows} · Pass {pass}", "Plot {pct}%". - Bottom-left caption paragraph explaining the piece. - Bottom-right a "Progress" meter: a thin bar that fills left-to-right with a live % and a status label ("plotting…" / "complete"), plus a "↻ Re-plot sheet" button. - Respect prefers-reduced-motion (disable all animation). CANVAS ANIMATION (the core) - Build a deterministic pseudo-random grid (~52 cells on the short edge) with a small per-dot jitter in position and radius. Margin of ~0.09 of the sheet kept clear on all sides. - The field value at each cell is a diagonal light ramp (u,v) blended with a strong lower-left focal Gaussian pool and a weaker upper-right highlight, plus fine grain noise; clamped to [0,1]. Luminance 1 = darkest = largest dot. - Dot target radius = maxR * sqrt(field) with slight random jitter; maxR ≈ cell*0.46. - Plot the grid boustrophedon (serpentine: even rows left→right, odd rows right→left) at ~1.55 rows/second. A float `plotRows` tracks progress; the pen's CSS left position and the arm's height follow the current pen column/row. - Dots on the current row reveal as the pen passes them using a smoothstep fade (local/0.06); already-passed rows stay fully drawn. - Each dot, once drawn, "blooms": radius overshoots by up to 16% then decays exponentially (ink bloom settling), and it has a tiny continuous sinusoidal wobble in x/y. - Dot fill is near-black (#14151a) with slight per-dot opacity variation. - When a full pass completes, hold ~1.6s then auto-restart (re-plot) in a loop; increment the Pass counter.

Build a single self-contained HTML page (no external assets) that fills the viewport with a dark night-sky scene and overlays a technical "space weather" monitoring HUD. Palette: deep navy/black night (#04060f → #060a19), neon aurora green (#4dffc4 / #17d68a), magenta/pink (#ff6fd8 / #c85bff), ice-blue text (#cfe6ff) and dim slate labels (#6f86ad). BACKGROUND LAYERS - Body background: stacked radial gradients (a low horizon teal glow, an upper-right magenta glow) over a vertical navy gradient. overflow hidden. - One full-screen <canvas id="aurora"> (fixed, inset 0) for the animation. - A `.haze` overlay: horizon green glow below + a top darkening vignette (pointer-events none). - A `.grid-lines` overlay: faint horizontal lines every 12.5% masked in from the bottom (a horizon ruler). CANVAS ANIMATION - Starfield: n ≈ (W*H)/9000 tiny white dots in the upper 72% of the screen, each with a random twinkle phase and speed; alpha pulses with sin(). - Five stacked aurora "curtain" layers, back-to-front: higher/fainter layers are pinker/magenta and bluer, lower/brighter layers are greener. Each layer is a set of 48 vertical light columns. - Layer vertical height at each column comes from a multi-octave wave function (three summed sines with per-layer freq/speed/phase) driving an amplitude; columns fade in/out vertically via a linear gradient (color → transparent → color). - Layers are drawn with globalCompositeOperation = 'lighter' for additive glow; a soft green horizon glow band is painted on top near the bottom. - Continuously animated with requestAnimationFrame using elapsed seconds. HUD (mono type, uppercase, wide tracking, ice-blue on dark) - Top-left brand with a pulsing green status dot: "MERIDIAN · SPACE WEATHER" / bold "Aurora Intensity Field". - Top-right coordinates block: LAT 64°51′N · LON 19°02′W, ALT 312 km · MLT 22.4, and a live UTC clock (HH:MM:SS UTC). - Bottom-left a huge Kp index number (~46–104px, green gradient text with drop-shadow glow, tabular nums) plus a status label ("QUIET"/"ACTIVE"/"STRONG"). - Bottom-right a glassy data `.panel`: rows for Geomag. Kp, Electron flux (×10⁸ cm⁻²s⁻¹), Peak λ (557.7 nm O I), Status ("CURTAIN · STABLE"), and a 24-bar mini-spectrum (first 16 green, last 8 pink). - Two fixed annotation tags: "Curtain base {alt} km" (left) and "Oxygen green line 557.7 nm" (right). - Respect prefers-reduced-motion (stop the CSS pulse). LIVE DATA (JS intervals) - Kp oscillates ~3.2–8.1 (base 5.4 + 1.3·sin), drives the big number, the panel value, and the ACTIVE/STRONG/QUIET label. - Electron flux oscillates ~2.4–4.0. Curtain altitude oscillates ~290–330 km. Spectrum bars animate every 120ms; data readouts update every ~900ms; clock updates each second.

Build a single self-contained HTML page (no external assets) that centers one huge, heavy-weight word ("CHROME") rendered to look like liquid chrome/mirror, with a faded, rippling reflection beneath it, over a dark blue ambient background. BACKGROUND - Body: dark blue radial + linear gradients (navy #0e1c34 → #0a1424 → #060d1a) with soft blue (#5aa7ff) and cyan (#8ff0ff) glows at opposite corners. Centered flex layout, overflow hidden. - A `.env` layer (fixed, inset -20%, opacity .55): two slowly drifting diagonal light bands (background-size 200%, animated by `envdrift` 18s linear infinite) that act as the "environment" the chrome reflects. - An inline SVG filter (`.fx`, zero-size, hidden) defining `#ripple`: feTurbulence (fractalNoise, baseFrequency ~"0.006 0.014", numOctaves 2, seed 9) → feDisplacementMap (scale 16, xChannel R, yChannel G). THE WORD - `.word`: font-weight 900, line-height .82, letter-spacing -.02em, size clamp(4.2rem, 24vw, 28rem). - Filled with a horizontal multi-stop chrome gradient (white → grey → blue → silver → near-white → dark grey → light → cyan → silver → white), background-size 220%, clipped to text (background-clip:text, color:transparent). - The gradient scrolls via `shimmer` animation (7s linear infinite, background-position 0% → 220%). - A `.sheen` overlay (mix-blend-mode:overlay) sweeps a bright specular band across the letters (`sheen` 5.5s ease-in-out). - drop-shadow for depth. THE REFLECTION - `.reflect`: a duplicate "CHROME" copy, flipped with transform:scaleY(-1) (transform-origin top), same size/weight, positioned top:100% with margin-top ~0.28em. - A muted/bluer chrome gradient, same 220% shimmer animation, masked with a downward fade (mask-image linear-gradient from semi-opaque to transparent ~90%). - Filtered with `url(#ripple)` + drop-shadow and opacity .9 to look like a liquid-distorted mirror reflection. TYPOGRAPHY / LABELS - A `.label` under the stage: "Liquid Chrome · Reflection Study 027" (uppercase, wide tracking, cyan accent on "Reflection Study"). - Two mono corner captions: top-left "Mirror · Specular", bottom-right "feTurbulence + Displacement / Ripple Engine". - Respect prefers-reduced-motion (stop all animations). SCRIPT (live ripple) - requestAnimationFrame updates the SVG each frame: baseFrequency oscillates (bx = 0.006 + 0.004·sin(t*0.5), by = 0.014 + 0.006·sin(t*0.7+1.2)) and the displacement scale breathes (14 + 6·sin(t*0.9)), giving a living liquid ripple on the reflection.

Build a standalone, fully offline HTML5 page: fantasy floating islands with waterfalls flowing UPWARD, drifting clouds, and a distant sun. Palette: sky blue, moss green, warm stone, soft violet haze. Signature: CSS islands with soft drop shadows, a looping upward waterfall (animated gradient + particles), drifting cloud parallax, birds. Hard constraints: one self-contained .html, all CSS in one <style>, all JS in one <script>, zero external dependencies (system fonts only, no CDN, no external images/SVG files, no libraries — build all visuals with CSS, HTML, inline SVG or <canvas>), responsive 320px→4K, valid HTML5, must run by double-click with no network requests. WOW bar: Awwwards-caliber, distinctive art direction, curated palette, refined typography, deliberate composition, real intentional motion, one signature effect, handcrafted and unique. A matching .txt with the same base name must accompany it.

Build the following standalone HTML page(s) as files in the current working directory. GLOBAL CONSTRAINTS (non-negotiable): - One self-contained .html file per page. ALL CSS in a single <style> block, ALL JS in a single <script> block. Inline everything. - ZERO external dependencies: no CDN, no external fonts (only system stacks), no external images, no external SVG files, no libraries/frameworks. Create all visuals with CSS, HTML, inline SVG, or <canvas>. - Must work fully offline by double-clicking the file. No network requests whatsoever. - Responsive from ~320px to 4K. Include <meta name="viewport" content="width=device-width, initial-scale=1">. - Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic structure where sensible. WOW QUALITY BAR (this is the point): - Genuinely stunning, premium, Awwwards/SiteInspire-caliber. NOT generic. Distinctive art direction, curated palette, refined typography, real motion, delightful details, one signature effect. Take real design risks. For this page: 029-prismatic.html + 029-prismatic.txt — Glass prism dispersing white light into a spectrum. Palette: clear glass, vivid ROYGBIV. Signature: CSS/SVG prism, animated light beam splitting into a fan of colors, refraction glow. Also create a matching .txt with the SAME base name containing: the exact full prompt you used; a short TITLE; a one-paragraph DESIGN DESCRIPTION; a bulleted list of MAJOR VISUAL TECHNIQUES; and the INTENDED INTERACTION MODEL. Numbering: three-digit prefix.

Build the following standalone HTML page(s) as files in the current working directory. GLOBAL CONSTRAINTS (non-negotiable): - One self-contained .html file per page. ALL CSS in a single <style> block, ALL JS in a single <script> block. Inline everything. - ZERO external dependencies: no CDN, no external fonts (only system stacks), no external images, no external SVG files, no libraries/frameworks. Create all visuals with CSS, HTML, inline SVG, or <canvas>. - Must work fully offline by double-clicking the file. No network requests whatsoever. - Responsive from ~320px to 4K. Include <meta name="viewport" content="width=device-width, initial-scale=1">. - Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic structure where sensible. WOW QUALITY BAR (this is the point): - Genuinely stunning, premium, Awwwards/SiteInspire-caliber. NOT generic. Distinctive art direction, curated palette, refined typography, real motion, delightful details, one signature effect. Take real design risks. For this page: 030-bioluminescent-deep.html + 030-bioluminescent-deep.txt — Deep-sea bioluminescent particles drifting in darkness. Palette: abyss black/blue, cyan-green glow. Signature: canvas floating glowing motes with pulsing brightness, occasional flashes, slow drift. Also create a matching .txt with the SAME base name containing: the exact full prompt you used; a short TITLE; a one-paragraph DESIGN DESCRIPTION; a bulleted list of MAJOR VISUAL TECHNIQUES; and the INTENDED INTERACTION MODEL. Numbering: three-digit prefix.

Build the following standalone HTML page(s) as files in the current working directory. GLOBAL CONSTRAINTS (non-negotiable): - One self-contained .html file per page. ALL CSS in a single <style> block, ALL JS in a single <script> block. Inline everything. - ZERO external dependencies: no CDN, no external fonts (only system stacks), no external images, no external SVG files, no libraries/frameworks. Create all visuals with CSS, HTML, inline SVG, or <canvas>. - Must work fully offline by double-clicking the file. No network requests whatsoever. - Responsive from ~320px to 4K. Include <meta name="viewport" content="width=device-width, initial-scale=1">. - Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic structure where sensible. WOW QUALITY BAR (this is the point): - Genuinely stunning, premium, Awwwards/SiteInspire-caliber. NOT generic. Distinctive art direction, curated palette, refined typography, real motion, delightful details, one signature effect. Take real design risks. For this page: 031-atompunk.html + 031-atompunk.txt — Retro-futurist atomic-age poster (1950s space race). Palette: teal, orange, cream, mustard. Signature: flat geometric illustration, ray-gun motifs, concentric orbits, mid-century type. Also create a matching .txt with the SAME base name containing: the exact full prompt you used; a short TITLE; a one-paragraph DESIGN DESCRIPTION; a bulleted list of MAJOR VISUAL TECHNIQUES; and the INTENDED INTERACTION MODEL. Numbering: three-digit prefix.

Build the following standalone HTML page(s) as files in the current working directory. GLOBAL CONSTRAINTS (non-negotiable): - One self-contained .html file per page. ALL CSS in a single <style> block, ALL JS in a single <script> block. Inline everything. - ZERO external dependencies: no CDN, no external fonts (only system stacks), no external images, no external SVG files, no libraries/frameworks. Create all visuals with CSS, HTML, inline SVG, or <canvas>. - Must work fully offline by double-clicking the file. No network requests whatsoever. - Responsive from ~320px to 4K. Include <meta name="viewport" content="width=device-width, initial-scale=1">. - Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic structure where sensible. WOW QUALITY BAR (this is the point): - Genuinely stunning, premium, Awwwards/SiteInspire-caliber. NOT generic. Distinctive art direction, curated palette, refined typography, real motion, delightful details, one signature effect. Take real design risks. For this page: 032-mandala.html + 032-mandala.txt — Meditative animated geometric mandala with rotating concentric symmetry. Palette: indigo, gold, rose. Signature: SVG/CSS radial symmetry, slow counter-rotating rings, breathing scale. Also create a matching .txt with the SAME base name containing: the exact full prompt you used; a short TITLE; a one-paragraph DESIGN DESCRIPTION; a bulleted list of MAJOR VISUAL TECHNIQUES; and the INTENDED INTERACTION MODEL. Numbering: three-digit prefix.

High-fashion magazine editorial spread; oversized serif, asymmetric, model silhouette. Palette: monochrome + one bold accent. Signature: big serif display, asymmetric grid, CSS figure silhouette, kinetic type.

Cosmic nebula with swirling gas clouds and a parallax star field. Palette: deep space, magenta/teal gas. Signature: layered animated radial gradients for gas, parallax stars, slow zoom.

Build the following standalone HTML page as a file in the current working directory. GLOBAL CONSTRAINTS (non-negotiable): One self-contained .html file; ALL CSS in a single <style> block, ALL JS in a single <script> block, inline everything. ZERO external dependencies: no CDN, no external fonts (system stacks only), no external images, no external SVG files, no libraries/frameworks. Create all visuals with CSS, HTML, inline SVG or <canvas>. Must work fully offline by double-clicking the file — no network requests. Responsive 320px to 4K; include <meta name="viewport">. Valid HTML5. WOW QUALITY BAR: genuinely stunning, premium, Awwwards/SiteInspire-caliber, distinctive art direction, curated palette, refined typography, real motion, one signature effect. Page: 035-frosted-clock — Frosted-glass analog + digital live clock with a blurred animated background. Palette: cool twilight gradient. Signature: backdrop-filter frost, real-time JS clock, sweeping second hand, glowing numerals.

Build the following standalone HTML page as a file in the current working directory. GLOBAL CONSTRAINTS (non-negotiable): One self-contained .html file; ALL CSS in a single <style> block, ALL JS in a single <script> block, inline everything. ZERO external dependencies: no CDN, no external fonts (system stacks only), no external images, no external SVG files, no libraries/frameworks. Create all visuals with CSS, HTML, inline SVG or <canvas>. Must work fully offline by double-clicking the file — no network requests. Responsive 320px to 4K; include <meta name="viewport">. Valid HTML5. WOW QUALITY BAR: genuinely stunning, premium, Awwwards/SiteInspire-caliber, distinctive art direction, curated palette, refined typography, real motion, one signature effect. Page: 036-glitch — Glitch art typography/portrait with RGB split and datamosh. Palette: black, cyan, magenta, white. Signature: clip-path glitch slices, RGB channel offset, random datamosh jumps, scanlines.

You are a world-class creative technologist & designer. Build the following standalone HTML page as a file in the current working directory. GLOBAL CONSTRAINTS (non-negotiable): - One self-contained .html file. ALL CSS in a single <style> block, ALL JS in a single <script> block. Inline everything. - ZERO external dependencies: no CDN, no external fonts (only system stacks: system-ui, Georgia, 'Segoe UI', Menlo, Consolas, serif, sans-serif, monospace), no external images, no external SVG files, no libraries/frameworks. Create all visuals with CSS, HTML, inline SVG, or <canvas>. - Must work fully offline by double-clicking the file. No network requests whatsoever. - Responsive from ~320px to 4K. Include <meta name="viewport" content="width=device-width, initial-scale=1">. - Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic structure where sensible. PAGE 037 — Interactive raked zen garden; drag to rake sand, stones placed. Palette: warm sand, grey stones, soft green. Signature: canvas sand texture, drag-rake trails, gentle ripple, minimalist composition. WOW QUALITY BAR: Genuinely stunning, premium, Awwwards/SiteInspire-caliber. NOT generic. Distinctive art direction, curated palette, refined typography, real motion, delightful details, one signature effect. Take real design risks.

You are a world-class creative technologist & designer. Build the following standalone HTML page as a file in the current working directory. GLOBAL CONSTRAINTS (non-negotiable): - One self-contained .html file. ALL CSS in a single <style> block, ALL JS in a single <script> block. Inline everything. - ZERO external dependencies: no CDN, no external fonts (only system stacks: system-ui, Georgia, 'Segoe UI', Menlo, Consolas, serif, sans-serif, monospace), no external images, no external SVG files, no libraries/frameworks. Create all visuals with CSS, HTML, inline SVG, or <canvas>. - Must work fully offline by double-clicking the file. No network requests whatsoever. - Responsive from ~320px to 4K. Include <meta name="viewport" content="width=device-width, initial-scale=1">. - Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic structure where sensible. PAGE 038 — Flowing rainbow silk fabric with gradient waves. Palette: full spectral silk sheen. Signature: canvas or CSS layered sine waves with iridescent gradient, fluid motion. WOW QUALITY BAR: Genuinely stunning, premium, Awwwards/SiteInspire-caliber. NOT generic. Distinctive art direction, curated palette, refined typography, real motion, delightful details, one signature effect. Take real design risks.

You are a world-class creative technologist & designer. Build the following standalone HTML page as a file in the current working directory. GLOBAL CONSTRAINTS (non-negotiable): - One self-contained .html file. ALL CSS in a single <style> block, ALL JS in a single <script> block. Inline everything. - ZERO external dependencies: no CDN, no external fonts (only system stacks: system-ui, Georgia, 'Segoe UI', Menlo, Consolas, serif, sans-serif, monospace), no external images, no external SVG files, no libraries/frameworks. Create all visuals with CSS, HTML, inline SVG, or <canvas>. - Must work fully offline by double-clicking the file. No network requests whatsoever. - Responsive from ~320px to 4K. Include <meta name="viewport" content="width=device-width, initial-scale=1">. - Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic structure where sensible. PAGE 039 — Architectural blueprint with animated grid, dimension lines, a technical drawing building itself up. Palette: classic blueprint cyan, white lines. Signature: animated grid, stroke-draw plans, dimension ticks, drafting feel. WOW QUALITY BAR: Genuinely stunning, premium, Awwwards/SiteInspire-caliber. NOT generic. Distinctive art direction, curated palette, refined typography, real motion, delightful details, one signature effect. Take real design risks.

You are a world-class creative technologist & designer. Build the following standalone HTML page as a file in the current working directory. GLOBAL CONSTRAINTS (non-negotiable): - One self-contained .html file. ALL CSS in a single <style> block, ALL JS in a single <script> block. Inline everything. - ZERO external dependencies: no CDN, no external fonts (only system stacks: system-ui, Georgia, 'Segoe UI', Menlo, Consolas, serif, sans-serif, monospace), no external images, no external SVG files, no libraries/frameworks. Create all visuals with CSS, HTML, inline SVG, or <canvas>. - Must work fully offline by double-clicking the file. No network requests whatsoever. - Responsive from ~320px to 4K. Include <meta name="viewport" content="width=device-width, initial-scale=1">. - Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic structure where sensible. PAGE 040 — Warm candlelight scene with a flickering flame and cozy poetry. Palette: amber, deep orange, near-black. Signature: CSS flame with flicker animation, soft glow pulse, warm vignette, drifting ember particles. WOW QUALITY BAR: Genuinely stunning, premium, Awwwards/SiteInspire-caliber. NOT generic. Distinctive art direction, curated palette, refined typography, real motion, delightful details, one signature effect. Take real design risks.

Build the following standalone HTML page(s) as files in the current working directory. GLOBAL CONSTRAINTS (non-negotiable): - One self-contained .html file per page. ALL CSS in a single <style> block, ALL JS in a single <script> block. Inline everything. - ZERO external dependencies: no CDN, no external fonts (only system stacks), no external images, no external SVG files, no libraries/frameworks. Create all visuals with CSS, HTML, inline SVG, or <canvas>. - Must work fully offline by double-clicking the file. No network requests whatsoever. - Responsive from ~320px to 4K. Include <meta name="viewport" content="width=device-width, initial-scale=1">. - Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic structure where sensible. WOW QUALITY BAR (this is the point): - Genuinely stunning, premium, Awwwards/SiteInspire-caliber. NOT generic. Distinctive art direction, curated palette, refined typography, real motion, delightful details, one signature effect. Take real design risks. For this page: 041-ocean-data.html + 041-ocean-data.txt — Ocean depth stratification data art; layers, creatures, temperature gradient. Palette: surface teal to abyss black. Signature: stratified animated layers, drifting creatures (CSS), depth markers, gradient. Also create a matching .txt with the SAME base name containing: the exact full prompt you used; a short TITLE; a one-paragraph DESIGN DESCRIPTION; a bulleted list of MAJOR VISUAL TECHNIQUES; and the INTENDED INTERACTION MODEL. Numbering: three-digit prefix.

Build the following standalone HTML page(s) as files in the current working directory. GLOBAL CONSTRAINTS (non-negotiable): - One self-contained .html file per page. ALL CSS in a single <style> block, ALL JS in a single <script> block. Inline everything. - ZERO external dependencies: no CDN, no external fonts (only system stacks), no external images, no external SVG files, no libraries/frameworks. Create all visuals with CSS, HTML, inline SVG, or <canvas>. - Must work fully offline by double-clicking the file. No network requests whatsoever. - Responsive from ~320px to 4K. Include <meta name="viewport" content="width=device-width, initial-scale=1">. - Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic structure where sensible. WOW QUALITY BAR (this is the point): - Genuinely stunning, premium, Awwwards/SiteInspire-caliber. NOT generic. Distinctive art direction, curated palette, refined typography, real motion, delightful details, one signature effect. Take real design risks. For this page: 042-northern-lights-audio.html + 042-northern-lights-audio.txt — Aurora / northern lights driven by a live WebAudio synthesiser; curtains, starfield, silhouette, analyser. Palette: deep night sky to green/cyan/violet aurora. Signature: audio-reactive aurora curtains where moving the pointer reshapes both the sky and its sound. Also create a matching .txt with the SAME base name containing: the exact full prompt you used; a short TITLE; a one-paragraph DESIGN DESCRIPTION; a bulleted list of MAJOR VISUAL TECHNIQUES; and the INTENDED INTERACTION MODEL. Numbering: three-digit prefix.

Build the following standalone HTML page(s) as files in the current working directory. GLOBAL CONSTRAINTS (non-negotiable): - One self-contained .html file per page. ALL CSS in a single <style> block, ALL JS in a single <script> block. Inline everything. - ZERO external dependencies: no CDN, no external fonts (only system stacks), no external images, no external SVG files, no libraries/frameworks. Create all visuals with CSS, HTML, inline SVG, or <canvas>. - Must work fully offline by double-clicking the file. No network requests whatsoever. - Responsive from ~320px to 4K. Include <meta name="viewport" content="width=device-width, initial-scale=1">. - Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic structure where sensible. WOW QUALITY BAR (this is the point): - Genuinely stunning, premium, Awwwards/SiteInspire-caliber. NOT generic. Distinctive art direction, curated palette, refined typography, real motion, delightful details, one signature effect. Take real design risks. For this page: 043-crystal-growth.html + 043-crystal-growth.txt — Faceted crystal/gem growth simulation expanding outward from a seed. Palette: amethyst violet, rose quartz, cyan highlights, deep indigo bg. Signature: canvas hexagonal crystal prisms that branch and grow, faceted linear-gradient shading, sparkle glints, slow rotation. Also create a matching .txt with the SAME base name containing: the exact full prompt you used; a short TITLE; a one-paragraph DESIGN DESCRIPTION; a bulleted list of MAJOR VISUAL TECHNIQUES; and the INTENDED INTERACTION MODEL. Numbering: three-digit prefix.

Build a standalone, fully offline HTML page — a vintage travel poster: a flat illustration of a mountain-lake scene with a cabin and pine trees. Palette: warm retro (ochre, teal, cream, rust, dusty sky blue). Signature: flat vector shapes built in CSS/SVG, a strictly limited palette, a subtle film-grain overlay, bold condensed display type, and a sun disk with rings. One self-contained .html file, all CSS in a single <style> block, all JS in a single <script> block, no external dependencies (no CDN, fonts, images or libraries — system font stacks only), responsive 320px–4K, valid HTML5. WOW quality bar: genuinely stunning, premium, Awwwards-caliber, distinctive art direction, curated palette, refined typography, real intentional motion, one signature effect, handcrafted and unique.

Build a standalone, fully offline HTML5 page. One self-contained .html file: all CSS in a single <style> block, all JS in a single <script> block, inline everything. Zero external dependencies (no CDN, no external fonts — system stacks only, no external images/SVG files/libraries). Must work by double-clicking with no network requests. Responsive 320px to 4K. Valid HTML5. Scene: A futuristic city skyline at dusk with flying vehicle lights. Palette: dusk purple/orange sky with neon-lit windows. Signature effects: a CSS-built city silhouette, animated flying light trails streaking across the sky, window twinkle, and a reflective water/glass surface below mirroring the city glow.

Build a standalone, fully offline HTML5 page. One self-contained .html file: all CSS in a single <style> block, all JS in a single <script> block, inline everything. Zero external dependencies (no CDN, no external fonts — system stacks only, no external images/SVG files/libraries). Must work by double-clicking with no network requests. Responsive 320px to 4K. Valid HTML5. Scene: A fluid silk ribbon simulation flowing in space. Palette: jewel-toned silk (emerald, sapphire, ruby, amethyst, gold). Signature effects: canvas-rendered flowing ribbons built as a sum of sine waves, a glossy gradient that runs down each ribbon's length, and pointer parallax so nearer strands drift ahead of the far ones.

Build a standalone, fully offline HTML5 page. One self-contained .html file: all CSS in a single <style> block, all JS in a single <script> block, inline everything. Zero external dependencies (no CDN, no external fonts — system stacks only, no external images/SVG files/libraries). Must work by double-clicking with no network requests. Responsive 320px to 4K. Valid HTML5. Scene: A Byzantine/Greek mosaic tile pattern with an animated reveal. Palette: gold, lapis, terracotta, jade. Signature effects: a CSS grid of tiles with a staggered color animation (each stone swings into place), visible grout lines, and a shimmer sweep that walks across the field catching the gold.

Build a standalone, fully offline HTML5 page. One self-contained .html file: all CSS in a single <style> block, all JS in a single <script> block, inline everything. Zero external dependencies (no CDN, no external fonts — system stacks only, no external images/SVG files/libraries). Must work by double-clicking with no network requests. Responsive 320px to 4K. Valid HTML5. Scene: Bioluminescent jellyfish pulsing through deep water with tentacles. Palette: deep blue water, glowing magenta/cyan bioluminescence. Signature effects: a canvas/SVG bell that pulses (contracts and expels water), trailing tentacle curves streaming behind, a soft glow, and floating particles.

Build a standalone, fully offline HTML page — Golden ratio / Fibonacci spiral construction visualization. Palette: navy, gold, cream. Signature: animated golden rectangles subdividing, spiral draw-on, phi annotations. One self-contained .html file, all CSS in a single <style> block, all JS in a single <script> block, no external dependencies (no CDN, fonts, images or libraries), responsive 320px–4K, valid HTML5. WOW quality bar: genuinely stunning, premium, Awwwards/SiteInspire-caliber, distinctive art direction, curated palette, refined typography, real motion, one signature effect.

Build a standalone, fully offline HTML page — Arctic ice landscape with cracked ice and cold aurora. Palette: ice blue, white, pale green aurora. Signature: CSS cracked-ice polygons, drifting mist, aurora glow, cold vignette. One self-contained .html file, all CSS in a single <style> block, all JS in a single <script> block, no external dependencies (no CDN, fonts, images or libraries), responsive 320px–4K, valid HTML5. WOW quality bar: genuinely stunning, premium, Awwwards/SiteInspire-caliber, distinctive art direction, curated palette, refined typography, real motion, one signature effect.

Build a standalone, fully offline HTML page — realistic lava lamp with rising/falling blobs. Palette: warm red/orange liquid, dark base. Signature: canvas metaballs via gradient/blur, wobble, slow rising and falling blobs. One self-contained .html file, all CSS in a single <style> block, all JS in a single <script> block, no external dependencies (no CDN, fonts, images or libraries), responsive 320px–4K, valid HTML5. WOW quality bar: genuinely stunning, premium, Awwwards/SiteInspire-caliber, distinctive art direction, curated palette, refined typography, real motion, one signature effect.

Build a standalone, fully offline HTML page — hyperspace starfield warp tunnel zooming. Palette: deep space, white/blue streaks. Signature: canvas pseudo-3D star projection stretching into streaks, speed control. One self-contained .html file, all CSS in a single <style> block, all JS in a single <script> block, no external dependencies (no CDN, fonts, images or libraries), responsive 320px–4K, valid HTML5. WOW quality bar: genuinely stunning, premium, Awwwards/SiteInspire-caliber, distinctive art direction, curated palette, refined typography, real motion, one signature effect.

World-class creative technologist & designer. Build these standalone HTML page(s) as files in the current working directory. CONSTRAINTS (non-negotiable): - One self-contained .html per page. ALL CSS in one <style>, ALL JS in one <script>. Inline everything. - ZERO external dependencies: no CDN, no external fonts (system stacks only: system-ui, Georgia, 'Segoe UI', Menlo, Consolas, serif/sans-serif/monospace), no external images, no external SVG files, no libraries. Build all visuals with CSS, HTML, inline SVG, or <canvas>. - Works fully fully offline by double-clicking. No network requests. Responsive 320px->4K; include <meta name="viewport" content="width=device-width, initial-scale=1">. Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic where sensible. - WOW BAR: genuinely stunning, premium, Awwwards-caliber, NOT generic. Distinctive art direction, curated palette, refined typography, deliberate composition, real intentional motion, delightful details, one signature effect. Handcrafted, unique, take design risks. For EACH page also create a matching .txt with the SAME base name containing: the exact full prompt used; a short TITLE; a one-paragraph DESIGN DESCRIPTION; a bulleted list of MAJOR VISUAL TECHNIQUES; and the INTENDED INTERACTION MODEL. This page: 053-terrarium.html + 053-terrarium.txt — Cozy glass terrarium with tiny plants, moss, and drifting fireflies at dusk. Palette: warm green, amber firefly glow, deep night blue. Signature: CSS glass jar with refraction rim, layered plants, canvas fireflies with soft glow and wandering paths.

World-class creative technologist & designer. Build these standalone HTML page(s) as files in the current working directory. CONSTRAINTS (non-negotiable): - One self-contained .html per page. ALL CSS in one <style>, ALL JS in one <script>. Inline everything. - ZERO external dependencies: no CDN, no external fonts (system stacks only: system-ui, Georgia, 'Segoe UI', Menlo, Consolas, serif/sans-serif/monospace), no external images, no external SVG files, no libraries. Build all visuals with CSS, HTML, inline SVG, or <canvas>. - Works fully offline by double-clicking. No network requests. Responsive 320px->4K; include <meta name="viewport" content="width=device-width, initial-scale=1">. Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic where sensible. - WOW BAR: genuinely stunning, premium, Awwwards-caliber, NOT generic. Distinctive art direction, curated palette, refined typography, deliberate composition, real intentional motion, delightful details, one signature effect. Handcrafted, unique, take design risks. For EACH page also create a matching .txt with the SAME base name containing: the exact full prompt used; a short TITLE; a one-paragraph DESIGN DESCRIPTION; a bulleted list of MAJOR VISUAL TECHNIQUES; and the INTENDED INTERACTION MODEL. This page: 054-chromatic.html + 054-chromatic.txt — Chromatic-aberration art with RGB channel displacement on bold type and shapes. Palette: black bg, displaced red/green/blue channels, white core. Signature: layered text with animated channel offsets, glitchy prismatic edges, mouse-driven displacement.

World-class creative technologist & designer. Build these standalone HTML page(s) as files in the current working directory. CONSTRAINTS (non-negotiable): - One self-contained .html per page. ALL CSS in one <style>, ALL JS in one <script>. Inline everything. - ZERO external dependencies: no CDN, no external fonts (system stacks only: system-ui, Georgia, 'Segoe UI', Menlo, Consolas, serif/sans-serif/monospace), no external images, no external SVG files, no libraries. Build all visuals with CSS, HTML, inline SVG, or <canvas>. - Works fully offline by double-clicking. No network requests. Responsive 320px->4K; include <meta name="viewport" content="width=device-width, initial-scale=1">. Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic where sensible. - WOW BAR: genuinely stunning, premium, Awwwards-caliber, NOT generic. Distinctive art direction, curated palette, refined typography, deliberate composition, real intentional motion, delightful details, one signature effect. Handcrafted, unique, take design risks. For EACH page also create a matching .txt with the SAME base name containing: the exact full prompt used; a short TITLE; a one-paragraph DESIGN DESCRIPTION; a bulleted list of MAJOR VISUAL TECHNIQUES; and the INTENDED INTERACTION MODEL. This page: 055-lantern-festival.html + 055-lantern-festival.txt — Floating paper lanterns rising into a starry night sky with warm reflections. Palette: warm orange lanterns, deep indigo night, gold stars. Signature: canvas rising lanterns with gentle sway and glow, parallax stars, slow ember sparks.

World-class creative technologist & designer. Build these standalone HTML page(s) as files in the current working directory. CONSTRAINTS (non-negotiable): - One self-contained .html per page. ALL CSS in one <style>, ALL JS in one <script>. Inline everything. - ZERO external dependencies: no CDN, no external fonts (system stacks only: system-ui, Georgia, 'Segoe UI', Menlo, Consolas, serif/sans-serif/monospace), no external images, no external SVG files, no libraries. Build all visuals with CSS, HTML, inline SVG, or <canvas>. - Works fully offline by double-clicking. No network requests. Responsive 320px->4K; include <meta name="viewport" content="width=device-width, initial-scale=1">. Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic where sensible. - WOW BAR: genuinely stunning, premium, Awwwards-caliber, NOT generic. Distinctive art direction, curated palette, refined typography, deliberate composition, real intentional motion, delightful details, one signature effect. Handcrafted, unique, take design risks. For EACH page also create a matching .txt with the SAME base name containing: the exact full prompt used; a short TITLE; a one-paragraph DESIGN DESCRIPTION; a bulleted list of MAJOR VISUAL TECHNIQUES; and the INTENDED INTERACTION MODEL. This page: 056-wind-turbines.html + 056-wind-turbines.txt — Minimal clean-energy scene: wind turbines rotating on rolling hills under drift clouds. Palette: clean sky blue, sage hills, white turbines. Signature: CSS turbines with perspective-rotating blades at different speeds, drifting clouds, subtle sun glow.

World-class creative technologist & designer. Build standalone HTML page as a self-contained .html with ALL CSS in one <style> and ALL JS in one <script> (inline everything). ZERO external dependencies: no CDN, no external fonts (system stacks only), no external images/SVG files, no libraries — build all visuals with CSS, HTML, inline SVG, or <canvas>. Works fully offline by double-clicking (no network requests). Responsive 320px->4K with <meta name="viewport" content="width=device-width, initial-scale=1">. Valid HTML5. WOW BAR: genuinely stunning, premium, Awwwards-caliber, distinctive art direction, curated palette, refined typography, deliberate composition, real intentional motion, delightful details, one signature effect. Also create a matching .txt with the same base name containing the exact prompt, a short TITLE, a one-paragraph DESIGN DESCRIPTION, a bulleted list of MAJOR VISUAL TECHNIQUES, and the INTENDED INTERACTION MODEL. Page: 057-fractal-tree — A recursive fractal tree that grows from a seed and gently sways. Palette: spring blossom pink on fresh green, warm soil. Signature: recursive canvas branches with growth (stroke-length) animation, subtle wind sway, falling blossom particles.

World-class creative technologist & designer. Build standalone HTML page as a self-contained .html with ALL CSS in one <style> and ALL JS in one <script> (inline everything). ZERO external dependencies: no CDN, no external fonts (system stacks only), no external images/SVG files, no libraries — build all visuals with CSS, HTML, inline SVG, or <canvas>. Works fully offline by double-clicking (no network requests). Responsive 320px->4K with <meta name="viewport" content="width=device-width, initial-scale=1">. Valid HTML5. WOW BAR: genuinely stunning, premium, Awwwards-caliber, distinctive art direction, curated palette, refined typography, deliberate composition, real intentional motion, delightful details, one signature effect. Also create a matching .txt with the same base name containing the exact prompt, a short TITLE, a one-paragraph DESIGN DESCRIPTION, a bulleted list of MAJOR VISUAL TECHNIQUES, and the INTENDED INTERACTION MODEL. Page: 058-bubble-wrap — An addictive interactive bubble-wrap pop toy. Palette: translucent pastel blues/pinks on soft grey. Signature: grid of glossy 3D bubbles that squish on press and 'pop' with a WebAudio blip + scale animation, auto-refill when all popped, satisfying haptic-like feedback.

World-class creative technologist & designer. Build standalone HTML page as a self-contained .html with ALL CSS in one <style> and ALL JS in one <script> (inline everything). ZERO external dependencies: no CDN, no external fonts (system stacks only), no external images/SVG files, no libraries — build all visuals with CSS, HTML, inline SVG, or <canvas>. Works fully offline by double-clicking (no network requests). Responsive 320px->4K with <meta name="viewport" content="width=device-width, initial-scale=1">. Valid HTML5. WOW BAR: genuinely stunning, premium, Awwwards-caliber, distinctive art direction, curated palette, refined typography, deliberate composition, real intentional motion, delightful details, one signature effect. Also create a matching .txt with the same base name containing the exact prompt, a short TITLE, a one-paragraph DESIGN DESCRIPTION, a bulleted list of MAJOR VISUAL TECHNIQUES, and the INTENDED INTERACTION MODEL. Page: 059-rain-pond — Raindrops striking a pond and sending out concentric ripples, with falling rain. Palette: moody blue-grey, soft highlights. Signature: canvas ripple rings spawning at random + on click, diagonal rain streaks, faint reflection shimmer.

World-class creative technologist & designer. Build standalone HTML page as a self-contained .html with ALL CSS in one <style> and ALL JS in one <script> (inline everything). ZERO external dependencies: no CDN, no external fonts (system stacks only), no external images/SVG files, no libraries — build all visuals with CSS, HTML, inline SVG, or <canvas>. Works fully offline by double-clicking (no network requests). Responsive 320px->4K with <meta name="viewport" content="width=device-width, initial-scale=1">. Valid HTML5. WOW BAR: genuinely stunning, premium, Awwwards-caliber, distinctive art direction, curated palette, refined typography, deliberate composition, real intentional motion, delightful details, one signature effect. Also create a matching .txt with the same base name containing the exact prompt, a short TITLE, a one-paragraph DESIGN DESCRIPTION, a bulleted list of MAJOR VISUAL TECHNIQUES, and the INTENDED INTERACTION MODEL. Page: 060-sunrise — A sunrise timeline across a landscape with a shifting color temperature. Palette: indigo pre-dawn -> peach -> gold morning. Signature: animated sky gradient timeline, sun arcing up over hills, lengthening/shortening shadows, progress scrubber.

Build these standalone HTML page(s) as files in the current working directory. CONSTRAINTS (non-negotiable): - One self-contained .html per page. ALL CSS in one <style>, ALL JS in one <script>. Inline everything. - ZERO external dependencies: no CDN, no external fonts (system stacks only: system-ui, Georgia, 'Segoe UI', Menlo, Consolas, serif/sans-serif/monospace), no external images, no external SVG files, no libraries. Build all visuals with CSS, HTML, inline SVG, or <canvas>. - Works fully offline by double-clicking. No network requests. Responsive 320px->4K; include <meta name="viewport" content="width=device-width, initial-scale=1">. Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic where sensible. WOW BAR: genuinely stunning, premium, Awwwards-caliber, NOT generic. Distinctive art direction, curated palette, refined typography, deliberate composition, real intentional motion, delightful details, one signature effect. Handcrafted, unique, take design risks. For EACH page also create a matching .txt with the SAME base name containing: the exact full prompt used; a short TITLE; a one-paragraph DESIGN DESCRIPTION; a bulleted list of MAJOR VISUAL TECHNIQUES; and the INTENDED INTERACTION MODEL. Files to create: 061-magnetic-field.html + 061-magnetic-field.txt — Magnetic field lines around a bar magnet with animated iron-filings. Palette: steel grey magnet, blue field lines, dark bg. Signature: canvas particles flowing along field-line curves from pole to pole, hover to reveal field vectors, subtle glow.

Build these standalone HTML page(s) as files in the current working directory. CONSTRAINTS (non-negotiable): - One self-contained .html per page. ALL CSS in one <style>, ALL JS in one <script>. Inline everything. - ZERO external dependencies: no CDN, no external fonts (system stacks only: system-ui, Georgia, 'Segoe UI', Menlo, Consolas, serif/sans-serif/monospace), no external images, no external SVG files, no libraries. Build all visuals with CSS, HTML, inline SVG, or <canvas>. - Works fully offline by double-clicking. No network requests. Responsive 320px->4K; include <meta name="viewport" content="width=device-width, initial-scale=1">. Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic where sensible. WOW BAR: genuinely stunning, premium, Awwwards-caliber, NOT generic. Distinctive art direction, curated palette, refined typography, deliberate composition, real intentional motion, delightful details, one signature effect. Handcrafted, unique, take design risks. For EACH page also create a matching .txt with the SAME base name containing: the exact full prompt used; a short TITLE; a one-paragraph DESIGN DESCRIPTION; a bulleted list of MAJOR VISUAL TECHNIQUES; and the INTENDED INTERACTION MODEL. Files to create: 062-coral-reef.html + 062-coral-reef.txt — A vibrant coral reef ecosystem with schooling fish and bubbles. Palette: tropical teal, coral pink/orange, sunlit cyan. Signature: canvas fish with simple schooling/boid motion, drifting bubbles, swaying coral fronds, god-ray light shafts.

Build these standalone HTML page(s) as files in the current working directory. CONSTRAINTS (non-negotiable): - One self-contained .html per page. ALL CSS in one <style>, ALL JS in one <script>. Inline everything. - ZERO external dependencies: no CDN, no external fonts (system stacks only: system-ui, Georgia, 'Segoe UI', Menlo, Consolas, serif/sans-serif/monospace), no external images, no external SVG files, no libraries. Build all visuals with CSS, HTML, inline SVG, or <canvas>. - Works fully offline by double-clicking. No network requests. Responsive 320px->4K; include <meta name="viewport" content="width=device-width, initial-scale=1">. Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic where sensible. WOW BAR: genuinely stunning, premium, Awwwards-caliber, NOT generic. Distinctive art direction, curated palette, refined typography, deliberate composition, real intentional motion, delightful details, one signature effect. Handcrafted, unique, take design risks. For EACH page also create a matching .txt with the SAME base name containing: the exact full prompt used; a short TITLE; a one-paragraph DESIGN DESCRIPTION; a bulleted list of MAJOR VISUAL TECHNIQUES; and the INTENDED INTERACTION MODEL. Files to create: 063-desert-dunes.html + 063-desert-dunes.txt — Desert dunes with heat haze and wind-blown sand under a low sun. Palette: ochre, rust, warm amber sky. Signature: layered dune silhouettes with parallax, heat-haze via animated blur/distortion, drifting sand particles, glowing sun.

Build these standalone HTML page(s) as files in the current working directory. CONSTRAINTS (non-negotiable): - One self-contained .html per page. ALL CSS in one <style>, ALL JS in one <script>. Inline everything. - ZERO external dependencies: no CDN, no external fonts (system stacks only: system-ui, Georgia, 'Segoe UI', Menlo, Consolas, serif/sans-serif/monospace), no external images, no external SVG files, no libraries. Build all visuals with CSS, HTML, inline SVG, or <canvas>. - Works fully offline by double-clicking. No network requests. Responsive 320px->4K; include <meta name="viewport" content="width=device-width, initial-scale=1">. Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic where sensible. WOW BAR: genuinely stunning, premium, Awwwards-caliber, NOT generic. Distinctive art direction, curated palette, refined typography, deliberate composition, real intentional motion, delightful details, one signature effect. Handcrafted, unique, take design risks. For EACH page also create a matching .txt with the SAME base name containing: the exact full prompt used; a short TITLE; a one-paragraph DESIGN DESCRIPTION; a bulleted list of MAJOR VISUAL TECHNIQUES; and the INTENDED INTERACTION MODEL. Files to create: 064-steampunk.html + 064-steampunk.txt — Steampunk clockwork panel of meshing brass gears with a pressure gauge and steam puffs. Palette: brass, copper, sepia, warm glow. Signature: CSS gears rotating at meshing ratios, animated gauge needle, periodic steam puffs, riveted plate frame.

065-polar-light.html — Polar light curtains (aurora) waving above a snow-covered silhouette horizon. Palette: green/violet aurora, black pine silhouette, starry sky. Signature: canvas aurora curtains as vertical-gradient wave columns drifting, twinkling stars, soft glow.

066-equalizer.html — A cinematic audio equalizer driven by a WebAudio synth, with reactive glow and a mirror reflection. Palette: deep black with neon magenta/cyan spectrum. Signature: canvas or CSS bars animated from a WebAudio analyser (a played oscillator chord), bloom glow, reflective floor.

067-constellation.html — An interactive constellation map: tap stars to connect them, pan and zoom the night sky. Palette: deep midnight blue, soft star glow, gold connection lines. Signature: canvas starfield with drag-to-pan, click-to-connect stars, labeled constellations, parallax.

068-marbling.html — Paper marbling (Ebru) with fluid color swirls forming on the surface. Palette: vivid Ebru colors (crimson, gold, teal, cobalt) on cream. Signature: canvas fluid swirl simulation / animated gradient mesh that blooms into marbled patterns, 'lift sheet' reveal.

Build a standalone, self-contained HTML page: a glass prism on a windowsill in a dim room, projecting a soft rainbow onto the wall as light turns. Palette: dim warm room, cool window light, vivid projected spectrum. Signature: CSS/SVG prism, an animated light beam, a projected rainbow arc cast on the wall with soft bloom, slow color rotation. Constraints: one self-contained .html, ALL CSS in one <style> and ALL JS in one <script> (inline everything), ZERO external dependencies (no CDN, no external fonts — system stacks only, no external images/SVG files/libraries), works fully offline by double-clicking with no network requests, responsive 320px->4K, valid HTML5, Awwwards-caliber original art direction. Keep the scene ATMOSPHERIC — a moody room with a prism on a windowsill projecting a rainbow onto a wall (distinct from a graphic close-up of a prism).

Build a standalone, self-contained HTML page: an underwater shipwreck with god-rays, drifting marine snow, swaying seaweed and fish. Palette: deep teal, murky green, pale light shafts. Signature: canvas volumetric light shafts (gradients), drifting particles, swaying seaweed, a school of fish passing, vignette. Constraints: one self-contained .html, ALL CSS in one <style> and ALL JS in one <script> (inline everything), ZERO external dependencies (no CDN, no external fonts — system stacks only, no external images/SVG files/libraries), works fully offline by double-clicking with no network requests, responsive 320px->4K, valid HTML5, Awwwards-caliber original art direction.

Build a standalone, self-contained HTML page: a flower blooming — the stem grows, buds form, and petals unfurl in stages. Palette: spring pastels (soft pink, rose, leaf green). Signature: SVG/CSS stem growth, petals rotating and scaling open in layered stages, gentle sway, soft ambient particles. Constraints: one self-contained .html, ALL CSS in one <style> and ALL JS in one <script> (inline everything), ZERO external dependencies (no CDN, no external fonts — system stacks only, no external images/SVG files/libraries), works fully offline by double-clicking with no network requests, responsive 320px->4K, valid HTML5, Awwwards-caliber original art direction.

Build a standalone, self-contained HTML page: a city at night with randomly twinkling windows, neon signs and rain-slick reflections. Palette: midnight blue, warm window glow, neon pink/cyan. Signature: CSS skyline silhouette, randomized window twinkle, neon sign glow flicker, wet-street reflection plane. Constraints: one self-contained .html, ALL CSS in one <style> and ALL JS in one <script> (inline everything), ZERO external dependencies (no CDN, no external fonts — system stacks only, no external images/SVG files/libraries), works fully offline by double-clicking with no network requests, responsive 320px->4K, valid HTML5, Awwwards-caliber original art direction.

An abstract quantum probability-wave grid, a warped 3D-ish lattice of glowing nodes. Palette: deep space, electric blue/magenta probability waves. Signature: canvas perspective warping grid, animated probability waves rippling through nodes, glowing intersection particles.

An autumn forest with falling, swirling leaves and warm low sun. Palette: crimson, amber, gold, deep brown. Signature: canvas leaves that fall and tumble with wind, layered tree silhouettes, sun rays through branches, warm haze.

An interactive snow globe: shake it (click/drag) and snow swirls, then gently settles. Palette: winter blue-white snow, warm wooden base, soft glow. Signature: canvas snow particles with gravity and a shake impulse, glass globe refraction rim, drifting glitter.

A tornado/vortex particle simulation spinning with an updraft and debris. Palette: stormy grey/brown, ominous dark sky. Signature: canvas particles spiraling up a vortex with turbulence, ground dust, flickering light, mouse to steer.

Build the following standalone HTML page(s) as files in the current working directory. GLOBAL CONSTRAINTS (non-negotiable): - One self-contained .html file per page. ALL CSS in a single <style> block, ALL JS in a single <script> block. Inline everything. - ZERO external dependencies: no CDN, no external fonts (only system stacks), no external images, no external SVG files, no libraries/frameworks. Create all visuals with CSS, HTML, inline SVG, or <canvas>. - Must work fully offline by double-clicking the file. No network requests whatsoever. - Responsive from ~320px to 4K. Include <meta name="viewport" content="width=device-width, initial-scale=1">. - Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic structure where sensible. WOW QUALITY BAR (this is the point): - Genuinely stunning, premium, Awwwards/SiteInspire-caliber. NOT generic. Distinctive art direction, curated palette, refined typography, real motion, delightful details, one signature effect. Take real design risks. For this page: 077-light-painting.html + 077-light-painting.txt — Long-exposure light-painting strokes that draw themselves in the dark. Palette: deep black with glowing cyan/magenta/gold trails. Signature: canvas glowing stroke paths drawn over time with motion trails and bloom, mouse to add your own light strokes. Also create a matching .txt with the SAME base name containing: the exact full prompt you used; a short TITLE; a one-paragraph DESIGN DESCRIPTION; a bulleted list of MAJOR VISUAL TECHNIQUES; and the INTENDED INTERACTION MODEL. Numbering: three-digit prefix.

Build the following standalone HTML page(s) as files in the current working directory. GLOBAL CONSTRAINTS (non-negotiable): - One self-contained .html file per page. ALL CSS in a single <style> block, ALL JS in a single <script> block. Inline everything. - ZERO external dependencies: no CDN, no external fonts (only system stacks), no external images, no external SVG files, no libraries/frameworks. Create all visuals with CSS, HTML, inline SVG, or <canvas>. - Must work fully offline by double-clicking the file. No network requests whatsoever. - Responsive from ~320px to 4K. Include <meta name="viewport" content="width=device-width, initial-scale=1">. - Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic structure where sensible. WOW QUALITY BAR (this is the point): - Genuinely stunning, premium, Awwwards/SiteInspire-caliber. NOT generic. Distinctive art direction, curated palette, refined typography, real motion, delightful details, one signature effect. Take real design risks. For this page: 078-pottery.html + 078-pottery.txt — A terracotta pottery wheel forming a spinning vase from clay. Palette: clay brown, warm studio amber, soft shadow. Signature: canvas/CSS spinning pot built from a lathe profile, motion-blur wheel, clay texture, hands that shape the vessel. Also create a matching .txt with the SAME base name containing: the exact full prompt you used; a short TITLE; a one-paragraph DESIGN DESCRIPTION; a bulleted list of MAJOR VISUAL TECHNIQUES; and the INTENDED INTERACTION MODEL. Numbering: three-digit prefix.

Build the following standalone HTML page(s) as files in the current working directory. GLOBAL CONSTRAINTS (non-negotiable): - One self-contained .html file per page. ALL CSS in a single <style> block, ALL JS in a single <script> block. Inline everything. - ZERO external dependencies: no CDN, no external fonts (only system stacks), no external images, no external SVG files, no libraries/frameworks. Create all visuals with CSS, HTML, inline SVG, or <canvas>. - Must work fully offline by double-clicking the file. No network requests whatsoever. - Responsive from ~320px to 4K. Include <meta name="viewport" content="width=device-width, initial-scale=1">. - Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic structure where sensible. WOW QUALITY BAR (this is the point): - Genuinely stunning, premium, Awwwards/SiteInspire-caliber. NOT generic. Distinctive art direction, curated palette, refined typography, real motion, delightful details, one signature effect. Take real design risks. For this page: 079-wave-interference.html + 079-wave-interference.txt — A wave-interference / two-source ripple physics visualization with controls. Palette: deep blue water, white/cyan interference. Signature: canvas two-source interference field color-mapped, sliders for frequency/spacing, live ripple pattern. Also create a matching .txt with the SAME base name containing: the exact full prompt you used; a short TITLE; a one-paragraph DESIGN DESCRIPTION; a bulleted list of MAJOR VISUAL TECHNIQUES; and the INTENDED INTERACTION MODEL. Numbering: three-digit prefix.

Build the following standalone HTML page(s) as files in the current working directory. GLOBAL CONSTRAINTS (non-negotiable): - One self-contained .html file per page. ALL CSS in a single <style> block, ALL JS in a single <script> block. Inline everything. - ZERO external dependencies: no CDN, no external fonts (only system stacks), no external images, no external SVG files, no libraries/frameworks. Create all visuals with CSS, HTML, inline SVG, or <canvas>. - Must work fully offline by double-clicking the file. No network requests whatsoever. - Responsive from ~320px to 4K. Include <meta name="viewport" content="width=device-width, initial-scale=1">. - Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic structure where sensible. WOW QUALITY BAR (this is the point): - Genuinely stunning, premium, Awwwards/SiteInspire-caliber. NOT generic. Distinctive art direction, curated palette, refined typography, real motion, delightful details, one signature effect. Take real design risks. For this page: 080-meteor-shower.html + 080-meteor-shower.txt — A meteor shower streaking across a starry night, with occasional bright bolides. Palette: night blue, white/orange meteors with long tails. Signature: canvas meteors with glowing tails spawning randomly, star twinkle, a rare big fireball with smoke trail. Also create a matching .txt with the SAME base name containing: the exact full prompt you used; a short TITLE; a one-paragraph DESIGN DESCRIPTION; a bulleted list of MAJOR VISUAL TECHNIQUES; and the INTENDED INTERACTION MODEL. Numbering: three-digit prefix.

World-class creative technologist & designer. Build these standalone HTML page(s) as files in the current working directory. CONSTRAINTS (non-negotiable): - One self-contained .html per page. ALL CSS in one <style>, ALL JS in one <script>. Inline everything. - ZERO external dependencies: no CDN, no external fonts (system stacks only: system-ui, Georgia, 'Segoe UI', Menlo, Consolas, serif/sans-serif/monospace), no external images, no external SVG files, no libraries. Build all visuals with CSS, HTML, inline SVG, or <canvas>. - Works fully offline by double-clicking. No network requests. Responsive 320px->4K; include <meta name="viewport" content="width=device-width, initial-scale=1">. Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic where sensible. WOW BAR: genuinely stunning, premium, Awwwards-caliber, NOT generic. Distinctive art direction, curated palette, refined typography, deliberate composition, real intentional motion, delightful details, one signature effect. Handcrafted, unique, take design risks. For EACH page also create a matching .txt with the SAME base name containing: the exact full prompt used; a short TITLE; a one-paragraph DESIGN DESCRIPTION; a bulleted list of MAJOR VISUAL TECHNIQUES; and the INTENDED INTERACTION MODEL. File: 081-botanical-garden.html + 081-botanical-garden.txt — A herbarium / botanical garden index of pressed-flower specimen cards. Palette: sage green, cream, terracotta, faded ink. Signature: card grid of CSS-constructed pressed flowers, hover-to-bloom animation, serif specimen labels, archival layout.

World-class creative technologist & designer. Build these standalone HTML page(s) as files in the current working directory. CONSTRAINTS (non-negotiable): - One self-contained .html per page. ALL CSS in one <style>, ALL JS in one <script>. Inline everything. - ZERO external dependencies: no CDN, no external fonts (system stacks only: system-ui, Georgia, 'Segoe UI', Menlo, Consolas, serif/sans-serif/monospace), no external images, no external SVG files, no libraries. Build all visuals with CSS, HTML, inline SVG, or <canvas>. - Works fully offline by double-clicking. No network requests. Responsive 320px->4K; include <meta name="viewport" content="width=device-width, initial-scale=1">. Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic where sensible. WOW BAR: genuinely stunning, premium, Awwwards-caliber, NOT generic. Distinctive art direction, curated palette, refined typography, deliberate composition, real intentional motion, delightful details, one signature effect. Handcrafted, unique, take design risks. For EACH page also create a matching .txt with the SAME base name containing: the exact full prompt used; a short TITLE; a one-paragraph DESIGN DESCRIPTION; a bulleted list of MAJOR VISUAL TECHNIQUES; and the INTENDED INTERACTION MODEL. File: 082-chrome-sphere.html + 082-chrome-sphere.txt — A perfect chrome sphere floating and slowly rotating, reflecting a studio environment. Palette: mirror chrome with soft white/grey studio reflections. Signature: radial + conic gradients for a believable reflection, animated environment bands, soft contact shadow, subtle float.

World-class creative technologist & designer. Build these standalone HTML page(s) as files in the current working directory. CONSTRAINTS (non-negotiable): - One self-contained .html per page. ALL CSS in one <style>, ALL JS in one <script>. Inline everything. - ZERO external dependencies: no CDN, no external fonts (system stacks only: system-ui, Georgia, 'Segoe UI', Menlo, Consolas, serif/sans-serif/monospace), no external images, no external SVG files, no libraries. Build all visuals with CSS, HTML, inline SVG, or <canvas>. - Works fully offline by double-clicking. No network requests. Responsive 320px->4K; include <meta name="viewport" content="width=device-width, initial-scale=1">. Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic where sensible. WOW BAR: genuinely stunning, premium, Awwwards-caliber, NOT generic. Distinctive art direction, curated palette, refined typography, deliberate composition, real intentional motion, delightful details, one signature effect. Handcrafted, unique, take design risks. For EACH page also create a matching .txt with the SAME base name containing: the exact full prompt used; a short TITLE; a one-paragraph DESIGN DESCRIPTION; a bulleted list of MAJOR VISUAL TECHNIQUES; and the INTENDED INTERACTION MODEL. File: 083-fireworks.html + 083-fireworks.txt — A fireworks display with rocket launches and physics particle explosions. Palette: night sky, multicolor bursts, gold sparkle. Signature: canvas gravity particles, rocket ascent + burst, fading trails, crackle sparkle, click to launch your own.

World-class creative technologist & designer. Build these standalone HTML page(s) as files in the current working directory. CONSTRAINTS (non-negotiable): - One self-contained .html per page. ALL CSS in one <style>, ALL JS in one <script>. Inline everything. - ZERO external dependencies: no CDN, no external fonts (system stacks only: system-ui, Georgia, 'Segoe UI', Menlo, Consolas, serif/sans-serif/monospace), no external images, no external SVG files, no libraries. Build all visuals with CSS, HTML, inline SVG, or <canvas>. - Works fully offline by double-clicking. No network requests. Responsive 320px->4K; include <meta name="viewport" content="width=device-width, initial-scale=1">. Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic where sensible. WOW BAR: genuinely stunning, premium, Awwwards-caliber, NOT generic. Distinctive art direction, curated palette, refined typography, deliberate composition, real intentional motion, delightful details, one signature effect. Handcrafted, unique, take design risks. For EACH page also create a matching .txt with the SAME base name containing: the exact full prompt used; a short TITLE; a one-paragraph DESIGN DESCRIPTION; a bulleted list of MAJOR VISUAL TECHNIQUES; and the INTENDED INTERACTION MODEL. File: 084-misty-mountain.html + 084-misty-mountain.txt — Misty layered mountain ranges with drifting fog and a soft sun. Palette: soft blue-grey, pale luminous sky. Signature: stacked SVG ridge layers with parallax drift, animated fog bands, gentle sun glow, birds.

World-class creative technologist & designer. Build these standalone HTML page(s) as files in the current working directory. CONSTRAINTS (non-negotiable): - One self-contained .html per page. ALL CSS in one <style>, ALL JS in one <script>. Inline everything. - ZERO external dependencies: no CDN, no external fonts (system stacks only: system-ui, Georgia, 'Segoe UI', Menlo, Consolas, serif/sans-serif/monospace), no external images, no external SVG files, no libraries. Build all visuals with CSS, HTML, inline SVG, or <canvas>. - Works fully offline by double-clicking. No network requests. Responsive 320px->4K; include <meta name="viewport" content="width=device-width, initial-scale=1">. Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic where sensible. WOW BAR: genuinely stunning, premium, Awwwards-caliber, NOT generic. Distinctive art direction, curated palette, refined typography, deliberate composition, real intentional motion, delightful details, one signature effect. Handcrafted, unique, take design risks. For EACH page also create a matching .txt with the SAME base name containing: the exact full prompt used; a short TITLE; a one-paragraph DESIGN DESCRIPTION; a bulleted list of MAJOR VISUAL TECHNIQUES; and the INTENDED INTERACTION MODEL. Page 1: 085-neon-nature.html + 085-neon-nature.txt — A nature scene (a deer among flowers) rendered entirely in glowing neon tubes on black. Palette: pure black, neon magenta/cyan/lime. Signature: neon-tube SVG strokes with layered glow (blur/shadow), subtle flicker, dark reflective floor.

World-class creative technologist & designer. Build these standalone HTML page(s) as files in the current working directory. CONSTRAINTS (non-negotiable): - One self-contained .html per page. ALL CSS in one <style>, ALL JS in one <script>. Inline everything. - ZERO external dependencies: no CDN, no external fonts (system stacks only: system-ui, Georgia, 'Segoe UI', Menlo, Consolas, serif/sans-serif/monospace), no external images, no external SVG files, no libraries. Build all visuals with CSS, HTML, inline SVG, or <canvas>. - Works fully offline by double-clicking. No network requests. Responsive 320px->4K; include <meta name="viewport" content="width=device-width, initial-scale=1">. Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic where sensible. WOW BAR: genuinely stunning, premium, Awwwards-caliber, NOT generic. Distinctive art direction, curated palette, refined typography, deliberate composition, real intentional motion, delightful details, one signature effect. Handcrafted, unique, take design risks. For EACH page also create a matching .txt with the SAME base name containing: the exact full prompt used; a short TITLE; a one-paragraph DESIGN DESCRIPTION; a bulleted list of MAJOR VISUAL TECHNIQUES; and the INTENDED INTERACTION MODEL. Page 2: 086-paper-airplane.html + 086-paper-airplane.txt — A folded paper airplane gliding through layered clouds with parallax. Palette: sky blue, soft white clouds, warm sun. Signature: CSS paper plane on a looping flight path, parallax cloud layers, folded-paper shadows, drifting leaves.

World-class creative technologist & designer. Build these standalone HTML page(s) as files in the current working directory. CONSTRAINTS (non-negotiable): - One self-contained .html per page. ALL CSS in one <style>, ALL JS in one <script>. Inline everything. - ZERO external dependencies: no CDN, no external fonts (system stacks only: system-ui, Georgia, 'Segoe UI', Menlo, Consolas, serif/sans-serif/monospace), no external images, no external SVG files, no libraries. Build all visuals with CSS, HTML, inline SVG, or <canvas>. - Works fully offline by double-clicking. No network requests. Responsive 320px->4K; include <meta name="viewport" content="width=device-width, initial-scale=1">. Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic where sensible. WOW BAR: genuinely stunning, premium, Awwwards-caliber, NOT generic. Distinctive art direction, curated palette, refined typography, deliberate composition, real intentional motion, delightful details, one signature effect. Handcrafted, unique, take design risks. For EACH page also create a matching .txt with the SAME base name containing: the exact full prompt used; a short TITLE; a one-paragraph DESIGN DESCRIPTION; a bulleted list of MAJOR VISUAL TECHNIQUES; and the INTENDED INTERACTION MODEL. Page 3: 087-water-ripple.html + 087-water-ripple.txt — A water surface you can disturb: click/drag creates ripples that diffuse (height-field). Palette: clear blue water, caustic highlights. Signature: canvas height-field ripple diffusion on pointer interaction, caustic color shading, reflective surface.

World-class creative technologist & designer. Build these standalone HTML page(s) as files in the current working directory. CONSTRAINTS (non-negotiable): - One self-contained .html per page. ALL CSS in one <style>, ALL JS in one <script>. Inline everything. - ZERO external dependencies: no CDN, no external fonts (system stacks only: system-ui, Georgia, 'Segoe UI', Menlo, Consolas, serif/sans-serif/monospace), no external images, no external SVG files, no libraries. Build all visuals with CSS, HTML, inline SVG, or <canvas>. - Works fully offline by double-clicking. No network requests. Responsive 320px->4K; include <meta name="viewport" content="width=device-width, initial-scale=1">. Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic where sensible. WOW BAR: genuinely stunning, premium, Awwwards-caliber, NOT generic. Distinctive art direction, curated palette, refined typography, deliberate composition, real intentional motion, delightful details, one signature effect. Handcrafted, unique, take design risks. For EACH page also create a matching .txt with the SAME base name containing: the exact full prompt used; a short TITLE; a one-paragraph DESIGN DESCRIPTION; a bulleted list of MAJOR VISUAL TECHNIQUES; and the INTENDED INTERACTION MODEL. Page 4: 088-solar-eclipse.html + 088-solar-eclipse.txt — A solar eclipse: the moon transits and progressively covers the sun, revealing the corona. Palette: deep space, black moon disk, silver-white corona. Signature: CSS layered circles, radial corona glow (blur/radial gradient), animated coverage slider, ambient star dimming.

World-class creative technologist & designer. Build these standalone HTML page(s) as files in the current working directory. CONSTRAINTS (non-negotiable): - One self-contained .html per page. ALL CSS in one <style>, ALL JS in one <script>. Inline everything. - ZERO external dependencies: no CDN, no external fonts (system stacks only: system-ui, Georgia, 'Segoe UI', Menlo, Consolas, serif/sans-serif/monospace), no external images, no external SVG files, no libraries. Build all visuals with CSS, HTML, inline SVG, or <canvas>. - Works fully offline by double-clicking. No network requests. Responsive 320px->4K; include <meta name="viewport" content="width=device-width, initial-scale=1">. Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic where sensible. WOW BAR: genuinely stunning, premium, Awwwards-caliber, NOT generic. Distinctive art direction, curated palette, refined typography, deliberate composition, real intentional motion, delightful details, one signature effect. Handcrafted, unique, take design risks. For EACH page also create a matching .txt with the SAME base name containing: the exact full prompt used; a short TITLE; a one-paragraph DESIGN DESCRIPTION; a bulleted list of MAJOR VISUAL TECHNIQUES; and the INTENDED INTERACTION MODEL. FILE: 089-candy-land.html + 089-candy-land.txt — A sweet candy-land world with swaying lollipops, gumdrops and candy cane path. Palette: pastel pink, mint, lavender, candy yellow. Signature: CSS candy shapes, swaying lollipops, scrolling sweets parallax, playful bounce motion.

World-class creative technologist & designer. Build these standalone HTML page(s) as files in the current working directory. CONSTRAINTS (non-negotiable): - One self-contained .html per page. ALL CSS in one <style>, ALL JS in one <script>. Inline everything. - ZERO external dependencies: no CDN, no external fonts (system stacks only: system-ui, Georgia, 'Segoe UI', Menlo, Consolas, serif/sans-serif/monospace), no external images, no external SVG files, no libraries. Build all visuals with CSS, HTML, inline SVG, or <canvas>. - Works fully offline by double-clicking. No network requests. Responsive 320px->4K; include <meta name="viewport" content="width=device-width, initial-scale=1">. Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic where sensible. WOW BAR: genuinely stunning, premium, Awwwards-caliber, NOT generic. Distinctive art direction, curated palette, refined typography, deliberate composition, real intentional motion, delightful details, one signature effect. Handcrafted, unique, take design risks. For EACH page also create a matching .txt with the SAME base name containing: the exact full prompt used; a short TITLE; a one-paragraph DESIGN DESCRIPTION; a bulleted list of MAJOR VISUAL TECHNIQUES; and the INTENDED INTERACTION MODEL. Files to create: 2. 090-diamond.html + 090-diamond.txt — A faceted diamond that rotates and throws spectral light dispersion (fire) with sparkle. Palette: ice clear, rainbow fire, deep navy bg. Signature: SVG facets, animated light dispersion flashing spectrum colors, sparkle glints, slow rotation, contact glow.

World-class creative technologist & designer. Build these standalone HTML page(s) as files in the current working directory. CONSTRAINTS (non-negotiable): - One self-contained .html per page. ALL CSS in one <style>, ALL JS in one <script>. Inline everything. - ZERO external dependencies: no CDN, no external fonts (system stacks only: system-ui, Georgia, 'Segoe UI', Menlo, Consolas, serif/sans-serif/monospace), no external images, no external SVG files, no libraries. Build all visuals with CSS, HTML, inline SVG, or <canvas>. - Works fully offline by double-clicking. No network requests. Responsive 320px->4K; include <meta name="viewport" content="width=device-width, initial-scale=1">. Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic where sensible. WOW BAR: genuinely stunning, premium, Awwwards-caliber, NOT generic. Distinctive art direction, curated palette, deliberate composition, real intentional motion, delightful details, one signature effect. Handcrafted, unique, take design risks. For EACH page also create a matching .txt with the SAME base name containing: the exact full prompt used; a short TITLE; a one-paragraph DESIGN DESCRIPTION; a bulleted list of MAJOR VISUAL TECHNIQUES; and the INTENDED INTERACTION MODEL. Files to create: 3. 091-ember-fire.html + 091-ember-fire.txt — A campfire with glowing embers, rising sparks and heat shimmer. Palette: deep red/orange coals, ash grey, near-black. Signature: canvas rising embers/sparks with gravity, glowing coal gradient, heat-haze distortion, gentle flame flicker.

World-class creative technologist & designer. Build these standalone HTML page(s) as files in the current working directory. CONSTRAINTS (non-negotiable): - One self-contained .html per page. ALL CSS in one <style>, ALL JS in one <script>. Inline everything. - ZERO external dependencies: no CDN, no external fonts (system stacks only: system-ui, Georgia, 'Segoe UI', Menlo, Consolas, serif/sans-serif/monospace), no external images, no external SVG files, no libraries. Build all visuals with CSS, HTML, inline SVG, or <canvas>. - Works fully offline by double-clicking. No network requests. Responsive 320px->4K; include <meta name="viewport" content="width=device-width, initial-scale=1">. Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic where sensible. WOW BAR: genuinely stunning, premium, Awwwards-caliber, NOT generic. Distinctive art direction, curated palette, deliberate composition, real intentional motion, delightful details, one signature effect. Handcrafted, unique, take design risks. For EACH page also create a matching .txt with the SAME base name containing: the exact full prompt used; a short TITLE; a one-paragraph DESIGN DESCRIPTION; a bulleted list of MAJOR VISUAL TECHNIQUES; and the INTENDED INTERACTION MODEL. Files to create: 4. 092-fog-forest.html + 092-fog-forest.txt — A foggy mysterious forest with god-rays and drifting mist. Palette: muted green/grey, pale luminous light. Signature: layered tree silhouettes with parallax, drifting fog bands, volumetric light shafts, moody vignette.

An interactive N-body gravity simulation: drag to fling new bodies into orbit. Palette: deep space, glowing colored masses. Signature: canvas gravity integration, drag-to-launch with a trajectory preview, orbit trails, collision merges. Standalone, self-contained HTML page (093-gravity-orbits.html) — all CSS in one <style>, all JS in one <script>, no external dependencies, works offline, responsive 320px→4K, Awwwards-caliber art direction.

A golden honeycomb with dripping honey and busy bees. Palette: amber gold, warm honey, soft green meadow. Signature: CSS/SVG hex grid with honey fill animation, viscous dripping honey, flying bees on paths, warm glow. Standalone, self-contained HTML page (094-honeycomb.html) — all CSS in one <style>, all JS in one <script>, no external dependencies, works offline, responsive 320px→4K, Awwwards-caliber art direction.

Create a single, fully self-contained HTML5 page (all CSS and JavaScript inline, no CDN, no external fonts, no external images, no external SVG files, no libraries) titled "Hexapod — a crystal that grows itself". It is a crystallography showcase: a deep-icy-blue stage on which a fresh, six-fold snowflake dendrite grows itself from a single seed of ice. Pressing a button generates a brand-new procedurally unique crystal — no two alike — that draws its branches on line by line, from the centre outward, six times (once per symmetry arm). The mood is precise, cold and scientific yet delicate, like a museum exhibit of frozen light. Make it beautiful, responsive and offline-capable; the whole experience must live inside one file.

Create a single, fully self-contained HTML5 page (all CSS and JavaScript inline, no CDN, no external fonts, no external images, no external SVG files, no libraries) titled "Somnium — the Dreaming Jellyfish". It is an immersive, full-bleed canvas scene of a surreal jellyfish made of vapor and half-remembered light: a softly pulsing bell with ten thousand thread-like tentacles drifting through a sea of out-of-focus bokeh stars. Moving the pointer looks around (parallax); tapping makes the creature contract and bloom. The palette is dreamlike violet, peach and cyan on a deep indigo night. Make it hypnotic, luminous and beautiful; the entire experience — render loop included — must live inside one file and work offline.

World-class creative technologist & designer. Build this standalone HTML page as a file in the current working directory. CONSTRAINTS (non-negotiable): - One self-contained .html per page. ALL CSS in one <style>, ALL JS in one <script>. Inline everything. - ZERO external dependencies: no CDN, no external fonts (system stacks only: system-ui, Georgia, 'Segoe UI', Menlo, Consolas, serif/sans-serif/monospace), no external images, no external SVG files, no libraries. Build all visuals with CSS, HTML, inline SVG, or <canvas>. - Works fully offline by double-clicking. No network requests. Responsive 320px->4K; include <meta name="viewport" content="width=device-width, initial-scale=1">. Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic where sensible. - WOW BAR: genuinely stunning, premium, Awwwards-caliber, NOT generic. Distinctive art direction, curated palette, refined typography, deliberate composition, real intentional motion, delightful details, one signature effect. Handcrafted, unique, take design risks. PAGE: 097-kinetic-sculpture.html + 097-kinetic-sculpture.txt A Calder-esque kinetic mobile sculpture of balanced shapes gently swinging. Palette: primary colors (red/blue/yellow) on off-white, black wires. Signature: CSS hanging shapes on wires with pendulum/balance motion, gentle breeze sway, cast soft shadows.

World-class creative technologist & designer. Build this standalone HTML page as a file in the current working directory. CONSTRAINTS (non-negotiable): - One self-contained .html per page. ALL CSS in one <style>, ALL JS in one <script>. Inline everything. - ZERO external dependencies: no CDN, no external fonts (system stacks only: system-ui, Georgia, 'Segoe UI', Menlo, Consolas, serif/sans-serif/monospace), no external images, no external SVG files, no libraries. Build all visuals with CSS, HTML, inline SVG, or <canvas>. - Works fully offline by double-clicking. No network requests. Responsive 320px->4K; include <meta name="viewport" content="width=device-width, initial-scale=1">. Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic where sensible. - WOW BAR: genuinely stunning, premium, Awwwards-caliber, NOT generic. Distinctive art direction, curated palette, refined typography, deliberate composition, real intentional motion, delightful details, one signature effect. Handcrafted, unique, take design risks. PAGE: 098-lightning-storm.html + 098-lightning-storm.txt A lightning storm with branching bolts, screen flash and distant rumble. Palette: dark storm grey, white/violet bolts. Signature: canvas lightning bolt generation with random branching (midpoint displacement), bright flash overlay, subtle screen shake, click to summon a strike.

World-class creative technologist & designer. Build this standalone HTML page as a file in the current working directory. CONSTRAINTS (non-negotiable): - One self-contained .html per page. ALL CSS in one <style>, ALL JS in one <script>. Inline everything. - ZERO external dependencies: no CDN, no external fonts (system stacks only: system-ui, Georgia, 'Segoe UI', Menlo, Consolas, serif/sans-serif/monospace), no external images, no external SVG files, no libraries. Build all visuals with CSS, HTML, inline SVG, or <canvas>. - Works fully offline by double-clicking. No network requests. Responsive 320px->4K; include <meta name="viewport" content="width=device-width, initial-scale=1">. Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic where sensible. - WOW BAR: genuinely stunning, premium, Awwwards-caliber, NOT generic. Distinctive art direction, curated palette, refined typography, deliberate composition, real intentional motion, delightful details, one signature effect. Handcrafted, unique, take design risks. PAGE: 099-moonlight.html + 099-moonlight.txt A moonlight silver landscape with a reflective lake and calm night. Palette: silver, deep blue, pale luminous moon. Signature: moon glow halo, animated water reflection (gradient ripples), gentle surface waves, twinkling stars, soft mist.

World-class creative technologist & designer. Build this standalone HTML page as a file in the current working directory. CONSTRAINTS (non-negotiable): - One self-contained .html per page. ALL CSS in one <style>, ALL JS in one <script>. Inline everything. - ZERO external dependencies: no CDN, no external fonts (system stacks only: system-ui, Georgia, 'Segoe UI', Menlo, Consolas, serif/sans-serif/monospace), no external images, no external SVG files, no libraries. Build all visuals with CSS, HTML, inline SVG, or <canvas>. - Works fully offline by double-clicking. No network requests. Responsive 320px->4K; include <meta name="viewport" content="width=device-width, initial-scale=1">. Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic where sensible. - WOW BAR: genuinely stunning, premium, Awwwards-caliber, NOT generic. Distinctive art direction, curated palette, refined typography, deliberate composition, real intentional motion, delightful details, one signature effect. Handcrafted, unique, take design risks. PAGE: 100-zentangle.html + 100-zentangle.txt An intricate zentangle pattern meditative generator (black ink on white) with a 'grow pattern' animation and regenerate. Palette: black ink on warm white. Signature: canvas/SVG recursive ornamental tiles drawing themselves on, seamless tiling, regenerate button, calming slow draw.