Grok-4.5 HTML Collection

Title: Aurora Glass — Polar Light Studio

Creative prompt: Design a self-contained premium landing page with glassmorphism cards floating over animated aurora polar light gradients. Soft blur panels, frosted glass sticky nav, particle snow drift via canvas, cyan-purple-pink aurora ribbons, hero with dual CTAs, feature stats, and floating orbs. System fonts only, offline, no CDN.

Description: A night-sky product landing where frosted glass UI hovers above living aurora gradients. Cyan, violet, and pink light ribbons shift slowly while soft snow particles drift across the viewport. Cards lift on hover with luminous borders; a sticky pill nav uses backdrop blur; the hero centers gradient typography and dual calls to action. The piece feels calm, premium, and atmospheric—suited for creative studio or winter brand storytelling without any external assets.

Major visual techniques:
- Multi-stop radial gradients + CSS hue-rotate aurora animation
- Glassmorphism (rgba panels, backdrop-filter blur, inset highlights)
- Canvas particle snow with sine-wave drift
- Gradient text clipping for hero headline
- Soft floating orb panel with CSS keyframe motion
- Sticky frosted pill navigation
- Hover lift and glow on cards

Intended interaction model: Passive ambient motion (aurora + snow) with light hover feedback on cards and buttons. Primary engagement is scanning hero → feature cards → about strip; CTAs are visual anchors rather than multi-step flows. Scroll reveals glass layers over continuous background animation.

Title: NEON//NODE — Cyberpunk Interface

Creative prompt: Build a dark cyberpunk city UI with neon magenta and cyan accents, CRT scanlines, glitch text animation on the hero title, terminal-style navigation, holographic cards with shine sweeps, and a perspective grid floor beneath a CSS skyline. Fully self-contained, monospace system fonts, offline.

Description: A night-ops dashboard aesthetic for a fictional neon megacity. The viewport layers scanlines and vignette over a perspective floor grid and blocky skyline. The hero title “SYNTH CITY” runs a dual-color glitch effect; navigation mimics a clipped terminal chrome bar. Three holographic modules shimmer with diagonal light passes. Interaction is light—button clicks update a system status line—keeping the focus on atmosphere and surface craft.

Major visual techniques:
- Perspective CSS grid floor with pulse opacity
- CSS building skyline with window-line textures
- Full-screen scanline overlay + radial vignette
- Glitch pseudo-elements with clip-path and translate
- Holographic card gradients and shine animation
- Neon box-shadow glow and clipped header polygon
- Monospace terminal voice and uppercase micro-labels

Intended interaction model: Ambient world (grid, shine, glitch) plus discrete CTA clicks that rewrite a status feed. Hover brightens nav links and holocards. No multi-page flow—single-screen cyberpunk mood board with live “jack in” feedback.

Title: SoftPanel — Neumorphic Dashboard

Creative prompt: Create a soft neumorphic analytics dashboard on light gray: dual soft shadows (outset and inset), circular SVG progress rings, soft toggle switches, minimal bar chart, pill buttons, metric cards, sidebar nav, and a search field with inset well. System UI fonts, self-contained, offline.

Description: SoftPanel is a calm productivity dashboard rendered entirely in soft clay-like surfaces. Light gray base, dual-direction shadows for raised cards, and inset wells for search and inactive toggles. Three metric tiles open the layout; health rings animate stroke offsets; weekly bars and a job list fill the lower grid. Toggles and sidebar buttons provide tactile click feedback without harsh contrast—premium utility UI in the classic neumorphism language.

Major visual techniques:
- Dual soft box-shadows (light + dark) for extruded surfaces
- Inset shadows for wells, search, and toggle tracks
- SVG circular progress with stroke-dashoffset animation
- Soft pill buttons and gradient primary CTA
- Minimal CSS bar chart with alternating fills
- Toggle knobs with transform and state class
- Rounded 24px card radius system

Intended interaction model: Dashboard exploration—switch sidebar items, flip preference toggles, press pill actions. Rings animate on load; bars are static visualization. No routing; focus is tactile surface feedback and glanceable metrics.

Title: RAW / FORM — Brutalist Editorial Poster

Creative prompt: Swiss brutalist editorial poster page with huge black type, raw multi-column grid, harsh yellow/red/black palette, thick borders, circular stamp effects, asymmetric layout, continuous marquee ticker, hazard stripes, and chunky offset CTA button. Self-contained system fonts only.

Description: A print-first digital poster that rejects polish. Cream paper field, 12-column brutal grid with heavy black rules, masthead in pure yellow with enormous “RAW FORM” type, and a rotated red approval stamp. Manifesto blocks, hazard diagonal stripes, a pull quote, and a high-impact CTA with offset hard shadow complete the page. The marquee never stops chanting anti-smooth slogans—an editorial object as much as a landing page.

Major visual techniques:
- Thick black rule borders as structural system
- Extreme scale type and tight negative leading
- Hazard diagonal repeating-linear-gradient stripes
- Rotated circular stamp with hard box-shadow
- CSS marquee infinite translate
- Asymmetric 12-column spanning blocks
- Offset hard-shadow button (brutal press state)

Intended interaction model: Read like a poster—scan masthead, manifesto, numbered blocks, quote. Single CTA “stamps” the copy with a state change. Marquee is continuous passive motion; no soft hover aesthetics.

Title: Lumen Fluid — Liquid Morph

Creative prompt: Morphing liquid blob background using CSS animated organic border-radii and blur, pastel-to-deep teal / peach / lilac palette, floating frosted content cards that drift, morphing liquid CTA button, and SVG goo/metaball filter demo. Self-contained, system fonts, offline.

Description: A serene, fluid landing experience where large blurred color blobs constantly reshape across a soft pastel gradient sky. Frosted glass cards drift on staggered vertical loops; the primary CTA’s fill morphs its border-radius like a living pill. Below, three circles pass through an SVG goo filter and fuse into metaballs—demonstrating liquid UI language without external libraries. Ideal for wellness, creative tools, or generative brand moments.

Major visual techniques:
- Multi-blob morph via animated border-radius + transform
- Soft blur and multiply blend on background blobs
- SVG feGaussianBlur + feColorMatrix goo filter
- Frosted cards with backdrop-filter and drift keyframes
- Morphing gradient CTA border-radius loop
- Pastel multi-stop page gradient
- Pill nav with glass treatment

Intended interaction model: Mostly ambient—watch blobs and metaballs merge. Hover accelerates CTA morph; click toggles a “Merged” state. Light scroll reading of three concept cards; no multi-step application flow.

Title: AURELINE — Minimal Luxury

Creative prompt: Black and gold minimal luxury brand landing—elegant Georgia/system typography mix, thin gold gradient lines, slow staggered fade-in animations, product showcase cards with refined hover (border gold, diamond rotate), sparse whitespace, uppercase micro-labels, serif headlines. Fully self-contained offline HTML.

Description: Aureline is a quiet luxury house landing page: absolute black field, restrained gold accents, and generous empty space. The hero fades in line by line—eyebrow, italic-accent headline, sans subcopy, and a gold CTA that inverts on hover. Three product frames hold rotating diamond motifs as stand-ins for photography; hover lifts the card and warms the border. An italic atelier statement closes the page. The mood is gallery-like, slow, and expensive.

Major visual techniques:
- Black/gold high-restraint palette
- Serif display + system-ui micro type pairing
- Staggered fadeUp entrance keyframes
- Thin linear-gradient gold rules as section breaks
- Product frame double-border with diamond glyph
- Hover: border gold, lift, diamond rotate + glow
- Sparse padding and centered single-column story

Intended interaction model: Slow scroll appreciation. Hover products for refined micro-motion; CTA is a single anchor to the collection. No cluttered UI—interaction reinforces calm prestige rather than utility density.

Title: Astrum — Particle Constellation

Creative prompt: Full-screen canvas constellation of connected particles that react to mouse proximity, deep space navy with soft nebula gradients, constellation myth labels that cycle on reseed, interactive star-field toy with click pulse rings, HUD counters for particles and links. Self-contained, system fonts, offline.

Description: Astrum Field is an interactive deep-space toy. Hundreds of stars drift slowly and draw cyan links when near each other; the pointer repels nearby points and paints gold threads to them. A HUD tracks particle and link counts; myth names (Orion, Cassiopeia, Lyra…) label the mood and advance on “Reseed sky.” Clicking fires a golden pulse ring. The piece is pure canvas—no DOM animation clutter—meant to be played with, not merely viewed.

Major visual techniques:
- Full-viewport canvas particle system
- Distance-based line network (constellation mesh)
- Mouse repulsion + gold pointer links
- Soft radial nebula underpaint
- Twinkling opacity via sine phase
- Click expanding pulse ring
- Minimal fixed HUD and myth caption

Intended interaction model: Playful exploration—move pointer to reshape the web, click to pulse, reseed for a new myth and particle layout. Continuous real-time loop; primary joy is kinetic feedback, not forms or navigation.

Title: FOLIO — Editorial Magazine

Creative prompt: Magazine-style multi-column editorial layout with large drop caps, bordered pull quotes, horizontal scroll article rail, cream paper texture via CSS gradients and grain lines, ink-brown text, double-rule masthead, wine accent, justified body copy. Self-contained Georgia/system fonts, offline.

Description: Folio recreates a Sunday magazine feel in a single HTML file. A italic masthead and double rule open onto a two-column cover feature, then a three-column justified essay with a dramatic drop cap and a full-span pull quote. Below, a horizontal “In this issue” rail scroll-snaps through short feature cards. Paper warmth comes from layered gradients and subtle horizontal grain—no image assets. The tone is literary, patient, and print-aware.

Major visual techniques:
- CSS multi-column layout with column-rule
- ::first-letter drop cap styling
- Full-span pull quote with double rules
- Horizontal scroll-snap card rail
- Paper texture via gradients + repeating grain
- Double-line masthead borders
- Serif body + system-ui micro labels
- Wine red accent sparingly

Intended interaction model: Reading-first. Vertical scroll through editorial essay; horizontal drag/scroll through issue cards. Links are visual magazine affordances (not multi-page routing). Comfortable long-form pacing.

Title: Tidewell — Organic Waves

Creative prompt: Flowing multi-layer SVG wave bands with continuous and staggered motion, ocean teal palette, beach/nature spa aesthetic landing, sand-toned content sections, soft parallax-like glow, pill CTAs, feature cards with simple inline SVG icons. Self-contained system fonts, offline.

Description: Tidewell is a coastal spa landing built from stacked animated SVG waves. The hero sinks from deep ocean teal to mid-sea green, with three translucent wave paths sliding on independent loops into a sand-colored shore. A continuously scrolling wave strip separates hero from content; feature cards sit on warm white; a mid-page band reintroduces water for the reservation CTA. Motion is gentle and endless—organic, not flashy.

Major visual techniques:
- Multi-path SVG waves with staggered translate animations
- Full-width continuous marquee-style wave scroll
- Vertical ocean gradient hero
- Soft radial “light on water” overlay
- Sand paper content field vs teal water bands
- Rounded feature cards with gradient icon wells
- PreserveAspectRatio none for fluid wave scaling

Intended interaction model: Scroll-driven storytelling (hero → ritual features → reserve band). Waves animate continuously without input. Anchor links smooth-scroll between sections; hover lifts primary buttons. Calm, linear marketing flow.

Title: PHOSPHOR-80 — Retro Terminal

Creative prompt: Full-viewport CRT terminal aesthetic with green phosphor text and glow, scanline overlay, vignette, subtle flicker, animated boot sequence, interactive typed command demo (help, about, matrix, theme, neofetch), blinking block cursor, monospace system fonts. Self-contained offline HTML.

Description: PHOSPHOR-80 immerses the viewer in a classic green-screen terminal. On load, a staged POST/boot log types itself out; then an interactive prompt accepts commands. Scanlines, radial vignette, text-shadow phosphor bloom, and occasional flicker sell the CRT. Commands include help, matrix rain sample, amber/green theme switch, and a fake neofetch. Click anywhere to focus the input—pure nostalgia as a playable UI object.

Major visual techniques:
- Phosphor text-shadow multi-glow
- Repeating-linear-gradient scanlines + vignette
- Opacity flicker keyframes
- Staged boot sequence with timed print
- Blinking block caret
- Interactive command parser in vanilla JS
- Amber/green CSS variable theme swap
- Radial CRT tube gradient background

Intended interaction model: Watch boot, then type commands. Primary engagement is keyboard shell play (help, matrix, theme). Continuous ambient flicker/scanlines; clock updates live. Full-screen toy rather than multi-section marketing page.

Title: Solar System — Interactive Orbits

Full Prompt:
Interactive canvas/CSS solar system with orbiting planets, labels, click planet for info panel, dark space. Self-contained premium HTML design showcase: inline CSS/JS only, no CDN, system fonts, responsive, offline, stunning unique design.

Description:
A dark-space solar system visualization where eight planets orbit a glowing sun at scaled speeds. Orbit rings and name labels can be toggled; pause freezes motion. Clicking the sun or any planet opens a glassmorphic info panel with type, poetic description, and stats (orbit, diameter, day length, moons). Soft starfield and sun pulse set an immersive cosmos mood.

Techniques:
- Pure CSS orbital animation (rotate transforms on nested wrappers)
- Staggered animation-delay for natural phase offsets
- Radial gradients and multi-layer box-shadow for sun/planet glow
- Fixed starfield via layered radial-gradient dots
- Glass panel with backdrop-filter and slide-up transition
- Toggle UI for pause, orbit paths, and labels
- Responsive vmin-based system sizing
- Dataset-driven planet configuration in vanilla JS

Interaction Model:
- Click planet or sun → open detail panel, highlight selection
- Close panel via × button
- Pause / Resume orbit animations
- Toggle visible orbit paths
- Toggle always-on planet labels (labels also appear on hover)
- Hover planets for scale-up feedback

Title: Isometric City — Day / Night

Full Prompt:
CSS isometric buildings cityscape, hover buildings light up, day/night toggle, cute geometric city. Self-contained premium HTML design showcase: inline CSS/JS only, no CDN, system fonts, responsive, offline, stunning unique design.

Description:
A pastel geometric city rendered with CSS 3D transforms in classic isometric view. Colorful block buildings with window grids sit on a green ground plane crossed by roads. A day/night toggle swaps sky, ground, celestial bodies, and turns windows into warm glowing lights. Hovering a building brightens it and reveals a name label. Small trees and road lane dashes complete the toy-town feel.

Techniques:
- CSS 3D transforms (rotateX/rotateZ) for isometric projection
- Building cubes via separate top/front/side faces with CSS variables
- Window grids as nested divs with night-mode glow
- Smooth day/night theme via body class and CSS transitions
- Sun/moon and starfield opacity transitions
- JS layout generator for buildings and trees
- Soft UI toggle with sliding knob

Interaction Model:
- Click day/night toggle to switch lighting theme
- Hover buildings to brighten and show name tooltips
- Night mode: windows glow, road dashes appear, stars fade in
- Fully mouse-driven; no external assets

Title: Vinyl Player — Warm Studio

Full Prompt:
Realistic vinyl record player UI, spinning disc CSS animation, arm, playlist, play/pause, warm wood tones. Self-contained premium HTML design showcase: inline CSS/JS only, no CDN, system fonts, responsive, offline, stunning unique design.

Description:
A cozy listening-room turntable UI with wood-grain deck, grooved black platter, orange center label, and a tonearm that swings onto the record when playing. Play/pause controls a simulated progress bar and advances through a Side A playlist. Warm browns, cream type, and serif/sans pairing evoke analog hi-fi aesthetics without any real audio.

Techniques:
- CSS repeating-radial-gradient for vinyl grooves
- Infinite rotate animation with animation-play-state
- Tonearm transform transition on play state
- Layered wood gradients and inset highlights
- Playlist selection with active track styling
- Simulated progress via JS interval
- Responsive max-width deck card

Interaction Model:
- Play/pause button spins platter and lowers arm
- Click playlist tracks to switch selection
- Auto-advance when simulated track ends
- Progress bar fills during playback

Title: Weather Orb — Atmospheric UI

Full Prompt:
Beautiful weather app with animated gradient orb for conditions, particle rain/snow, elegant cards. Self-contained premium HTML design showcase: inline CSS/JS only, no CDN, system fonts, responsive, offline, stunning unique design.

Description:
An elegant weather interface centered on a large glossy gradient orb that changes color and particles by condition—sunny glow, rain streaks, snowflakes, storm gloom, or soft cloud gray. Temperature, condition line, humidity/wind/UV cards, and a five-day forecast update with each mode. Dark refined chrome with frosted glass cards.

Techniques:
- Multi-stop linear gradients per weather class
- Orb gloss via inset shadows and radial highlight
- CSS particle rain/snow with staggered fall animations
- Mode switcher updating JS data model
- Glass cards with border + backdrop-filter
- Lightweight forecast grid
- Responsive orb sizing with vmin/vw

Interaction Model:
- Tap condition chips (Sunny, Cloudy, Rain, Snow, Storm)
- Orb gradient and particles morph to match
- Metrics and forecast refresh with city label

Title: Typewriter Story — Ink on Paper

Full Prompt:
Scroll/click storytelling with typewriter effect, ink-on-paper, chapter markers, atmospheric illustration with CSS. Self-contained premium HTML design showcase: inline CSS/JS only, no CDN, system fonts, responsive, offline, stunning unique design.

Description:
A literary reading experience on a lined paper page with red margin rule and cream stock. Each chapter opens with a pure-CSS landscape illustration (night hills, morning fields, violet roofs) and types out prose character by character with a blinking cursor. Chapter markers, Continue, and Reveal all control pacing. Dark desk background frames the page like a private notebook.

Techniques:
- CSS lined paper (repeating-linear-gradient) and margin stripe
- Pure CSS landscape illustrations (gradients, hills, trees, moon/sun)
- JS typewriter with interval and cursor span
- Chapter state machine with illustration class swaps
- Serif body + sans UI chrome
- Soft paper shadow and aged paper tint

Interaction Model:
- Chapter buttons jump to chapters and restart typing
- Continue: if typing, finish current text; else next chapter
- Reveal all: instantly show full chapter text
- Blinking caret indicates active narration

Title: Geo Tessellation — Generative Symmetry

Full Prompt:
Animated geometric tessellation patterns, click to recolor, kaleidoscope symmetry, generative art feel. Self-contained premium HTML design showcase: inline CSS/JS only, no CDN, system fonts, responsive, offline, stunning unique design.

Description:
A full-canvas generative tessellation of triangles, hexagons, and diamonds on a dark stage. Patterns pulse and cycle through curated palettes. Kaleidoscope symmetry modes (1–12 folds) mirror the field into radial art. Clicking the canvas recolors cells near the cursor; toolbar actions recolor globally, cycle symmetry, freeze animation, or spawn a new seed pattern.

Techniques:
- Canvas 2D tessellation grid with hexagonal offset
- Deterministic PRNG seed for reproducible layouts
- Kaleidoscope via rotate + alternate scale mirrors
- Palette libraries and live color index shifting
- requestAnimationFrame pulse and color drift
- HiDPI canvas scaling
- Click-radius local recolor

Interaction Model:
- Click canvas → recolor nearby tiles + shift palette
- Recolor → new palette assignment
- Symmetry → cycle fold count
- Animate → toggle motion freeze
- New Pattern → new seed and cell layout

Title: Aurora Clock — Nebula Time

Full Prompt:
Artistic analog+digital clock over aurora/nebula, smooth second hand, date, ambient animation. Self-contained premium HTML design showcase: inline CSS/JS only, no CDN, system fonts, responsive, offline, stunning unique design.

Description:
A contemplative timepiece floating over a deep night sky with drifting aurora veils, soft nebula glows, and twinkling stars. The glass-like analog dial shows major/minor ticks, luminous hour and minute hands, and a mint second hand with continuous smooth motion. Below, a thin digital readout and full written date complete the dual display.

Techniques:
- Layered CSS gradients for sky and aurora ribbons
- Blurred animated aurora drift keyframes
- Starfield radial-gradient dots
- Analog hands via CSS rotate transforms
- requestAnimationFrame with fractional seconds for smooth second hand
- Glass clock face (border glow, inset light, backdrop-filter)
- Tabular-nums digital clock and locale-style date string

Interaction Model:
- Passive ambient piece — live system time
- Responsive face resizing recalculates tick positions
- No controls required; meditative observation

Title: Mono Swiss — Design System

Full Prompt:
Strict monochrome Swiss design system demo, modular grid, Helvetica-like system font, red accent only. Self-contained premium HTML design showcase: inline CSS/JS only, no CDN, system fonts, responsive, offline, stunning unique design.

Description:
A rigorous design-system showcase in the International Typographic Style: black/white/gray palette with a single signal red, hard 2px rules, 8px spacing unit, and Helvetica Neue stack. Includes hero with abstract modular composition, type scale rows, clickable color swatches, principle cards, button variants, and a 12-column grid demo. Toast feedback on interactions.

Techniques:
- CSS custom properties as design tokens
- Strict modular spacing (8px unit)
- 12-column CSS grid demos
- Hard borders instead of soft shadows
- Grotesk type hierarchy with negative tracking
- Single accent color rule (#E30613)
- Clipboard API for swatch hex copy
- Responsive collapse of multi-column layouts

Interaction Model:
- Click color swatches to copy hex (toast confirmation)
- Buttons fire toast status
- Nav links mark active section and anchor scroll
- Cards brighten on hover with red numeral accent

Title: Underwater Scene — Parallax Depth

Full Prompt:
Underwater parallax: bubbles (CSS/canvas), light rays, floating kelp SVG, deep blue-green, interactive fish following cursor. Self-contained premium HTML design showcase: inline CSS/JS only, no CDN, system fonts, responsive, offline, stunning unique design.

Description:
An immersive underwater vista in deep blue-green: god-ray light shafts, rising canvas bubbles, swaying SVG kelp, sandy floor, and floating plankton. A golden fish (plus a small school) smoothly follows the cursor with lag and horizontal flip. Layers parallax against pointer movement. Custom cursor ring completes the dive aesthetic.

Techniques:
- Multi-layer parallax via mouse-normalized transforms
- Canvas 2D bubble particles with sine drift
- Inline SVG kelp with CSS sway animation
- Conic-gradient animated light rays
- Lerped fish follow + school offset lag
- Custom cursor elements (hidden on small screens)
- Depth gradient background and sand mound

Interaction Model:
- Move mouse/touch pointer — primary fish and school follow
- Parallax shifts floor, sand, and kelp
- Ambient: continuous bubbles, rays, kelp sway
- Observe only; no click required

Title: Origami Fold — Paper Cards

Full Prompt:
Paper origami aesthetic, fold animations on cards, soft shadows, pastel paper colors, unfold on click. Self-contained premium HTML design showcase: inline CSS/JS only, no CDN, system fonts, responsive, offline, stunning unique design.

Description:
A calm paper studio of six pastel origami-inspired cards. Each sheet has a folded corner flap, soft drop shadows, and a subtle crease. Clicking a card tips the sheet in 3D space, peels the corner fold, and reveals longer folding instructions. Warm gray desk background and airy typography keep the mood handmade and gentle.

Techniques:
- CSS 3D perspective and rotateY/rotateX card tilt
- Corner fold flap with clip-path and rotateX open state
- Pastel paper color variants as modifier classes
- Layered soft shadows for paper lift
- Crossfade between cover meta and unfolded inner content
- Keyboard accessibility (Enter/Space, aria-expanded)
- Responsive auto-fit card grid

Interaction Model:
- Click card to toggle open/closed unfold state
- Keyboard focus + Enter/Space to toggle
- Multiple cards may stay open independently
- Hover not required; click is primary action

title: Data Galaxy — 3D Orbit Viz

full_prompt: |
  021-data-galaxy.html + .txt — 3D-ish data viz: orbiting nodes, animated connections, metrics floating in space, interactive graph (canvas).
  Self-contained only (inline CSS/JS, no CDN/external fonts/images/libs). System fonts. Responsive. Offline. Stunning unique design.
  Matching .txt: title, full prompt, description, techniques list, interaction model.

description: |
  A dark cosmic dashboard that renders a pseudo-3D force-style galaxy of metric nodes on HTML canvas.
  Nodes orbit on spherical shells with perspective projection, depth-sorted drawing, glowing cores, and pulsing curved links with traveling packet dots.
  Side panels list clusters and show telemetry for the selected node; floating latency labels drift through space.
  Controls support pause, pulse toggle, add node, and reset. Drag rotates the view; wheel zooms; click selects.

techniques:
  - Canvas 2D with manual 3D rotation (rotX/rotY) and perspective projection
  - Depth sorting for painter’s algorithm node/link draw order
  - Quadratic curve links with animated packet particles
  - Radial glow gradients and elliptical orbital guide rings
  - DPR-aware canvas resize
  - Pointer capture drag + wheel zoom
  - Hit-testing projected nodes for selection
  - Live FPS chip and oscillating “energy” metric
  - Pure CSS starfield + conic-gradient logo
  - System UI font stack, no external assets

interaction_model: |
  - Drag empty space: rotate galaxy
  - Scroll / pinch-equivalent wheel: zoom
  - Click node (canvas or list): select + focus telemetry
  - Pause / Resume: freeze orbital animation time
  - Pulse links: toggle traveling packets and link intensity
  - + Node: spawn additional orbiting metric (cap 24)
  - Reset: reseed 12-node graph

title: Pastel Bento — Soft Portfolio Grid

full_prompt: |
  022-pastel-bento.html + .txt — Soft pastel bento box grid portfolio, rounded modules, micro-interactions, Japanese soft UI.
  Self-contained only (inline CSS/JS, no CDN/external fonts/images/libs). System fonts. Responsive. Offline. Stunning unique design.

description: |
  A cream-canvas portfolio laid out as a Japanese-inspired bento grid of rounded pastel modules.
  Cards use soft gradients (pink, mint, lilac, butter, sky, peach), pill navigation filters, progress bar reveal,
  mood emoji pop, clay-soft toggles, chip hover scale, and toast feedback. Filters hide/show cards with a gentle fade.
  Emphasizes breathable spacing, hierarchy, and tactile micro-interactions without any external assets.

techniques:
  - CSS Grid bento with span utilities and responsive collapse
  - Soft multi-stop page gradients + white card surfaces
  - Inset highlight borders via ::after
  - Cubic-bezier hover lift and scale
  - Pill filter nav with category data attributes
  - Animated progress bar width
  - Custom toggle switches
  - Toast status pattern
  - Palette reshuffle via CSS custom properties
  - System / Japanese UI font stack

interaction_model: |
  - Filter pills: All / Work / Life / Play → show matching cards
  - CTAs: toast confirmations
  - Mood buttons: pop animation + toast
  - Soft mode / Sound switches: toggle state
  - Reshuffle: cycles pastel CSS variables

title: Ink Splash — Sumi-e Generative

full_prompt: |
  023-ink-splash.html + .txt — Sumi-e ink splash generative art on canvas, black ink on rice-paper cream, brush stroke animations, clear/redraw.
  Self-contained only (inline CSS/JS, no CDN/external fonts/images/libs). System fonts. Responsive. Offline.

description: |
  A contemplative digital sumi-e studio: cream rice-paper stage with fiber noise wash, vertical poem mark, and red seal stamp.
  Canvas tools generate ink splashes (radial blobs + spatters + flicks), pressure-sensitive brush strokes with dry-brush breakups,
  bamboo stalks with leaves, and a full auto composition. Freehand drag painting uses speed-based stroke width.

techniques:
  - Canvas radial-gradient ink blobs for soft bleed
  - Procedural splash spatters and quadratic flicks
  - Speed-derived brush pressure along pointer path
  - Segmented bamboo with node rings and leaf fills
  - CSS paper grain gradients + inset shadow frame
  - Vertical-rl poem typography
  - DPR-aware canvas sizing
  - Generative multi-stroke compositions

interaction_model: |
  - Drag on paper: freehand ink brush
  - Ink splash: random splash burst
  - Brush stroke: generative horizontal stroke path
  - Bamboo: draw a stalk composition
  - Clear: reset paper wash
  - Auto composition: full piece regenerate

title: Hologram UI — Sci-Fi HUD

full_prompt: |
  024-hologram-ui.html + .txt — Sci-fi holographic HUD, cyan wireframes, rotating wireframe globe (canvas/SVG), radar sweep, status readouts.
  Self-contained only (inline CSS/JS, no CDN/external fonts/images/libs). System fonts. Responsive. Offline.

description: |
  A monospaced cyan holographic operating system: scanline overlay, angled header clip-path, grid-filled panels with corner brackets.
  Center stage hosts a rotating wireframe globe with orbital rings and threat markers; radar uses a conic sweep and blips.
  Live system bars, vector readouts, target list, and comms log update on a timer. Action keys initiate scan, lock, and pulse.

techniques:
  - CRT scanline + moving scan band overlays
  - Clip-path HUD chrome and corner bracket pseudo-elements
  - CSS grid background on panels
  - Canvas wireframe sphere (lat/lon lines + depth skip)
  - Conic-gradient radar sweep
  - Text-shadow glow cyan aesthetic
  - Monospace system font stack
  - Animated readout bars and log stream

interaction_model: |
  - Passive: globe rotates, radar sweeps, metrics refresh
  - INIT SCAN: reshuffle target distances/threats + log
  - LOCK TARGET: lock highest-threat target
  - PULSE: EMP log event + pulse markers

title: Garden Zen — Rock Garden

full_prompt: |
  025-garden-zen.html + .txt — Zen rock garden interactive: raked sand patterns (canvas), place stones, calm greens/grays, meditation timer.
  Self-contained only (inline CSS/JS, no CDN/external fonts/images/libs). System fonts. Responsive. Offline.

description: |
  A digital karesansui (dry landscape) garden. The sand bed is a canvas with grain texture and moss accents.
  Rake mode draws multi-groove brush trails; place-stone mode drops irregular ellipses with circular ripple rakes;
  smooth mode softens marks. A 5-minute meditation timer and rotating koan quotes complete the calm UI in moss greens and warm grays.

techniques:
  - Canvas sand fill with noise grain
  - Multi-parallel groove raking along pointer path
  - Radial smooth erase
  - Procedural moss ellipses
  - Stone ellipses with radial gradients + drop shadows
  - Concentric circular rake rings around stones
  - Meditation countdown timer
  - Soft dark ambient page chrome

interaction_model: |
  - Rake: drag to rake sand
  - Place stone: click to place selected stone shape
  - Smooth: drag to blend sand
  - Clear sand: reset garden (removes stones)
  - Stone picker: select shape (enters place mode)
  - Start/Pause/Reset meditation timer

title: Chrome Metal — Liquid Luxury

full_prompt: |
  026-chrome-metal.html + .txt — Liquid chrome metallic UI, reflective gradients, dark industrial luxury, heavy product hero.
  Self-contained only (inline CSS/JS, no CDN/external fonts/images/libs). System fonts. Responsive. Offline.

description: |
  A dark industrial luxury product landing for “AETHER.” Animated liquid-chrome headline gradient, floating metallic orb hero with specular highlight and conic sheen rings,
  heavy inset shadows, polished CTA buttons, hover-lift spec cards, and a craft slab with fill meter.
  Pointer on the orb tilts the radial highlight for interactive reflectivity. SVG noise overlay adds film grain without external images.

techniques:
  - Multi-stop metallic background-clip text + shine animation
  - Radial/conic gradients for chrome sphere
  - Nested box-shadows (outer depth + inset bevels)
  - Floating and reverse spin ring decorations
  - Inline SVG feTurbulence noise overlay (data URI)
  - Interactive radial-gradient highlight tracking
  - Spec card hover elevation
  - Toast feedback CTAs

interaction_model: |
  - Move pointer over orb: specular highlight follows
  - Configure / Watch film / Reserve: toast messages
  - Hover specs: lift cards
  - Page loads: craft meter animates to 86%

title: Pixel Dungeon — RPG Map UI

full_prompt: |
  027-pixel-dungeon.html + .txt — Retro pixel-art style (CSS boxes) mini dungeon map UI, torch flicker, RPG inventory panel, 8-bit feel without images.
  Self-contained only (inline CSS/JS, no CDN/external fonts/images/libs). System fonts. Responsive. Offline.

description: |
  A tiny roguelike HUD built entirely from CSS boxes and monospace type. 12×10 dungeon grid with walls, floors, doors, exit, and flickering torch cells.
  Blue player square, red enemies, gold chests, HP/MP chunky bars, 4×2 inventory slots with pure-CSS item icons, combat log, and D-pad plus WASD/arrows movement.
  Bump-to-attack, loot chests, wait to regen MP, use selected items.

techniques:
  - CSS grid dungeon cells (no canvas/images)
  - Pseudo-element torch flame + flicker keyframes
  - Beveled inset panel chrome (box-shadow 8-bit)
  - Repeating-linear-gradient HP/MP bars
  - Pure CSS item icons (potion, key, sword, shield, scroll)
  - Keyboard + on-screen D-pad movement
  - Simple turn logic: move, bump attack, enemy wander
  - Courier New / monospace aesthetic

interaction_model: |
  - Arrow keys / WASD / D-pad: move
  - Bump enemy: attack; enemy may counter
  - ATTACK: hit adjacent enemy
  - WAIT: +5 MP
  - Inventory click: select item
  - USE ITEM: potion/scroll/equip effects
  - Step on chest: loot gold

title: Melody Visualizer — Spectrum

full_prompt: |
  028-melody-visualizer.html + .txt — Music visualizer simulation with Web Audio Oscillator OR pure canvas fake bars, beautiful spectrum, play button generates tones.
  Self-contained only (inline CSS/JS, no CDN/external fonts/images/libs). System fonts. Responsive. Offline.

description: |
  A neon gradient music visualizer. Play starts a scheduled triangle/sine oscillator melody through Web Audio with an AnalyserNode feeding the canvas.
  If audio is unavailable or user chooses fake mode, a synthetic spectrum drives the same renderers.
  Styles: neon bars, waveform, mirror cascade, radial bloom. Tempo, hue, and sensitivity sliders shape the look and feel.

techniques:
  - Web Audio API: AudioContext, Oscillator, Gain envelopes, AnalyserNode
  - Scheduled melodic pattern (scale + pattern indices)
  - Canvas frequency bars with HSL gradients
  - Waveform path + glow stroke
  - Radial spoke spectrum
  - Fake spectrum fallback for offline silent demo
  - DPR-aware canvas
  - Gradient UI chrome

interaction_model: |
  - Play / Stop melody
  - Mode toggle: Audio vs Canvas fake
  - Style select: bars / wave / mirror / radial
  - Tempo, color shift, sensitivity sliders

title: Constellation Nav — Star Map Portfolio

full_prompt: |
  029-constellation-nav.html + .txt — Navigation as constellation map - connect stars to navigate sections, space theme portfolio.
  Self-contained only (inline CSS/JS, no CDN/external fonts/images/libs). System fonts. Responsive. Offline.

description: |
  A space-themed portfolio where navigation is a live constellation canvas. Stars (Polaris, Vega, Lyra, Altair, Deneb) map to Home, Work, About, Lab, Contact.
  Clicking stars builds a glowing path, reveals section panels, and updates a path breadcrumb. Dim dashed guide shows the full figure; auto tour animates the journey.
  Drag empty sky to pan. Twinkling CSS starfield backdrop.

techniques:
  - Canvas star nodes with radial glow and sparkle cross
  - Path polyline with gold glow for visited route
  - Dashed guide constellation
  - Hit-testing + pan drag
  - Section show/hide with rise animation
  - Auto tour interval
  - CSS multi-layer sky + twinkle
  - Pulse animation on next suggested star

interaction_model: |
  - Click star: navigate to section, update path
  - Drag background: pan map
  - Reset path: return to Polaris / home
  - Auto tour: sequential path animation through all stars

title: Claymorphism — Soft Clay Landing

full_prompt: |
  030-claymorphism.html + .txt — Claymorphism soft 3D clay UI cards, bold pastel, chunky shadows, playful product landing.
  Self-contained only (inline CSS/JS, no CDN/external fonts/images/libs). System fonts. Responsive. Offline.

description: |
  A playful “ClayPop” product landing built entirely in claymorphism: dual outer shadows (dark + light), inset highlights, bold pastel surfaces, and oversized radii.
  Includes floating clay blobs, bobbing pricing card, feature grid, squishy switches, quantity counter, gradient footer CTA, toast feedback, and optional confetti burst.
  Buttons press inward with springy cubic-bezier easing for tactile feedback.

techniques:
  - Clay shadow stack: outer dark, outer light, inset light, inset dark
  - Bold pastel surface tokens (pink, mint, blue, yellow, lavender)
  - Spring hover/press transforms
  - Floating decorative clay shapes
  - Soft neumorphic-adjacent switches
  - Quantity stepper
  - DOM confetti particles via Element.animate
  - Toast notifications
  - Fully responsive product landing layout

interaction_model: |
  - CTAs / Sign up / Docs / Plan / Waitlist: toast messages
  - Extra squish toggle: bouncier feel messaging
  - Confetti mode: particle burst on toasts
  - + / − quantity, Add to cart
  - Pointer down/up pressed state on clay buttons

Title: Scroll Parallax Journey — Mountain to Sea

Full Prompt:
031-scroll-parallax-journey.html + .txt — Multi-section scroll storytelling mountain-to-sea journey with parallax layers CSS. Self-contained premium HTML (inline CSS/JS, no CDN/external fonts/images/libs). System fonts. Responsive. Offline. Stunning unique design. Matching .txt with title, full prompt, description, techniques list, interaction model.

Description:
A vertical scroll narrative that carries the viewer from alpine summit through forest and meadow to coastline and deep night sea. Multiple CSS parallax layers (sky, clouds, mountains, snow caps, forest, hills, waves, stars) move at independent speeds. Chapter cards fade and rise into view. A top progress bar and side chapter markers track position. Pure CSS gradients build the landscape; no images required.

Techniques:
- Multi-layer CSS parallax with data-speed and translate3d on scroll
- requestAnimationFrame-throttled scroll handler
- Gradient-only landscapes (mountains, forest stripes, meadow hills, coast, stars)
- Frosted glass content cards (backdrop-filter)
- Intersection-style visibility for chapter cards
- Fixed progress bar and chapter dot navigation
- Smooth scroll, system fonts (Georgia + system-ui)
- Fully self-contained, offline, responsive

Interaction Model:
- Scroll the page to travel through five chapters (Summit → Trees → Meadow → Coast → Depths)
- Side dots jump to chapters; active chapter highlights
- Progress bar fills with scroll depth
- Parallax layers shift at different rates relative to each section
- Content cards animate in when near viewport center

Title: Kinetic Type Playground

Full Prompt:
032-kinetic-type.html + .txt — Experimental kinetic typography playground - letters explode, morph, scramble on hover/click. Self-contained premium HTML (inline CSS/JS, no CDN/external fonts/images/libs). System fonts. Responsive. Offline. Stunning unique design. Matching .txt with title, full prompt, description, techniques list, interaction model.

Description:
An experimental type lab on a dark stage where each letter is a live particle. Modes include Explode (letters fly outward with blur and fade), Morph (skew and stretch), Scramble (glyph cycling), Wave (sequential bounce), and Scatter (offset rotations). Users type custom phrases and trigger effects via hover, per-letter click, or full-stage click. Soft noise overlay and accent pink/violet palette.

Techniques:
- Per-character DOM spans with data-original
- CSS transform/opacity/filter transitions with spring-like cubic-bezier
- Mode toolbar with active state
- Random polar explosion vectors
- Scramble interval with glyph alphabet
- Staggered wave animation via setTimeout
- Inline SVG noise data-URI background
- System UI font stack, clamp() responsive type

Interaction Model:
- Edit text in the input field to rebuild the stage
- Choose mode: Explode, Morph, Scramble, Wave, Scatter
- Hover letters for subtle live feedback
- Click a letter for mode-specific burst
- Click the whole stage in Explode to detonate all letters
- Reset restores original layout and text

Title: Frosted Glass Calendar

Full Prompt:
033-frosted-calendar.html + .txt — Beautiful frosted glass calendar month view, gradient BG, event pills, soft animations. Self-contained premium HTML (inline CSS/JS, no CDN/external fonts/images/libs). System fonts. Responsive. Offline. Stunning unique design. Matching .txt with title, full prompt, description, techniques list, interaction model.

Description:
A month-view calendar floating on an animated multi-stop gradient with soft color orbs. The card uses heavy glassmorphism (blur, saturate, translucent fill, inner highlight). Days show event dots; selecting a day reveals animated event pills with color swatches. Today is emphasized with a rose gradient pill. Month navigation and sample events are included for a polished product-UI feel.

Techniques:
- Glassmorphism: backdrop-filter blur + saturate, semi-transparent panels
- Animated mesh-like gradient background + floating blurred orbs
- CSS grid 7-column month layout
- Event pill enter animations with stagger
- Today gradient + selected ring states
- Sample event seed data keyed by date
- Soft hover scale on day cells
- System font stack, mobile-friendly width clamp

Interaction Model:
- Click ‹ › to change month
- Click a day to select and load its events panel
- Hover days and pills for subtle feedback
- Today auto-selected on load with demo events

Title: Neon Sign Shop

Full Prompt:
034-neon-sign-shop.html + .txt — Interactive neon sign builder/preview, color toggles, flicker, dark brick wall CSS background. Self-contained premium HTML (inline CSS/JS, no CDN/external fonts/images/libs). System fonts. Responsive. Offline. Stunning unique design. Matching .txt with title, full prompt, description, techniques list, interaction model.

Description:
A dark storefront wall built entirely with CSS brick patterns and vignette. Centered black metal frame holds a live neon message with multi-layer text-shadow glow and optional fill. Users type custom copy, pick from seven neon colors, toggle power/flicker/fill. Authentic irregular flicker keyframes simulate failing tubes.

Techniques:
- Pure CSS brick wall (overlapping angled gradients + mortar lines)
- Radial vignette for night mood
- Neon via text-shadow stacks and optional -webkit-text-stroke outline mode
- CSS variables for live color theming
- Flicker keyframe opacity/shadow drops
- Power-off muted state
- Control panel with color swatches and toggle buttons
- No external assets

Interaction Model:
- Type in Message field to update the sign instantly
- Click color swatches to recolor glow
- Power: on/off the neon
- Flicker: enable/disable tube flicker animation
- Fill: switch between outline-glow and solid neon lettering

Title: Paper Stack Notes

Full Prompt:
035-paper-stack.html + .txt — Stacked paper notes UI, drag or flip through notes, tape effects, realistic paper grain gradients. Self-contained premium HTML (inline CSS/JS, no CDN/external fonts/images/libs). System fonts. Responsive. Offline. Stunning unique design. Matching .txt with title, full prompt, description, techniques list, interaction model.

Description:
A desk of slightly rotated sticky/paper notes stacked with depth offsets. Each sheet has washi-tape at the top, subtle paper grain (grid + radial noise gradients), and unique pastel paper colors. Drag the top note far enough to send it to the back of the stack, or use Flip/Shuffle controls. Warm dark desk background.

Techniques:
- Absolute stack with z-index and progressive translate/rotate
- CSS paper textures via multi-layer gradients
- Translucent tape element with edge wear lines
- Pointer + touch drag with distance threshold to cycle stack
- Flip next and shuffle order controls
- Georgia body type for handwritten feel
- Five sample notes with distinct paper tints

Interaction Model:
- Drag top note; release past ~100px to cycle it under the stack
- Short drag snaps back
- Flip next button cycles without drag
- Shuffle randomizes stack order
- Touch-friendly for mobile

Title: Aurora Audio Rings

Full Prompt:
036-aurora-audio-rings.html + .txt — Concentric animated rings pulsing like sound, interactive frequency sliders, violet aurora. Self-contained premium HTML (inline CSS/JS, no CDN/external fonts/images/libs). System fonts. Responsive. Offline. Stunning unique design. Matching .txt with title, full prompt, description, techniques list, interaction model.

Description:
A violet aurora night scene with concentric glowing rings that breathe like an audio visualizer. A luminous core sits at the center. Frequency, amplitude, and ring-count sliders retune pulse speed, scale travel, and layer depth. A Beat hit button triggers a cascading radial punch. Pure CSS animations driven by custom properties—no Web Audio required.

Techniques:
- Multi-stop radial aurora background with hue-rotate drift
- Concentric absolutely positioned rings with CSS variables
- pulse keyframes using --s0/--s1 scale and opacity
- Slider-driven rebuild of duration, delay, amplitude
- Core beat animation synced to frequency
- Beat hit: forced scale burst then restore
- Violet/purple glow stack (box-shadow + border)
- Fully offline visual “audio” metaphor

Interaction Model:
- Drag Frequency to speed up/slow pulse
- Drag Amplitude to change expansion range
- Drag Rings (3–10) to add/remove layers
- Click Beat hit for a one-shot shockwave
- Pulse mode runs continuously by default

Title: Bauhaus Lab

Full Prompt:
037-bauhaus-lab.html + .txt — Bauhaus composition playground: circles squares triangles primary colors, drag or randomize. Self-contained premium HTML (inline CSS/JS, no CDN/external fonts/images/libs). System fonts. Responsive. Offline. Stunning unique design. Matching .txt with title, full prompt, description, techniques list, interaction model.

Description:
An interactive Bauhaus composition board: bold primary red, blue, yellow plus black and off-white on a warm paper stage. Users add circles, squares, and triangles, drag them freely, recolor the selection, randomize full posters, or clear the canvas. Hard borders and offset box-shadow echo print/poster craft.

Techniques:
- Geometric primitives via CSS (border-triangle technique for △)
- Pointer events drag with stage-relative positioning
- Selection outline + recolor swatches
- Randomize generator for size/position/color/type
- Bauhaus primary palette and brutalist chrome (3px black rules)
- Offset hard shadow on stage frame
- z-index bring-to-front on drag

Interaction Model:
- + Circle / Square / Triangle adds a shape
- Drag any shape across the canvas
- Click shape to select; footer swatches recolor it
- Randomize builds a fresh composition
- Clear empties the stage
- Click empty canvas to deselect

Title: Meteor Shower

Full Prompt:
038-meteor-shower.html + .txt — Canvas meteor shower night sky, shooting stars, mountain silhouette, wish on click. Self-contained premium HTML (inline CSS/JS, no CDN/external fonts/images/libs). System fonts. Responsive. Offline. Stunning unique design. Matching .txt with title, full prompt, description, techniques list, interaction model.

Description:
A full-viewport canvas night sky with twinkling stars, spontaneous shooting stars, layered mountain silhouettes, and a soft milky-way glow. Click anywhere (or use Make a wish) to cast a wish: clustered meteors and spark bursts answer, with a brief toast. HiDPI-aware, pure Canvas 2D.

Techniques:
- Canvas 2D with devicePixelRatio scaling
- Star field with sine twinkle
- Meteor trails via linear gradient strokes + glowing heads
- Particle sparks with gravity
- Procedural multi-layer mountain silhouettes
- Spontaneous ambient meteor spawn timer
- UI overlay with gradient fade and glass button
- Toast feedback for wishes

Interaction Model:
- Click sky to wish at cursor (meteors + sparks)
- Make a wish button fires center-sky burst
- Ambient meteors appear on their own
- Resize-safe full window canvas

Title: Soft Pomodoro

Full Prompt:
039-soft-pomodoro.html + .txt — Elegant pomodoro timer app UI, progress ring, modes, soothing sage/terracotta palette. Self-contained premium HTML (inline CSS/JS, no CDN/external fonts/images/libs). System fonts. Responsive. Offline. Stunning unique design. Matching .txt with title, full prompt, description, techniques list, interaction model.

Description:
A calm focus timer with Focus (25m), Short break (5m), and Long break (15m) modes. A large SVG progress ring drains as time passes. Sage greens for focus and terracotta for breaks. Session stats track completed pomodoros, focus minutes, and long-break cycles. Soft cream backdrop with gentle color washes; rounded glass-like card.

Techniques:
- SVG circle stroke-dasharray/offset progress ring
- Mode segmented control with palette swap
- setInterval countdown with pause/reset/skip
- Auto-advance: focus → short break; every 4th → long break
- Session statistics counters
- Toast chime on completion
- Sage/terracotta design system via CSS variables
- Self-contained, no audio files (visual chime only)

Interaction Model:
- Select mode: Focus / Short break / Long break
- Start / Pause main control
- Reset restores full duration for current mode
- Skip completes early and advances mode
- Stats update live as you work

Title: Fractal Tree

Full Prompt:
040-fractal-tree.html + .txt — Recursive fractal tree canvas art, wind sway animation, season color toggle, regenerate. Self-contained premium HTML (inline CSS/JS, no CDN/external fonts/images/libs). System fonts. Responsive. Offline. Stunning unique design. Matching .txt with title, full prompt, description, techniques list, interaction model.

Description:
A recursive fractal tree drawn on canvas with seeded randomness for organic branching. Tips bloom as seasonal leaves (spring blossoms, summer green, autumn fire, winter frost). Optional wind sways higher branches continuously. Regenerate grows a new specimen; depth slider controls recursion. Dark grounded atmosphere.

Techniques:
- Recursive branch generation stored as segment list
- Seeded PRNG (mulberry32) for reproducible-but-random trees
- Continuous wind via sin phase offset per branch
- Season palettes for background, trunk, and leaves
- Depth control rebuilds geometry
- Canvas HiDPI scaling
- Click canvas or Regenerate for new seed
- Leaf dots on outer depths

Interaction Model:
- Regenerate / click canvas: new tree seed
- Wind On/Off toggles sway animation
- Season buttons recolor leaves and sky
- Depth slider (7–12) increases branching complexity

Title: Luxury Watch — Dark Atelier

Full Prompt:
041-luxury-watch.html + .txt — Photorealistic CSS luxury watch face, ticking second hand, complications, leather strap suggestion, dark luxury.

Description:
A dark luxury watch showcase rendered entirely in CSS and lightweight JavaScript. The face features a gold-accented bezel, multi-layer case metal, luminous hour markers, hour/minute/second hands, date window, small chrono subdial, and a power-reserve arc. Stylized leather strap segments above and below the case complete the wristwatch silhouette against a near-black radial vignette. Real-time hands track the system clock with optional sweep or quartz-tick second motion.

Techniques:
- Nested radial/conic gradients for metal case, bezel, and dial depth
- Transform-origin hand rotation driven by requestAnimationFrame
- CSS box-shadow stacking for gold plating and glass shine overlay
- Absolute-positioned complications (date, chrono, power reserve SVG arc)
- Leather strap suggestion via linear gradients + stitch pattern
- System serif typography for maison branding (no external fonts)
- Responsive sizing with min(vw, px) for mobile/desktop dial

Interaction Model:
- Automatic live clock on load (no user action required)
- "Sweep" button: continuous fluid second hand
- "Quartz tick" button: stepped second hand aesthetic
- Hover states on control buttons with gold glow
- Fully offline, self-contained HTML file

Title: Mosaic Gallery — Generative Tiles

Full Prompt:
042-mosaic-gallery.html + .txt — Interactive mosaic/grid gallery of color tiles forming abstract art, click tiles to flip colors, generative.

Description:
An interactive abstract mosaic that fills a square frame with a generative color grid. Each tile is a double-faced card: click to 3D-flip and optionally re-roll a new palette color. Users choose palette (Sunset, Ocean, Neon, Earth, Mono), grid density, regenerate the whole composition, shuffle colors in place, or trigger a diagonal wave flip animation. The composition reads as generative wall art with a dark gallery chrome.

Techniques:
- CSS Grid with dynamic template columns/rows
- 3D card flip (transform-style: preserve-3d, rotateY, backface-visibility)
- Generative coloring via spatial gradients + sine noise
- Palette systems as named color arrays
- Staggered setTimeout wave animation by row+col index
- Accessible button tiles with focus-visible outlines
- System UI fonts; fully inline CSS/JS

Interaction Model:
- Click tile → flip face / sometimes recolor
- Palette select → rebuild mosaic
- Grid size select → rebuild denser/sparser grid
- Generate → new generative layout
- Shuffle → recolor without rebuild
- Wave flip → diagonal cascade of flips

Title: Rain Window — Cozy Café

Full Prompt:
043-rain-window.html + .txt — Rain on window pane effect canvas, blurred city lights behind glass, cozy cafe UI overlay.

Description:
A full-viewport atmospheric scene: canvas-drawn night city silhouettes with soft bokeh lights sit behind a rain-on-glass layer of falling streaks, rivulets, and occasional droplet beads. A frosted glass café menu card floats at the bottom with a cozy warm palette, steam animation, and drink list. Rain intensity and wind are adjustable. The effect aims for “looking out a café window on a rainy night.”

Techniques:
- Dual canvas layers (background city + rain glass)
- Radial bokeh lights with hue variance and pulse
- Building silhouette strip + vignette overlays
- Rain drops and quadratic-curve rivulets with wind offset
- CSS frosted panel (semi-transparent + backdrop-filter where available)
- CSS keyframe steam wisps
- requestAnimationFrame loop; DPR-aware canvas scaling
- System fonts only; no external assets

Interaction Model:
- Ambient animation runs continuously
- Light rain / Downpour / Gusts buttons change density and wind
- Resize-responsive canvas
- Passive reading of café menu UI overlay

Title: ASCII Portrait — Matrix Generator

Full Prompt:
044-ascii-portrait.html + .txt — Live ASCII art animation / matrix-style portrait generator from patterns, green/amber toggle.

Description:
A terminal-aesthetic live ASCII art engine that renders animated portraits and fields using density character ramps. Modes include a soft SDF-style face (eyes, blink, mouth, cheek shading with matrix rain outside the silhouette), a skull with teeth, and a full-screen noise/matrix field. CRT-like scanline overlay, green or amber phosphor palette, pause/resume, and monospace system font only.

Techniques:
- Pre-element ASCII grid rebuilt each frame via requestAnimationFrame
- Signed-distance-like fields for head, eyes, skull, jaw
- Character ramp mapping from luminance (dense & simple sets)
- CSS text-shadow phosphor glow + scanline animation
- Theme toggle via body class (green/amber)
- Matrix rain residual outside silhouette
- Courier New / monospace stack; no canvas required

Interaction Model:
- Continuous live animation on load
- Green / Amber phosphor toggle
- Face / Skull / Noise field mode buttons
- Pause / Resume animation

Title: Gradient Mesh Studio

Full Prompt:
045-gradient-mesh-studio.html + .txt — Interactive gradient mesh editor-like art page, drag color stops, export CSS snippet display.

Description:
A mini design tool for painting soft mesh-like gradients using stacked radial-gradient layers. Users drag circular color stops across a live canvas, edit colors from a sidebar list, adjust blur softness and base fill, add/remove stops, randomize, and export a ready-to-paste CSS snippet with a one-click copy action.

Techniques:
- Multi-layer CSS radial-gradient mesh approximation
- Pointer events with setPointerCapture for drag handles
- Normalized 0–1 stop coordinates mapped to % positions
- Live textarea CSS codegen
- Clipboard API with execCommand fallback
- Responsive two-column workspace (stacks on mobile)
- System UI fonts; pure inline CSS/JS

Interaction Model:
- Drag color stop handles on canvas
- Click swatch to open color picker
- Add stop / Randomize / Copy CSS
- Blur range slider and base color
- Remove stop (minimum two retained)

Title: Orbit Menu — Planetary Nav

Full Prompt:
046-orbit-menu.html + .txt — Circular orbiting navigation menu, planets as menu items, center logo, smooth physics-ish motion.

Description:
A space-themed circular navigation UI: a glowing core (“Nova”) sits at the center of dashed orbital rings while planet-like menu buttons (Home, Work, Lab, Journal, Contact, About) travel on multiple radii with continuous angular motion. Clicking a planet opens a frosted detail panel; clicking the core cycles orbit speed (normal / fast / slow). Starfield background and soft glows complete the solar-system metaphor.

Techniques:
- requestAnimationFrame angular integration for orbits
- Multiple orbital radii with independent speeds and phases
- CSS radial gradients for sun core and planet bodies
- Dashed orbit ring decorations
- Transform translate positioning from polar coordinates
- Speed multiplier as lightweight “physics” control
- Fixed starfield via multi-layer radial-gradient dots
- System fonts; fully self-contained

Interaction Model:
- Planets auto-orbit continuously
- Click planet → show description panel
- Close panel button
- Click core → cycle orbit speed (Nova / Fast / Slow)
- Hover/focus planet for glow emphasis

Title: Tarot Draw — Mystical Oracle

Full Prompt:
047-tarot-cards.html + .txt — Mystical tarot card draw experience, flip animations, ornate borders CSS, purple gold mystical.

Description:
A purple-and-gold mystical tarot experience for a three-card Past / Present / Future spread. Cards deal in with animation, show ornate backs with geometric pattern and sigil, then 3D-flip to reveal Major Arcana names, symbols, and position labels. Cards may appear reversed. An interpretation panel builds meaning as cards are revealed. Full deck subset of 21 Major Arcana with upright and reversed text.

Techniques:
- CSS 3D flip (perspective, preserve-3d, rotateY, backface-visibility)
- Ornate double-border gold frames via box-shadow / inset rings
- Diagonal repeating-linear-gradient pattern on card backs
- Staggered deal-in keyframe animation
- Fisher–Yates shuffle + random reverse chance
- Radial starfield and purple atmospheric gradients
- Georgia/Times system serif for oracle mood

Interaction Model:
- Draw reading → deal three new cards face-down
- Click card → flip to reveal
- Reveal all → flip every card
- Reset → clear table
- Interpretation text updates from revealed cards

Title: Blueprint Architect

Full Prompt:
048-blueprint-architect.html + .txt — Blueprint paper architectural drawing aesthetic, grid, technical annotations, building SVG plan.

Description:
A full-page architectural blueprint sheet: cyan grid paper, double-line title border, revision stamp, and a detailed SVG floor plan for a compact residence (living, kitchen, two beds, bath, closet, hall). Includes door swings, window marks, furniture blocks, dimension strings, north arrow, callout notes, room labels, layer toggles, area schedule, and legend—evoking printed construction documents entirely in HTML/CSS/SVG.

Techniques:
- CSS multi-scale grid background (major + minor)
- Nested sheet border frames via pseudo-elements
- Inline SVG plan geometry (walls, doors, windows, FF&E)
- Layer show/hide via button toggles on SVG groups
- Courier New technical monospaced type
- Blueprint color system (deep blue paper, pale ink, amber dims)
- Responsive plan + sidebar schedule layout

Interaction Model:
- Toggle layers: Walls, Doors, Windows, FF&E, Dims, Zone A highlight
- Passive reading of schedule, legend, and notes
- No external assets; offline blueprint showcase

Title: Firefly Forest

Full Prompt:
049-firefly-forest.html + .txt — Night forest silhouette, firefly particles follow mouse, soft bioluminescence, ambient.

Description:
A full-screen night forest scene painted on canvas: layered pine silhouettes, rolling ground, grass blades, mist, and a soft moon. Bioluminescent firefly particles wander with organic noise and gently steer toward the pointer/touch, pulsing in brightness with soft radial blooms and short trails. Ambient, meditative, and responsive—no external assets.

Techniques:
- Canvas 2D multi-layer environment (sky, moon, tree lines, ground)
- Particle system with phase-based glow pulsing
- Mouse/touch attraction with inverse-distance steering + damping
- Short position trails for motion blur suggestion
- Radial-gradient bioluminescent bloom per firefly
- DPR-aware canvas resize
- Vignette pass for cinematic focus
- System UI fonts for minimal HUD

Interaction Model:
- Move pointer / drag touch → fireflies flock toward cursor
- “More fireflies” adds particles
- “Calm” reduces swarm size
- Continuous ambient animation when idle

Title: Split Personality — Day / Night

Full Prompt:
050-split-personality.html + .txt — Split-screen dual aesthetic page (day/night or chaos/order), drag divider to reveal both designs.

Description:
A dual-aesthetic split-screen page: left/day is bright sky, sun, clouds, green hills, and airy “Order · Clarity” UI; right/night is deep violet sky, crescent moon, stars, dark hills, and “Mystery · Depth” UI. A draggable vertical divider with luminous handle and clip-path reveal lets the user wipe between personalities in real time—same content structure, opposite souls.

Techniques:
- CSS custom property --split driving night panel clip-path: inset()
- Dual full-bleed absolute panels stacked
- Pointer capture drag on handle (+ near-line grab)
- Keyboard arrow adjustment for accessibility (role=slider)
- Decorative pure-CSS sun, moon, clouds, hills, stars
- Frosted day card vs glowing night card
- System fonts; no images or CDNs

Interaction Model:
- Drag divider handle left/right to reveal day or night
- Click-drag near the split line
- Keyboard focus handle + ArrowLeft / ArrowRight
- Hint label: “Drag the divider”

Title: Lava Lamp — Hypnotic Blob Theater

Full Prompt:
Create a self-contained premium HTML page (inline CSS/JS only, no CDN, no external fonts/images/libs, system fonts, responsive, offline) that simulates a vintage lava lamp. Warm red-orange-purple molten blobs rise and morph inside a glass vessel with a chrome metallic base and cap. Hypnotic, atmospheric, dark room lighting. Interactive pause / speed / pulse heat controls.

Description:
A dark-room showcase centered on a classic lava lamp silhouette. Six CSS-animated blobs with radial gradients and glow shadows drift upward at staggered speeds, morphing border-radius as they travel. Chrome-gradient cap and base bookend a translucent vessel with glass highlight sheen. Ambient red under-glow and filmic vignette complete the vintage mood. Controls pause motion, accelerate the “warm rush,” or flash a heat pulse across the wax.

Techniques:
- Pure CSS keyframe rise/morph animations with staggered delays and durations
- Radial gradients + mix-blend-mode: screen for luminous wax
- Multi-stop linear chrome metal gradients with inset highlights
- Glass specular streak via pseudo-element overlay
- filter: drop-shadow and blur for soft bloom
- Class-toggled animation-play-state and duration overrides
- Responsive clamp sizing for vessel height/width
- System serif typography (Georgia) for retro elegance

Interaction Model:
- Passive: continuous hypnotic blob motion
- Pause / Resume button freezes or restarts all animations
- Warm Rush toggles faster animation durations
- Pulse Heat briefly brightens blobs and intensifies vessel glow

Title: Chess Arena — Marble & Wood

Full Prompt:
Create a self-contained premium HTML chess board UI (inline CSS/JS, no CDN/external assets, system fonts, responsive, offline). Elegant dark wood and marble aesthetic, Unicode chess pieces, move highlights, interactive piece select and legal-square moves. Not a full engine — playable two-human board with turn tracking, move log, flip, undo, and new game.

Description:
A refined match desk: an 8×8 board framed in deep walnut tones with warm light/dark wood squares and gold selection accents. Unicode pieces render in high-contrast black and ivory with subtle text-shadow. Selecting a piece highlights legal destinations (dots for empty squares, rings for captures) using simplified chess movement rules including pawn promotion to queen. A side panel shows whose turn it is, a scrolling SAN-style log, and controls for new game, flip board, and undo.

Techniques:
- CSS grid 8×8 board with wood color tokens
- Unicode chess glyphs (U+2654–U+265F)
- Inset box-shadow selection rings and pseudo-element move dots
- Gradient marble/wood panel chrome and gold border accents
- Vanilla JS board state matrix, ray-cast sliding pieces, knight leaps, pawn rules
- History stack for undo; board flip via index remapping
- Responsive min() board sizing; serif system type for classical feel

Interaction Model:
- Click own piece to select; legal squares highlight
- Click legal square to move; capture replaces target
- Pawn auto-promotes to queen on last rank
- New Game resets; Flip rotates view; Undo reverts last move
- Move log records each ply; turn banner updates

Title: Cloud Surfer — Dawn to Dusk

Full Prompt:
Create a self-contained premium HTML page (inline CSS/JS, no CDN/external assets, system fonts, responsive, offline) featuring a soft animated cloudscape. An airplane and birds fly across the sky. Include a dawn-to-dusk time-of-day slider that smoothly morphs sky gradients, sun position, cloud tint, and star field opacity.

Description:
A full-viewport sky theater. Soft cotton clouds drift horizontally on staggered loops while CSS wing-flap birds and a Unicode airplane cruise in parallax layers. A bottom glass-gradient control bar hosts a continuum slider from dawn through midday to dusk/night. JavaScript color-lerps multi-stop gradients, repositions the glowing sun, fades in stars, and retints clouds for golden hour and twilight.

Techniques:
- Multi-layer CSS cloud shapes via pseudo-element puffs
- Linear infinite drift and airplane path keyframes
- CSS bird silhouettes with alternate wing rotation
- Slider-driven color interpolation between sky stops
- Dynamic sun top/glow/opacity tied to time value
- Generated star field with opacity fade at night
- Gradient UI chrome over live sky; system-ui type

Interaction Model:
- Passive ambient flight and cloud drift
- Drag dawn–dusk slider to recolor the entire scene
- Phase label updates with named times of day

Title: Neon Dashboard — Cyber Finance

Full Prompt:
Create a self-contained premium HTML analytics dashboard (inline CSS/JS, no CDN, no external fonts/images/libs, system fonts, responsive, offline). Dark cyber-finance aesthetic with neon glowing KPI cards, SVG/canvas bar and line charts, instrument table, and live ticker feel.

Description:
“Neon Ledger” presents a dense but readable trading desk UI on a near-black canvas. Four edge-lit KPI cards show portfolio value, risk, net flow, and algo count with cyan/magenta/blue/amber neon text glow. Canvas draws a soft filled equity curve with gridlines and a luminous stroke, plus a sector bar chart with per-bar glow. A hot-instruments table and compact market ticker complete the cyber finance mood, with a blinking LIVE UTC clock.

Techniques:
- CSS custom properties for neon palette and panel chrome
- Gradient top-edge accents on KPI cards + text-shadow bloom
- Canvas 2D line chart with gradient area fill and shadowBlur stroke
- Canvas bar chart with vertical color gradients and labels
- Responsive CSS grid (4→2→1 columns)
- Tabular nums, monospace-adjacent data density
- Interval-driven clock and light data refresh redraws
- devicePixelRatio-aware canvas scaling

Interaction Model:
- Passive live clock and occasional equity redraw / KPI jitter
- Resize recalculates chart geometry
- Read-only data exploration (showcase dashboard, not a full app)

Title: Ma — Japanese Zen Typography

Full Prompt:
Create a self-contained premium HTML page (inline CSS/JS, no CDN/external assets, system fonts, responsive, offline) with Japanese-inspired minimal typography. Use vertical writing mode (CSS), generous empty space (ma), romanized poetic lines or unicode, and a red ink seal (inkan). Calm rice-paper palette.

Description:
A contemplative scroll layout on warm washi-like ground. The center column presents vertical-rl romanized title “shizukesa,” a single 間 kanji, and a staggered vertical poem. Left and right columns balance meta captions and verse with extreme negative space. A rotated red square seal with double-line inset stamp effect acts as interactive inkan. Clicking empty space leaves fading ink-splash ripples—honoring silence as material.

Techniques:
- CSS writing-mode: vertical-rl and letter-spacing for tategaki feel
- Asymmetric three-column grid with large breathing room
- System mincho stack with Georgia fallback
- Seal as CSS box with inset double border and rotation
- Soft paper gradients (no images)
- Poem swap array in JS; ink-splash DOM particles on click
- Horizontal rule as subtle gradient “horizon”

Interaction Model:
- Click red seal to cycle romanized free-verse poems
- Click empty page to cast fading ink splash at pointer
- Hover seal for gentle rotate/scale feedback

Title: Physics Balls — Gravity Toy

Full Prompt:
Create a self-contained premium HTML canvas physics toy (inline CSS/JS, no CDN/external libs, system fonts, responsive, offline). Colorful bouncing balls with gravity toggle, wall collisions, ball-ball collisions, click/drag to spawn, clear, shake, and rain controls.

Description:
A dark playfield canvas where glossy radial-gradient spheres fall under gravity, bounce off walls with energy loss, and resolve pairwise overlaps with simple impulse response. Users paint balls by clicking or dragging; a toolbar toggles gravity, clears the scene, applies random velocity shake, or rains a burst from the top. Soft highlight shading makes each ball feel dimensional without images.

Techniques:
- requestAnimationFrame simulation loop
- Gravity, damping, wall restitution
- Circle-circle collision separation + impulse
- Radial gradients for 3D-ish ball shading
- devicePixelRatio canvas scaling
- Pointer and touch spawn with drag spray
- Population cap to keep performance stable

Interaction Model:
- Click to drop a ball; drag to spray many
- Gravity ON/OFF toggles downward acceleration
- Clear removes all; Shake impulsively kicks velocities
- Rain spawns a cascade from above

Title: Stained Glass — Cathedral Light

Full Prompt:
Create a self-contained premium HTML page (inline CSS/JS, no CDN/external assets, system fonts, responsive, offline) of a stained-glass cathedral window as an SVG mosaic. Dark wooden frame, lead lines, colorful glass panes with gradient fills, light bloom on hover, and ambient light-mode buttons.

Description:
An arched window set in heavy carved wood sits in a dark nave. SVG paths form rose, lancet, medallion, and narrative panes filled with ruby, sapphire, gold, emerald, violet, and rose gradients. Thick lead strokes outline each tessera. Hovering a pane brightens it and tints a soft screen-blend bloom layer; click locks glow. Sunrise, moonlight, and still-light presets recolor the ambient hall and cascade pane illumination.

Techniques:
- Hand-authored SVG mosaic with linearGradient glass
- Lead-line strokes and mullion overlays
- CSS filter brightness/saturate transitions on .pane
- Screen-blend radial bloom overlay driven by data-color
- Wooden frame via layered box-shadow and gradient bevel
- Arch clip via border-radius percentages
- Ambient body background swaps for liturgical lighting moods

Interaction Model:
- Hover panes for color bloom and brightness
- Click pane to pin/unpin lit state
- Sunrise / Moonlight / Still Light buttons set room ambience

Title: Type Specimen — Interactive Poster

Full Prompt:
Create a self-contained premium HTML interactive type specimen poster (inline CSS/JS, no CDN/external fonts or assets, system fonts only, responsive, offline). Elegant editorial layout with size/weight/tracking/leading sliders, family switcher, pangrams, alphabet readout, and weight samples.

Description:
“Atelier Specimen” is a cream-paper editorial poster. A large editable hero word (“Hamburgefonstiv”) responds live to typographic controls. Meta chips show size, weight name, family, and tracking. Below: full alphabet, multi-weight Aa samples, and a dark control console with sliders plus system family and pangram presets (Georgia, Times, Palatino, System UI, italic, monospace).

Techniques:
- Classic print-poster grid and hairline rules
- Live DOM style binding from range inputs
- System font stacks only (no webfonts)
- Weight name mapping (Thin→Black)
- Dual-scale UI: serif specimen + system-ui chrome
- Responsive clamp-friendly hero sizing via slider
- Pangram and family button groups with active states

Interaction Model:
- Drag size, weight, tracking, leading sliders
- Click family buttons to restack fonts
- Click P1–P4 to swap pangram text
- Specimen, pangram, alphabet, and samples update immediately

Title: Moon Phases — Lunar Observatory

Full Prompt:
Create a self-contained premium HTML astronomical moon phase visualizer (inline CSS/JS, no CDN/external assets, system fonts, responsive, offline). Realistic CSS/canvas moon, phase scrubber across a full lunation, star field, lunar-calendar preset chips, illumination readout.

Description:
A night-sky observatory UI. Twinkling stars fill the void behind a large cratered moon sphere. A canvas overlay computes an orthographic terminator so the illuminated fraction tracks a continuous phase parameter from new → full → new. A scrubber with New / Quarter / Full ticks drives the phase; circular mini-moon buttons jump to classic named phases. Glow intensity scales with illumination; soft facts caption the synodic month.

Techniques:
- Procedural star field with CSS twinkle animation
- CSS radial gradients for lunar surface + crater speckles
- Canvas ImageData terminator via sphere normals · sun direction
- Phase angle mapping t∈[0,1] → names and ~illumination %
- Mini-canvas icons for calendar chips
- Responsive circular stage; system-ui light type on deep navy
- devicePixelRatio-aware main moon canvas

Interaction Model:
- Drag phase scrubber for continuous lunation
- Click calendar discs for named phases (New, quarters, full, crescents/gibbous)
- Passive star twinkle; glow follows illumination

Title: Candy Shop — Kawaii Landing

Full Prompt:
Create a self-contained premium HTML hyper-saturated candy/kawaii e-commerce landing page (inline CSS/JS, no CDN/external assets, system fonts, responsive, offline). Bouncy chunky buttons, product cards, sprinkle particle effects, playful pastel-to-neon palette.

Description:
“Sugar Pop Candy Shop” is a maximalist pastel storefront. Gradient wordmark, sticker badge, and neubrutalist buttons with offset shadows bounce on hover/press. Four product cards feature pure-CSS candy illustrations (bubblegum sphere, mango blob, rainbow square, blue star drop) with bob animations. A rainbow marching promo banner, floating emoji décor, and click-triggered sprinkle particle rain sell the playful mood. Cards flash “Added!” on tap.

Techniques:
- Hyper-saturated CSS gradients and background-clip text
- Neubrutalist thick borders + offset box-shadow buttons
- Cubic-bezier springy hover/active transforms
- Pure CSS candy shapes (radial gradients, pseudo stripes)
- DOM sprinkle particles with CSS fall/rotate keyframes
- Ambient interval sprinkles + burst on CTA/card click
- Auto-fit product grid; system-ui with playful fallbacks

Interaction Model:
- Shop Candies CTA bursts sprinkles and winks label
- Sprinkle Party rains multicolor confetti sprinkles
- Product card click: local sprinkle burst + temporary “Added!” price chip
- Continuous soft ambient sprinkle drizzle

Title: Circuit Board — TracePulse

Full Prompt:
061-circuit-board.html + .txt — Animated PCB/circuit traces lighting up, emerald on black, tech product page, pulse signals along paths SVG.

Description:
A premium tech product landing page for a fictional high-speed interconnect chip (TracePulse TP-9000). The page sits on a deep black background with emerald green PCB aesthetics: fixed SVG circuit traces with animated pulse signals racing along copper paths, blinking solder pads, and chip silhouettes. A product card shows a stylized IC with animated pins and monospace specs. Hero copy, feature grid, and navigation complete a polished silicon-product marketing feel. Fully self-contained, responsive, offline.

Techniques:
- Fixed full-viewport SVG circuit layer with stroke-dasharray / stroke-dashoffset pulse animations
- drop-shadow filters for emerald glow on active traces
- CSS grid hero + product card with gradient borders and scan-line accent
- Layered radial gradients + subtle grid mask for PCB substrate
- Staggered animation-delay on multiple signal paths and pad blinks
- System UI / mono fonts only; no external assets
- Responsive collapse of nav and feature columns

Interaction Model:
- Passive ambient animation (continuous pulse signals, pin and pad blinks)
- Hover states on nav links, CTA buttons, and feature cards
- Anchor navigation (#product, #features, #specs)
- No pointer-driven canvas interaction; visual immersion is automatic

Title: Sand Dunes — Mirage Oasis

Full Prompt:
062-sand-dunes.html + .txt — Desert sand dunes layered gradients, heat shimmer, golden hour, minimal oasis resort landing.

Description:
A serene golden-hour landing page for a fictional desert oasis resort (Mirage). Layered SVG sand dunes with warm gradient fills stack from deep amber to pale cream against a sunset sky. A glowing sun, heat-shimmer overlays (scanlines + soft wave blur), and elegant serif/system typography create a minimal luxury travel aesthetic. A cream content panel with three ritual cards sits below the hero. Fully offline and self-contained.

Techniques:
- Multi-layer SVG dune paths with linearGradient fills (depth via z-index and height)
- Fixed sky gradient (orange → peach → cream)
- Radial sun with multi-layer box-shadow glow + gentle scale breathe
- CSS heat shimmer: repeating-linear-gradient + mix-blend-mode + vertical animation
- Soft blurred shimmer-wave band for mirage distortion
- Serif display + system sans body; cream CTA pill
- Rounded cream panel overlapping dune horizon

Interaction Model:
- Ambient animations only (sun breathe, heat shimmer, shimmer wave)
- Hover on nav links and primary CTA
- Anchor links to stay / rituals / desert sections
- No canvas or pointer-driven effects

Title: Glitch Gallery — ERROR//PORTFOLIO

Full Prompt:
063-glitch-gallery.html + .txt — Glitch art photo frames (CSS only abstract), RGB split, noise, destructive digital aesthetic portfolio.

Description:
A dark cyber-glitch portfolio gallery built entirely with CSS — no images, no canvas. Six abstract “frames” use layered gradients, conic sweeps, ASCII glyph corruption, scan bars, and chromatic double-pseudo-elements to simulate broken digital media. Global noise (SVG feTurbulence data-URI) and CRT scanlines overlay the page. Logo and hero titles use RGB split / clip-path glitch animations. Hovering a frame triggers a stepped “destroy” animation. Monospace system fonts throughout.

Techniques:
- Pseudo-element RGB channel split (content: attr(data-text) + clip-path)
- Full-page noise via inline SVG fractalNoise data-URI + steps animation
- CRT scanline overlay with repeating-linear-gradient
- Six unique pure-CSS abstract compositions (gradients, mix-blend-mode, clip-path)
- Hover-triggered multi-step filter/transform corruption
- Monospace UI chrome (window dots, file names, hex-flavored labels)
- Responsive auto-fill gallery grid

Interaction Model:
- Ambient glitch animations on logo, titles, and art panels
- Hover frames to intensify corruption (destroy keyframes)
- Visual-only; no forms or navigation beyond browsing the grid

Title: Water Ripple — Stillwater

Full Prompt:
064-water-ripple.html + .txt — Click-to-ripple water surface canvas, serene lake, reflections, interactive.

Description:
An interactive full-viewport canvas experience of a serene evening lake. Soft sky gradient, mountain silhouettes and their reflections, a pale moon with a vertical light column, and gentle ambient wave lines. Clicking or tapping the surface spawns expanding dual-ring ripples that fade naturally. Dragging leaves a trail of smaller rings; ambient drips keep the surface alive. UI overlay (logo, serif hero, “Still the surface” control) uses pointer-events so the canvas remains fully interactive beneath. Self-contained, no libraries.

Techniques:
- Full-window canvas with devicePixelRatio scaling
- Linear/radial gradients for sky, moon, reflection column
- Procedural mountain fill paths (above + mirrored below horizon)
- Ripple objects: radius growth, alpha decay, dual stroke rings
- Ambient sine wave lines and timed auto-drips
- Pointer + touch + drag trail input
- Layered HTML UI with pointer-events: none / auto

Interaction Model:
- Click / tap: create primary + secondary ripple at point
- Drag: trail of lighter ripples
- “Still the surface” button clears all ripples
- Continuous ambient drip and wave animation

Title: Infinite Zoom — Hypnagogia

Full Prompt:
065-infinite-zoom.html + .txt — Infinite zoom fractal-ish or nested squares animation illusion, hypnotic, color shift.

Description:
A hypnotic full-screen illusion of infinite zoom through nested geometric frames (squares, circles, or diamonds). Sixteen staggered CSS rings scale from near-zero to large while fading, creating a continuous tunnel. Colors cycle through a curated palette per ring, with a global hue-rotate shift for slow spectrum drift. Central glowing core, vignette, and speed/shape controls. Pure DOM + CSS animation with minimal JS — no canvas, no external assets.

Techniques:
- Staggered CSS scale animations with negative animation-delay for seamless loop
- CSS custom properties for duration, delay, glow colors
- preserve-3d / flex-centered tunnel container
- Periodic hue-rotate filter on stage for color shift
- Shape modes: rounded squares, circles, rotated diamonds
- Rebuild rings on speed/shape change
- System fonts; dark violet base aesthetic

Interaction Model:
- Ambient infinite zoom (automatic)
- Slow / Medium / Fast speed buttons
- Toggle shape: squares → circles → diamonds
- Visual immersion; no pointer drawing

Title: Studio Mixer — DeskControl

Full Prompt:
066-studio-mixer.html + .txt — Audio mixer board UI with sliders/knobs, LED meters animated, dark pro audio aesthetic.

Description:
A dark pro-audio mixer console UI (DeskControl MC-8) with eight channels (seven channel strips + master). Each strip includes a multi-segment LED level meter (green/yellow/orange/red), a draggable gain knob, a vertical fader with metallic cap, and a mute toggle. Meters animate with organic sine + noise when “playing.” Transport bar: Stop, Play, Rec, Randomize. Chassis styling uses metallic gradients, inset shadows, and a power LED. Visual only — no Web Audio. Fully self-contained and touch-friendly.

Techniques:
- DOM-built channel strips with CSS metallic / chassis gradients
- 12-segment LED meters colored by threshold bands
- Knob via CSS custom property --angle and pseudo-element pointer
- Vertical fader with absolute-positioned cap + pointer/touch drag
- requestAnimationFrame meter simulation (phase, gain, fader, mute)
- Master channel visual differentiation
- Horizontal scroll on narrow viewports

Interaction Model:
- Drag knobs (vertical mouse/touch) to set gain
- Drag fader caps or click track to set level
- Mute buttons toggle channel silence
- Play / Stop / Rec control meter activity
- Randomize assigns new fader/gain values

Title: Botanical Print — Herbarium

Full Prompt:
067-botanical-print.html + .txt — Vintage botanical illustration page, scientific labels, specimen cards, parchment, delicate line SVG plants.

Description:
A vintage scientific herbarium plate page (Hortus Siccus) on parchment-toned paper. Four specimen cards each feature delicate pure-SVG line illustrations (fern, wood anemone, holly, timothy-grass) with soft botanical fills, binomial Latin names, common names, and structured metadata (family, habitat, collection date/place). Double-rule borders, paper grain noise, institutional header, and plate numbering evoke 19th-century natural history books. Serif + system sans typography. Fully offline.

Techniques:
- Parchment stack: multi-stop gradients + inset warm shadow + SVG noise overlay
- Double-rule frame via pseudo-element border
- Hand-crafted SVG botanical paths (stroke-only + soft fill-soft class)
- Specimen card grid with hover lift
- Scientific label layout: italic binomial, accent common name, dt/dd meta grid
- Warm earth palette (ink, olive line, sienna accent)
- Responsive single-column collapse

Interaction Model:
- Passive reading experience
- Subtle hover elevation on specimen cards
- No forms or animated plants; static museum-print feel

Title: Radar Scope — AIRWATCH

Full Prompt:
068-radar-scope.html + .txt — Military/air traffic radar scope animation, blips, sweep, dark green CRT, data sidebar.

Description:
A military/ATC-style PPI radar console (AIRWATCH SCOPE-7) with dark green CRT phosphor aesthetics. Circular canvas scope shows range rings, compass labels, rotating sweep beam with glow, contact blips (friendly green / priority amber), heading ticks, and fading trail persistence. Sidebar track file lists sorted contacts with bearing, range, and speed; live UTC clock and sweep angle. Scanlines and specular CRT glass overlay. Simulation only — no live data. Self-contained monospace UI.

Techniques:
- Canvas circular PPI with DPR scaling
- Rotating sweep line + radial gradient wedge
- Contact motion (bearing/range rates) with sweep-triggered phosphor illuminate
- Trail buffer with exponential alpha decay
- CRT scanlines and vignette via CSS pseudo-elements
- Live sidebar table refreshed on interval
- Responsive stack: scope above sidebar on narrow screens

Interaction Model:
- Fully ambient (continuous sweep and moving contacts)
- Read-only track table; no click targeting
- Visual simulation for showcase immersion

Title: Marble Sculpture — Galleria

Full Prompt:
069-marble-sculpture.html + .txt — Luxury marble texture CSS, classical museum landing, serif captions, subtle parallax pedestals.

Description:
A luxury classical museum landing page (Galleria) featuring three abstract marble sculptures built entirely from CSS: a bust, a column fragment, and a geometric torso. Layered gradients simulate Carrara marble veins, specular highlights, and soft stone shadowing. Each work sits on a multi-tier pedestal with serif titles, gold uppercase artist lines, and quiet captions. Scroll parallax gently offsets hero and pedestal units. Warm museum-wall background, gold accent rules, quote band, and visit CTA. No images or external fonts.

Techniques:
- Multi-layer linear-gradients for marble body + vein lines
- Inset box-shadows for carved highlight / occluded edge
- Specular sheen via ::before gradient overlay
- Pedestal pseudo-elements (plinth tiers)
- Hover lift on sculpture stage
- Scroll-linked translate3d parallax (respects prefers-reduced-motion)
- Georgia/system typography hierarchy; gold #a68b5b accents

Interaction Model:
- Scroll for subtle parallax on pedestals and hero
- Hover pedestal units for lift / brightness
- Anchor navigation to collection and visit
- Ambient museum calm — no autoplay motion beyond scroll response

Title: Code Rain — Violet Gold

Full Prompt:
070-code-rain.html + .txt — Matrix-style code rain canvas but original color (violet/gold), messages form in rain, interactive density.

Description:
A Matrix-style code rain reimagined in violet and gold. Full-viewport canvas draws katakana/ASCII glyph streams with bright heads, gold spark chance, and purple trails. Hidden English phrases (WAKE UP, ORACLE ONLINE, etc.) materialize in gold across columns, then drift and fade. UI glass panel offers density and speed sliders, Spawn message, and Burst. Click/tap the canvas to locally accelerate and gild columns. Soft vignette and translucent fade trail. Fully offline, no libraries.

Techniques:
- Canvas column streams with per-column speed, length, glyph cache
- Semi-transparent frame clear for phosphor trail
- Head glow via shadowBlur (violet / gold)
- Active message objects painted in bold gold over rain
- Density via column skip + random gate; speed multiplier
- Click/touch burst mutates nearby column state
- DPR-aware resize; monospace system font metrics

Interaction Model:
- Ambient rain + periodic auto messages
- Density / Speed range sliders
- Spawn message button forces a gold phrase
- Burst button multi-point disturbance
- Click or tap canvas for local burst

Title: Sunset Gradient Lab

Full Prompt:
071-sunset-gradient-lab.html + .txt — Interactive sunset sky painter, sliders for time of day, birds silhouettes, horizon. Self-contained premium HTML design showcase. Inline CSS/JS only, system fonts, responsive, offline, stunning unique design.

Description:
An interactive sky studio that morphs a full-viewport gradient from deep night through dawn, golden hour, and blue hour. A radiant sun tracks a day-arc, stars fade in after dusk, and a silhouetted mountain ground anchors the horizon. Canvas-drawn bird silhouettes flap and drift across the sky. Glassmorphic controls let you dial time, flock size, horizon height, and color warmth, with one-tap presets for Dawn, Noon haze, Golden, Dusk, and Night.

Techniques:
- Multi-stop CSS linear gradients driven by JS palette interpolation
- Hex color mixing / warmth bias on RGB channels
- Day-curve sun elevation via sine of normalized time
- Star field opacity keyed to night ranges
- Canvas 2D bird silhouettes with wing-flap quadratic curves
- Frosted glass control panel (backdrop-filter + translucent border)
- Clip-path irregular mountain silhouette for ground
- Responsive clamp() sizing and fluid layout
- Preset buttons synced to active slider proximity

Interaction Model:
- Drag Time of day to morph sky palette, sun height, and star visibility
- Adjust Bird flock to spawn/despawn silhouette birds
- Horizon height raises/lowers the ground mass and horizon hairline
- Warmth shifts palette toward amber or cool blue
- Preset chips jump to signature moments of the day
- Birds animate continuously offline; no network required

Title: Crystal Prism — Lumina

Full Prompt:
072-crystal-prism.html + .txt — Light through prism rainbow dispersion SVG/CSS, gem facets 3D-ish, jewelry brand feel. Self-contained premium HTML design showcase. Inline CSS/JS only, system fonts, responsive, offline.

Description:
A luxury jewelry brand landing for “Lumina” centered on a triangular crystal prism. A white light beam enters from the left; seven spectral rays fan out in red-to-violet dispersion. The prism is an SVG facet model with gradient faces, internal caustic lines, and pointer-drag 3D-ish rotation. Supporting gem cards (rose cut, brilliant, cabochon, emerald) reinforce the fine-jewelry aesthetic with soft gold accents on a deep violet void.

Techniques:
- SVG multi-face prism with linear gradients and glow filter
- CSS flex spectrum “rays” with staggered shimmer animation
- Beam pulse keyframes and dynamic box-shadow intensity
- JS-driven incidence angle, dispersion scaleY, brightness
- Pointer drag rotateX/rotateY on prism wrapper
- Continuous spin toggle via requestAnimationFrame
- Gem facet SVG icons with hover lift cards
- Editorial serif typography and wide letter-spacing brand UI
- Dark radial stage lighting for gallery drama

Interaction Model:
- Drag the prism to tilt facets in 3D-ish space
- Rotate Prism toggles auto-spin
- Pulse Spectrum restarts ray shimmer bursts
- Sliders: incidence angle, dispersion spread, beam intensity
- Hover gem cards for elevation and gold border glow

Title: City Transit Art — Subway Map

Full Prompt:
073-subway-map.html + .txt — Artistic metro/subway map interactive, lines light on hover stations, city transit art. Self-contained premium HTML, inline CSS/JS, system fonts, responsive, offline.

Description:
An art-print style metropolitan transit map on warm paper cream. Five color-coded lines (Crimson, Harbor, Garden, Amber, Violet) weave past a soft river and park. Sixteen stations act as transfer nodes; hovering a station illuminates every route that passes through it. A sidebar legend isolates a single line; a dark status bar and floating tooltip name the stop and transfers. Bold Swiss-poster typography sells “city transit as wall art.”

Techniques:
- SVG path network with data-stations / data-line attributes
- CSS opacity + drop-shadow “lit” route states
- Line-focus mode dimming non-selected routes
- Transfer hubs with larger station rings
- Fixed tooltip following pointer coordinates
- Sidebar line isolation controls
- Decorative park/river shapes under the network
- Sticky black info bar for selection state
- Responsive scrollable map stage (min-width SVG)

Interaction Model:
- Hover station → light connected lines + tooltip
- Click station → pin selection in status bar
- Hover route segment → emphasize that line
- Legend: All lines or isolate A–E
- Fully offline SVG/CSS/JS; no external tiles

Title: Ink Bleed — Watercolor Toy

Full Prompt:
074-ink-bleed.html + .txt — Watercolor ink bleed simulation canvas, color picker, paper texture, art toy. Self-contained premium HTML, inline CSS/JS, system fonts, responsive, offline.

Description:
A desktop art toy that simulates wet ink blooming on cold-press paper. Multi-layer organic stamps build soft watercolor edges; residual “blooms” keep spreading after the stroke. Paper grain is a CSS multiply overlay. Tools include palette swatches, free color picker, brush size, bleed, wetness, a water-drop splash, and clear. Dark studio chrome frames the sheet like a workbench.

Techniques:
- Canvas 2D multi-pass soft stamps with jagged radial blobs
- Bleed-controlled random offset layers and alpha falloff
- Post-stroke bloom particles that expand and fade
- Speed-sensitive pressure (slow strokes lay denser ink)
- CSS paper texture: noise-like gradients + fine line grain, multiply blend
- Touch and mouse pointer painting with devicePixelRatio scaling
- Water drop spawns clustered bloom emitters
- Toolbar swatches syncing to color input

Interaction Model:
- Drag on paper to paint strokes
- Adjust size / bleed / wet for dry brush vs wash
- Pick color via swatches or color input
- Water drop adds random wet blooms
- Clear paper resets the sheet

Title: WaveOS 95 — Retro Desktop

Full Prompt:
075-retro-os.html + .txt — 90s desktop OS parody window manager, draggable windows, icons, nostalgic teal/gray UI. Self-contained premium HTML, inline CSS/JS, system fonts, responsive, offline.

Description:
A full-viewport parody of classic 1990s windowing systems: teal wallpaper, gray beveled chrome, blue gradient title bars, desktop icons, Start menu, taskbar with clock, and nested window apps (My Computer, Documents, Notepad readme, “The Internet,” and panic.exe). Windows drag by the title bar, minimize to the taskbar, maximize, and close. panic.exe triggers a playful BSOD overlay dismissed by any key.

Techniques:
- Classic 3D beveled borders via light/dark edge colors
- Gradient title bars; inactive gray vs active blue
- Pointer capture drag for window move
- z-index stacking focus model
- Taskbar button sync with open windows
- Start menu with vertical banner
- CSS-only “pixel” icon drawings (no images)
- BSOD full-screen monologue overlay
- Live system clock in tray

Interaction Model:
- Double-click desktop icons to open apps
- Drag title bars to reposition windows
- Min / max / close title-bar buttons
- Taskbar buttons restore/focus windows
- Start menu launches programs or Shut Down alert
- panic.exe → fake blue screen; key/click dismisses

Title: Abyss — Bioluminescent Deep

Full Prompt:
076-bioluminescent-deep.html + .txt — Deep sea abyss, bioluminescent creatures canvas, dark navy, glowing jellies, depth parallax. Self-contained premium HTML, inline CSS/JS, system fonts, responsive, offline.

Description:
A full-screen canvas dive into the midnight zone. Radial-glow jellies pulse with tentacles; slender photophore fish drift with soft bloom. Marine snow particles fall; distant cyan orbs suggest deeper light. Mouse position drives subtle parallax layers. Controls dial depth (darkness + meter readout), creature count, and glow intensity. Editorial serif title and glass panel keep the UI as quiet as the trench.

Techniques:
- Canvas 2D radial gradients for soft bioluminescence
- Ellipse jelly bells + multi-segment sine tentacles
- Layer-sorted draw order for pseudo-depth
- Mouse-based parallax offsets per layer
- Depth-linked background gradient and darkness overlay
- Glow slider scaling alpha and shadowBlur
- Marine snow particle field
- Vignette CSS overlay and frosted control panel

Interaction Model:
- Move mouse for parallax drift
- Depth slider darkens water and updates −meters readout
- Creatures rebuilds jelly/fish populations
- Glow boosts luminescence strength
- Continuous ambient animation offline

Title: Golden Ratio — φ Spiral

Full Prompt:
077-golden-ratio.html + .txt — Golden ratio spiral educational art, fibonacci squares animated, interactive reveal. Self-contained premium HTML, inline CSS/JS, system fonts, responsive, offline.

Description:
An educational art canvas that constructs Fibonacci squares into a golden rectangle and traces quarter-circle arcs into a golden spiral. Sliders control how many squares appear and the reveal progress through the construction; Animate plays a build-up. Live Fₙ/Fₙ₋₁ ratio shows convergence to φ. Toggle spiral and squares independently. Gold-on-charcoal gallery aesthetic with concise definition cards.

Techniques:
- Fibonacci sequence generation in JS
- Iterative square packing with rotating attachment sides
- Canvas scaled fit of bounding box with padding
- Reveal by index + partial alpha on the leading square
- Quarter-circle arcs per square for spiral approximation
- Ratio readout with tabular figures
- Toggle layers (spiral / squares)
- requestAnimationFrame reveal animation
- Responsive DPR-aware canvas

Interaction Model:
- Steps slider: 3–14 Fibonacci squares
- Reveal slider: scrub construction progress
- Animate: auto-play reveal from 0→100%
- Spiral / Squares toggles
- Read φ approximation update as n grows

Title: Polaroid Wall

Full Prompt:
078-polaroid-wall.html + .txt — Scattered polaroid photos (CSS abstract images/gradients), pin board cork, tilt hover. Self-contained premium HTML, inline CSS/JS, system fonts, responsive, offline.

Description:
A corkboard memory wall covered in tilted polaroid frames. Each “photo” is a pure CSS gradient or conic pattern—no external images. Push-pin spheres and washi tape hold frames askew; handwritten captions sit in the white border. Hover (or focus) eases rotation to 0°, scales up, and lifts the card with a deeper shadow. Sticky notes add diary flavor. On small screens, frames reflow into a flex wrap.

Techniques:
- Multi-layer cork texture (radial grain + fine lines)
- CSS custom properties for --rot, --img, --pin per card
- Gradient / conic / repeating-linear abstract photos
- Hover transform: rotate(0) scale(1.12) with springy cubic-bezier
- Pin radial-gradient spheres and translucent tape variants
- Stacking z-index on click
- Handwritten system font stack for scrapbook tone
- Responsive: absolute scatter → flex grid on mobile

Interaction Model:
- Hover/focus polaroid to straighten and enlarge
- Click to bring frame forward
- Scroll the corkboard; fully offline decorative art

Title: HIGH VOLTAGE — DANGER

Full Prompt:
079-voltage-danger.html + .txt — High voltage industrial warning aesthetic, hazard stripes, electric arcs SVG animation, bold. Self-contained premium HTML, inline CSS/JS, system fonts, responsive, offline.

Description:
An industrial warning poster brought to life: black-and-yellow hazard chevrons, thick caution frame, hexagonal danger badge with lightning bolt, and Impact typography shouting HIGH VOLTAGE. Between metal terminals, multi-bolt SVG arcs re-jag every frame with glow filters. Voltage, chaos, and frequency sliders shape the discharge; Strike flashes the screen; Overload reddens arcs and stutters white flashes. PPE chips and “authorized personnel” banner complete the plant-floor fiction.

Techniques:
- Repeating linear-gradient hazard stripes (CSS)
- Hexagonal clip-path badge with pulse glow
- SVG path lightning via randomized mid-point offsets
- feGaussianBlur merge glow filter
- Branch arcs with probabilistic side bolts
- Screen flash overlay for strike/overload
- Monospace kV readout state machine (STANDBY/LIVE/ARCING/OVERLOAD)
- Bold Impact / Arial Black industrial type

Interaction Model:
- Voltage / Arc chaos / Frequency sliders reshape bolts
- Strike: single flash + thick burst
- Overload: timed red arcs + random flashes
- Continuous arc redraw offline

Title: 茶 — Tea Ceremony

Full Prompt:
080-tea-ceremony.html + .txt — Calm Japanese tea ceremony aesthetic page, steam animation, muted earth tones, serene copy. Self-contained premium HTML, inline CSS/JS, system fonts, responsive, offline.

Description:
A meditative single-column page in paper and moss tones. Large 茶 title, tatami floor, raku-style tea bowl, bamboo whisk, hanging scroll (和), and soft CSS steam wisps rising from the bowl. Prose on ichigo ichie pairs with the four principles — Wa, Kei, Sei, Jaku. Controls invite Steam, Whisk, Pour, or Stillness without breaking the quiet. Mincho/serif stacks keep the voice unhurried.

Techniques:
- Muted multi-stop page wash gradients
- Pure CSS bowl (rim + body + tea ellipse)
- Steam particles: blur + rise keyframes with --sx drift
- Tatami weave via repeating linear gradients
- Scroll rod pseudo-elements
- JS whisk oscillation via requestAnimationFrame
- Pour stream height transition
- Stillness mode dims copy and silences steam
- Four-principle card grid (和敬清寂)

Interaction Model:
- Steam: toggle rising wisps
- Whisk: animate chasen motion and tea surface scale
- Pour: brief liquid stream into bowl
- Stillness: stop motion, fade copy, return slowly
- Read serene copy; no noise, no external assets

Title: Neural Net Viz — AI Explainer

Full Prompt:
Create a self-contained premium HTML design showcase page: Animated neural network diagram where nodes fire, weights pulse, with an AI explainer aesthetic. Self-contained only (inline CSS/JS, no CDN/external fonts/images/libs). System fonts. Responsive. Offline. Stunning unique design. Dark tech background with subtle grid, cyan/magenta/lime accents. Canvas-drawn multi-layer network, glowing nodes by type (input/hidden/output), weighted edges that pulse, forward-pass signal packets, hover inspection, fire signal / reshuffle controls.

Description:
A cinematic AI explainer visualization of a feed-forward neural network. Nodes glow by layer role; edges encode weight magnitude and sign with animated pulses. Click “Fire signal” or the canvas to inject activation from the input layer; packets travel along edges and heat hidden/output units. Hover any node to read layer index and activation. Reshuffle rebuilds a random architecture. Soft glass UI, radial glow orbs, and a grid mask keep the mood scientific and premium.

Techniques:
- Canvas 2D neural graph layout with equal layer spacing
- Weighted edges as linear gradients (excitatory vs inhibitory hues)
- Sinusoidal weight pulse and node breathing
- Soft activation decay + edge-driven forward influence
- Discrete signal packets for “forward pass” storytelling
- DPR-aware canvas scaling for retina sharpness
- Glassmorphism control bar and info panel
- CSS grid background with radial mask
- System UI font stack only
- Fully offline, zero dependencies

Interaction Model:
- Hover node: inspect kind, layer, activation
- Click canvas or “Fire signal”: launch input activations + packets
- “Pulse weights”: toggle edge thickness animation
- “Reshuffle”: randomize layer widths and re-layout
- Responsive resize recalculates layout

Title: Origami Crane Sky — Memorial of Hope

Full Prompt:
Create a self-contained premium HTML design showcase page: Flock of paper cranes SVG flying with fold details, soft sky, peaceful memorial/hope theme. Self-contained only (inline CSS/JS, no CDN/external fonts/images/libs). System fonts. Responsive. Offline. Stunning unique design. Pastel sky gradient, drifting CSS clouds, SVG origami cranes with wing/body/neck/fold lines and soft drop shadows, animated flight bob and flap, release crane / calm wind / dusk palette controls, memorial copy card.

Description:
A quiet, hopeful memorial sky filled with hand-constructed SVG origami cranes. Each crane shows paper gradients, crease strokes, and a subtle shadow. The flock drifts across a soft dawn gradient with blurred cloud layers. Users may release another crane, calm the wind to near stillness, or shift the entire scene into a dusk palette. Typography mixes serif titles with system sans body text for a literary memorial feel.

Techniques:
- Pure SVG path-based origami crane construction
- Linear gradients on wings/body for paper fold depth
- SVG feDropShadow filter for soft lift
- Per-crane physics: speed, bob phase, flap, depth scale
- CSS animated cloud drift layers
- Glass card overlay for story copy
- Dynamic dusk/dawn body background swap
- System Georgia + UI sans stack
- Fully offline, zero dependencies

Interaction Model:
- Auto-flying flock loops horizontally
- “Release a crane”: spawn a new crane from the left
- “Calm wind” / “Raise wind”: slow or restore flight speed
- “Dusk palette” / “Dawn palette”: toggle sky mood
- Count of cranes aloft updates live

Title: Duotone Poster Generator

Full Prompt:
Create a self-contained premium HTML design showcase page: Bold duotone poster generator interactive with two color pickers, huge type, print feel. Self-contained only (inline CSS/JS, no CDN/external fonts/images/libs). System fonts. Responsive. Offline. Stunning unique design. Side control panel + live poster preview, shadow/highlight colors, presets, stripe intensity, halftone grain, massive uppercase headline, flip colors, shuffle type.

Description:
An interactive print-studio duotone poster builder. Edit headline, subline, and eyebrow live. Pick two ink colors (shadow + highlight) or load curated presets. Diagonal rule overlays, soft geometric shapes, and a halftone dot screen give real poster grain. Flip inks or shuffle copy for rapid exploration. Layout splits into a dark tools rail and a centered A2-proportion poster under studio lighting.

Techniques:
- CSS custom properties as live duotone inks
- color-mix() for stripe and halftone tints
- Huge fluid type with clamp() and negative tracking
- Halftone via radial-gradient background-size grid + mask
- Diagonal repeating-linear-gradient print rules
- Aspect-ratio 2/3 poster frame with multi-layer shadow
- Responsive stack: sidebar over poster on small screens
- System UI sans only, black-studio chrome
- Fully offline, zero dependencies

Interaction Model:
- Type in fields → poster text updates instantly
- Color pickers / presets → dual ink remaps entire poster
- Stripe intensity slider → rule opacity
- Shuffle type → random headline + subline
- Flip colors → swap shadow and highlight

Title: Brass Compass — Explorer Brand

Full Prompt:
Create a self-contained premium HTML design showcase page: Vintage brass compass interactive, needle follows mouse or headings, map behind, explorer brand. Self-contained only (inline CSS/JS, no CDN/external fonts/images/libs). System fonts. Responsive. Offline. Stunning unique design. Sepia map grid background, dashed expedition route, place labels, multi-ring brass bezel, parchment face with rose ticks and cardinals, red/silver needle, glass highlight, degree readout, follow pointer / due north / northeast / survey spin modes.

Description:
A brand-forward explorer landing moment: a vintage brass compass sits atop a weathered map. The needle tracks the pointer relative to the compass center, or snaps to preset bearings. A survey spin flings the needle and lets friction settle it. Degree readout and named bearings (N, NE, ESE…) update continuously. Soft leather-dark chrome, brass metal gradients, and Georgia titles sell a 19th-century outfitter story without external assets.

Techniques:
- Layered CSS radial gradients for brass rim and parchment face
- Multi-box-shadow bezel rings (leather + brass)
- DOM-built compass rose ticks (5° / major)
- Clip-path needle halves (red north / silver south)
- Angle lerp with shortest-path wrapping
- Pointer atan2 bearing from compass center
- Decaying angular velocity for survey spin
- Sepia map grid + dashed SVG expedition path
- Fully offline, zero dependencies

Interaction Model:
- Move pointer over compass: needle follows bearing (default mode)
- Due North / Northeast: lock target heading
- Survey spin: high angular velocity then friction settle
- Live degree + cardinal name readout

Title: Smoke & Mirrors — Art Installation

Full Prompt:
Create a self-contained premium HTML design showcase page: Abstract smoke particles canvas, mirror symmetry mode, dark moody art installation. Self-contained only (inline CSS/JS, no CDN/external fonts/images/libs). System fonts. Responsive. Offline. Stunning unique design. Full-viewport canvas, additive blending vapor, drag to paint smoke, vertical mirror line, quad fold symmetry, chaos echo mode, particle rise/curl, fade trails, minimal HUD.

Description:
A dark-room generative art installation. Drag across the void to emit soft smoke particles that rise, curl, and bloom with additive light. Mirror mode reflects strokes across a vertical axis; Quad fold mirrors to four corners; Chaos multiplies ghost echoes. Ambient vapor breathes at the center. Minimal letter-spaced typography and a glass tool strip keep the focus on the field.

Techniques:
- Canvas particle system with life, decay, radius growth
- Additive (lighter) composite for luminous smoke
- Trail persistence via translucent full-frame fill
- Symmetry spawn: mirror X, quad, chaos offsets
- Radial gradient soft “billow” sprites
- Subtle sine curl on horizontal velocity
- Buoyancy (upward acceleration) for smoke rise
- Particle cap + DPR-aware canvas
- Fully offline, zero dependencies

Interaction Model:
- Press/drag: emit smoke along path (and mirrors)
- Mirror / Quad fold / Chaos: change symmetry
- Clear: wipe particle field
- Ambient auto-spawn keeps the room alive
- Stats show live particle count

Title: Isometric Cozy Bedroom

Full Prompt:
Create a self-contained premium HTML design showcase page: Cute isometric room CSS, click furniture toggle lights/items, cozy bedroom scene. Self-contained only (inline CSS/JS, no CDN/external fonts/images/libs). System fonts. Responsive. Offline. Stunning unique design. Skewed wall/floor faces, window day-night, lamp glow, bed bedding swap, rug color, growable plant, poster hue, movable cat, status chips.

Description:
A charming pure-CSS isometric bedroom you can play with. Click the window to switch day and night (stars appear, room dims). Toggle the bedside lamp for a warm glow. Change bedding and rug colors, grow the houseplant, remix the wall poster, and send the orange cat from bed to rug. Soft pastel page background and pill status chips complete the toy-like UI.

Techniques:
- CSS skew transforms for isometric wall/floor faces
- Layered absolute furniture with z-index depth
- Clip-path lamp shade and plant pot
- Radial gradient lamp glow + filter drop-shadow
- Class toggles for state (night, on, alt, grown, spot)
- CSS keyframe tail wag on cat
- Day/night window with star radial dots
- System sans UI, warm gradient page chrome
- Fully offline, zero dependencies

Interaction Model:
- Window: day ↔ night (+ room dim when dark & lamp off)
- Nightstand/lamp: light on/off + glow
- Bed: pink ↔ mint blanket
- Rug: coral ↔ blue
- Plant: normal ↔ grown leaves
- Poster: hue/rotate art remix
- Cat: hop bed ↔ rug
- Status chips reflect lamp, sky, cat location

Title: Aureus Markets — Premium Ticker

Full Prompt:
Create a self-contained premium HTML design showcase page: Premium stock ticker landing, animated numbers, candlestick mini chart canvas, black gold. Self-contained only (inline CSS/JS, no CDN/external fonts/images/libs). System fonts. Responsive. Offline. Stunning unique design. Scrolling tape, gold accent logo, gradient hero price, OHLC meta, live-updating candlesticks, benchmark cards with spark lines, CTA refresh.

Description:
A black-and-gold private markets terminal landing. A continuous symbol tape scrolls across the top. The hero card shows the Aureus Composite with a large animated price, green/red delta, OHLC stats, and a canvas candlestick chart that advances over time. Benchmark tiles include mini sparkline canvases. All figures are simulated offline; “Refresh tape” regenerates the marquee and nudges the book.

Techniques:
- CSS marquee tape (duplicated track, linear infinite)
- Gold gradient text via background-clip
- Eased number animation (cubic out) for price ticks
- Canvas OHLC candlesticks with hollow up / filled down
- Sparkline canvases for secondary indices
- Tabular nums throughout
- Thin gold hairline card accent
- Responsive two-column → stack layout
- Fully offline, zero dependencies

Interaction Model:
- Hover tape: pause marquee
- Auto price jitter every ~2.8s with animated count
- Auto new candle every ~4s
- “Refresh tape”: rebuild marquee, tick price, append candle
- Resize redraws chart at device pixel ratio

Title: Mandala Maker

Full Prompt:
Create a self-contained premium HTML design showcase page: Symmetrical mandala drawer canvas, segments, color, export vibe, meditative. Self-contained only (inline CSS/JS, no CDN/external fonts/images/libs). System fonts. Responsive. Offline. Stunning unique design. Circular drawing surface, N-fold rotational symmetry, optional mirror within segment, brush size, color, hue cycle, segment guides, clear, export PNG.

Description:
A calm, dark-room mandala studio. Draw a single stroke and watch it bloom into a full radial pattern. Control the number of segments (3–24), brush width, ink color, optional hue cycling as you draw, and whether each slice is mirrored. Segment guide rays help aim. Export your piece as a PNG without leaving the page. Soft violet glow frames the circular canvas.

Techniques:
- Canvas polar symmetry via translate/rotate/scale(-1,1)
- N-fold replication of each stroke segment
- Optional bilateral mirror inside each wedge
- Additive (lighter) composite for luminous ink
- Live guide overlay on second canvas
- Hue-cycle by converting hex→HSL while drawing
- toDataURL PNG export download
- Circular clip via border-radius frame + box-shadow
- Fully offline, zero dependencies

Interaction Model:
- Pointer down/drag on canvas: paint with symmetry
- Segments / brush / color / hue sliders: live params
- Mirror checkbox: reflect within each segment
- Guides checkbox: toggle rays
- Clear: wipe canvas
- Export PNG: download mandala.png

Title: Northern Cabin — Window View

Full Prompt:
Create a self-contained premium HTML design showcase page: Cozy cabin window view with snow falling, fireplace glow CSS, warm interior UI card. Self-contained only (inline CSS/JS, no CDN/external fonts/images/libs). System fonts. Responsive. Offline. Stunning unique design. Wood window frame, starry night + aurora, pine silhouettes, snow ground, CSS snowflakes, mullions, flickering fireplace flames, warm interior card with toggles.

Description:
A cozy winter cabin scene presented as a warm UI shell. Through a deep wood window frame you see a northern night: stars, soft aurora, pine treeline, snowy ground, and falling flakes. Below the sill, a CSS fireplace flickers with ember glow beside a short literary card—temperature chips and toggles for snowfall, fire, and aurora. Georgia titles and soft wood/ember palette sell hygge without assets.

Techniques:
- Multi-layer absolute landscape (stars, aurora, pines, ground)
- CSS keyframe aurora drift + flame flicker + glow pulse
- DOM snowflakes with staggered fall animations
- Wood gradients for frame, sill, mantel
- Radial-gradient flame stack with blur
- Pine silhouettes via repeating angled linear-gradients
- Glass-dark interior card over cabin chrome
- Fully offline, zero dependencies

Interaction Model:
- Snowfall toggle: show/hide flakes
- Stoke fire toggle: hide/show flames + room glow
- Aurora toggle: pause/fade northern lights
- Status chips update for snow and fire state

Title: Vector Field — Science Art

Full Prompt:
Create a self-contained premium HTML design showcase page: Canvas vector field flow visualization, particles follow forces, mouse attractor, science art. Self-contained only (inline CSS/JS, no CDN/external fonts/images/libs). System fonts. Responsive. Offline. Stunning unique design. Full-viewport canvas, multiple field equations (curl, dipole, saddle, noise), particle trails, optional arrow grid, mouse attractor with swirl, fade trails, glass HUD.

Description:
A science-art flow field where hundreds of particles stream along mathematical force fields. Choose Curl (vortices), Dipole (source/sink pair), Saddle (hyperbolic stretch), or Noise (smooth angle field). The pointer is a soft attractor with local swirl. Optional arrow glyphs reveal the underlying vector grid. Trails fade into a deep navy void—half fluid sim, half generative poster.

Techniques:
- Analytic vector fields in normalized coordinates
- Particle integration with trail line segments
- Translucent full-frame fill for motion blur trails
- Mouse inverse-square attractor + tangential swirl
- Optional arrow glyph sampling grid
- Value-noise angle field for organic mode
- HSL color by particle hue + local speed
- DPR-aware full-window canvas
- Fully offline, zero dependencies

Interaction Model:
- Move pointer: reposition attractor
- Curl / Dipole / Saddle / Noise: switch force equation
- Arrows: toggle vector glyph overlay
- Reset: reseed particle cloud
- Particles auto-respawn when aged or off-screen

Title: Hôtel Élysée — Art Deco Hotel Landing

Full Prompt:
Create a self-contained premium HTML design showcase page (091-art-deco-hotel.html) for a Roaring 20s art deco hotel landing page. Gold fan motifs as SVG, geometric borders, champagne and black color palette. Inline CSS/JS only, no CDN, external fonts, images, or libraries. System fonts. Responsive and fully offline. Stunning unique design with matching .txt documentation.

Description:
A luxurious landing page for fictional Parisian hotel “Hôtel Élysée,” steeped in Roaring Twenties glamour. Champagne-on-black palette, gold geometric corner frames, and a glowing SVG art-deco fan crown the hero. Suite cards and dining sections use thin gold rules, diamond accents, and hover lift. Feels like a period brochure reimagined for the modern web.

Techniques:
- Fixed geometric corner borders and dual-stroke gold frames
- Hand-drawn SVG sunburst/fan motif with gradient stroke and soft glow animation
- Radial gold vignette hero background on deep black/champagne ink
- Letter-spacing-heavy uppercase typography with Georgia system stack
- Diamond (◆) rule dividers and rotated square geo-strip ornaments
- Card hover elevation with gold border illumination
- Smooth in-page anchor scrolling

Interaction Model:
- Hover navigation links for gold highlight
- Hover suite/dining cards for lift and glow
- Primary CTA fills gold on hover
- Click nav/CTA anchors to smooth-scroll to Suites, Dining, Reserve
- No external network; fully offline

Title: Plasma Globe — Interactive Science Toy

Full Prompt:
Create a self-contained premium HTML design showcase page (092-plasma-ball.html) featuring an interactive plasma globe canvas. Lightning bolts stream toward the finger/mouse. Purple electric aesthetic, science-toy presentation. Inline CSS/JS only, system fonts, responsive, offline. Matching .txt with title, full prompt, description, techniques, interaction model.

Description:
A digital plasma ball: a circular canvas globe with a glowing electrode core and fractal-style lightning that seeks the pointer. Purple/violet/cyan electric palette, glass rim highlight, and a stylized pedestal base. Modes include idle ambient sparks, storm intensity, and a calmed “release” state. Feels like a museum science exhibit on a desk.

Techniques:
- Canvas 2D recursive midpoint-displacement lightning bolts with branches
- Pointer mapping into sphere with radial clamp at glass edge
- Clip path so plasma stays inside the globe
- Additive blending (lighter) for electric glow
- Radial gradients for electrode, haze, and glass specular
- Touch + mouse support with preventDefault on touch
- Mode toggles: idle sparks, storm density, release

Interaction Model:
- Move mouse/finger over sphere → bolts converge on contact point
- Leave sphere → return to idle orbital sparks (if idle on)
- Idle Sparks: ambient filaments
- Storm Mode: denser, brighter discharges
- Release: minimal activity until pointer returns
- Fully offline, no audio/network

Title: The Daily Fold — Interactive Newspaper Layout

Full Prompt:
Create a self-contained premium HTML page (093-newspaper-fold.html) with an interactive folded newspaper layout: classic multi-column hierarchy, headline deck, slightly aged paper texture. Inline CSS/JS, system fonts, responsive, offline. Matching documentation .txt.

Description:
A period morning broadsheet (“The Daily Fold,” 1928) with masthead, double-rule borders, drop cap lead, three news columns, editorial block, and “Inside Today” sidebar. Warm aged-paper gradients and a vertical crease. CSS 3D transforms fold the paper into half-fold or pocket-fold states; pointer drag also drives fold amount.

Techniques:
- Multi-column classic newspaper grid with justified text and drop cap
- Aged paper via layered linear gradients and inset warmth shadow
- CSS perspective + rotateY fold states with cubic-bezier easing
- Double-rule masthead and hierarchy (banner → deck → H2 sections)
- Pointer capture drag-to-fold along horizontal axis
- Responsive collapse to single column on narrow viewports
- Serif system stack (Georgia / Times)

Interaction Model:
- Flat / Half-fold / Pocket fold toolbar buttons
- Drag horizontally across paper to switch fold depth
- Hover toolbar buttons for feedback
- Read full static editorial content offline

Title: Kaleidoscope — Real-Time Pattern Canvas

Full Prompt:
Create a self-contained premium HTML page (094-kaleidoscope.html): real-time kaleidoscope canvas from mouse drawing or auto patterns, vibrant colors. No CDN/external assets. System fonts. Responsive offline showcase with matching .txt.

Description:
A circular kaleidoscope viewport that mirrors strokes across N rotational segments (with reflection). Auto mode paints living orbital ribbons with slow fade; Draw mode lets the user paint rainbow trails. Segment count and brush size are adjustable. Additive blending produces jewel-like saturation against a deep violet well.

Techniques:
- Offscreen canvas layer for persistent strokes
- Polar mirroring: rotate + reflect across segment count
- HSL cycling stroke colors with lighter composite
- Auto generative paths using Lissajous-like polar motion
- Soft temporal fade for evolving auto patterns
- Circular clip and glass radial highlight
- Pointer events for draw mode

Interaction Model:
- Auto (default): generative morphing patterns
- Draw: press/drag to paint mirrored strokes
- Clear: wipe the layer
- Segments slider (4–16): symmetry order
- Size slider: brush width
- Touch and mouse supported

Title: Orbital Spire — Space Elevator Infographic Scroll

Full Prompt:
Create a self-contained premium HTML page (095-space-elevator.html): sci-fi space elevator infographic that scrolls from Earth to station, technical and elegant. Inline only, system fonts, responsive offline. Matching .txt documentation.

Description:
A vertical journey along a luminous tether: sticky side rail with a climber that tracks scroll position from ocean platform through stratosphere, Kármán line, GEO station, and apex counterweight. Glass-dark panels present altitude stats and minimal SVG diagrams. Starfield void background, teal technical accents—elegant concept brief, not cartoonish.

Techniques:
- Sticky vertical tether with gradient Earth→space coloring
- Scroll-linked climber position (percentage along rail)
- Sectioned altitude zones with floating data-alt labels
- Stat chips with tabular numeric styling
- Inline SVG schematic diagrams
- Fixed CSS starfield via multi radial-gradient dots
- Frosted panel cards (backdrop-filter + translucent fill)

Interaction Model:
- Scroll page to ascend; climber moves in sync
- Read sequential technical zones
- No click required for core experience
- Responsive rail narrows on mobile

Title: Cloud Pad — Soft Synthesizer Panel

Full Prompt:
Create a self-contained premium HTML page (096-soft-synth.html): soft synthesizer panel UI with pastel knobs, simple Web Audio tones on pad press, cute music toy. Inline CSS/JS, system fonts, responsive, offline. Matching .txt.

Description:
A candy-colored soft-synth toy called Cloud Pad. Eight pastel velocity-style pads play a pentatonic-ish major set via Web Audio oscillators. Three soft-UI knobs control volume, attack, and release; waveform toggles (sine/triangle/square) change timbre. Rounded card, marshmallow shadows, zero external assets.

Techniques:
- Web Audio API oscillator + gain envelope (attack/release ramps)
- Custom CSS knobs with CSS variable rotation and vertical drag mapping
- Soft neumorphic-pastel hybrid panel (light shadows, candy gradients)
- Pad press feedback (scale + inset shadow)
- AudioContext resume on first user gesture
- System font UI, fully offline

Interaction Model:
- Tap/click pads to play notes
- Drag knobs vertically to change volume/attack/release
- Toggle Sine / Tri / Square waveforms
- Status line shows last frequency and wave
- Mobile touch supported via pointer events

Title: Nocturne Cathedral — Gothic Architecture Silhouette

Full Prompt:
Create a self-contained premium HTML page (097-gothic-cathedral.html): gothic architecture silhouette, rose window SVG glow, dark romantic mood, organ-like ambient bars. Inline only, system fonts, responsive offline. Matching .txt.

Description:
A midnight cathedral scene: starfield, amber moon, and a full SVG silhouette with flying buttress wings, triple spires, arched portal, lancet windows, and a radiant rose window using gradients and SVG blur filters. Below, stylized organ pipes pulse as ambient visual “music.” Dark romantic violet-night palette.

Techniques:
- Layered SVG architecture (body, spires, buttresses, portal)
- Radial multi-stop rose window gradient + decorative tracery
- SVG feGaussianBlur glow filters with CSS animation swap
- CSS animated organ pipe bars (scaleY ambient motion)
- Fixed starfield and soft moon glow
- Georgia serif for poetic titles; system-ui for UI chrome

Interaction Model:
- View atmospheric illustration
- Toggle Pause/Resume Breath on organ ambient bars
- No external media; purely visual ambient

Title: Pearl Lane — Bubble Tea Shop Menu

Full Prompt:
Create a self-contained premium HTML page (098-bubble-tea-menu.html): cute bubble tea shop menu with bobbing pearls animation, pastel Taiwanese café aesthetic. Inline CSS/JS, system fonts, offline responsive. Matching .txt.

Description:
A cheerful menu for fictional café “Pearl Lane” (珍珠巷). Pastel cream/blush/matcha/taro palette, CSS cup logo with bobbing tapioca pearls, drink cards with mini liquid visualizations and floating boba, category filter tabs, and soft ambient rising pearls in the background. Cute Taiwanese café energy without external images.

Techniques:
- Pure CSS cup logo and per-card drink illustrations
- Staggered bob animations on pearl elements
- Background floating pearl particles via JS + CSS keyframes
- Category filter (All / Classic / Fruit / Special)
- Soft card hover lift and candy-colored tags
- Responsive auto-fill card grid

Interaction Model:
- Click tabs to filter menu categories
- Hover cards for lift
- Continuous decorative pearl bobbing and float
- Read prices and descriptions offline

Title: Aurora — Premium SaaS Analytics Dashboard

Full Prompt:
Create a self-contained premium HTML page (099-aurora-dashboard-pro.html): premium SaaS analytics with aurora mesh background, glass cards, refined charts. Modern glass SaaS (not neumorph). Inline CSS/JS, system fonts, responsive offline. Matching .txt.

Description:
A polished product analytics shell named Aurora: animated aurora mesh + subtle grid mask, glassmorphism sidebar and cards, KPI row with mini sparklines, canvas line chart (current vs prior), donut traffic mix, and product share table with gradient bars. Teal/indigo/pink accent system on deep space navy—distinct from soft clay/neumorphic looks.

Techniques:
- Multi-layer radial aurora background with slow hue-shift animation
- CSS grid mesh masked by radial gradient
- Glass panels: translucent fill, hairline border, backdrop-filter blur
- Canvas 2D line chart with gradient area fill and grid
- Canvas donut chart with center label
- DOM sparklines and CSS progress bars
- Responsive collapse: sidebar to top bar, KPI reflow

Interaction Model:
- Sidebar nav item highlight (visual only)
- 7D / 30D / 90D range toggles update revenue KPI and redraw trend scale
- Hover-ready glass cards (static data, offline demo)
- No external chart libraries

Title: Organic Wave Laboratory — Generative Masterpiece

Full Prompt:
Create a self-contained premium HTML page (100-organic-wave-lab.html): generative organic wave laboratory with sliders for amplitude/frequency/noise (plus complexity, flow, layers), canvas living forms, final masterpiece feel. Inline CSS/JS only, system fonts, responsive offline. Matching .txt documentation.

Description:
The gallery capstone: a live generative instrument. Full-viewport canvas renders layered organic ribbons, vector flow fields, soft bloom orbs, or additive ink strands driven by value-noise FBM. Side panel exposes amplitude, frequency, noise, complexity (octaves), flow speed, and layer count. Four visual modes, randomize, freeze, and pointer-biased field. Dark laboratory chrome with aurora typography—designed as a polished final piece.

Techniques:
- Canvas 2D generative drawing loop with trail fade
- Value noise + fractional Brownian motion (FBM)
- Multi-layer ribbon bands with gradient fills and strokes
- Flow-field short segments from noise-derived angles
- Radial bloom particles and additive ink strands
- Parameterized palette via phase-shifted sine RGB
- DPR-aware canvas resize
- Pointer position biases deformation

Interaction Model:
- Drag sliders: amplitude, frequency, noise, complexity, speed, layers
- Modes: Ribbon / Field / Bloom / Ink
- Randomize: invent a new parameter set
- Freeze / Live: pause or resume time evolution
- Move pointer over canvas to bias the organic field
- Fully offline, no external libs