Claude Fable 5.1 · HTML Files

Build a playable, cinematic single-page Three.js experience: a small boat drifting through a Norwegian-style fjord / coastal mountain landscape.

Requirements:
- ONE self-contained index.html file (HTML + CSS + JS inline). No external assets of any kind (no textures, models, fonts, audio files) EXCEPT Three.js itself, loaded via an import map from this exact pinned CDN:
  "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
  "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
  All textures (water normals, rock, snow, bark, clouds, etc.) must be generated procedurally in code (canvas / DataTexture / shaders).
- Scene content: steep procedural fjord walls and mountains with snow caps, rock and grass coloring by height/slope; procedural conifer forests (instanced); a water surface with animated waves and sky/landscape reflections; a lighthouse on a rocky point with a rotating beam that matters at night; a small wooden boat with 2 simple stylized 3D characters on it (one rowing/steering, one looking around, with small idle animations); distant islands; birds or other small life if cheap.
- Dynamic weather cycling clear -> fog -> rain -> storm -> clearing, with smooth transitions: fog density, cloud cover, rain particles, lightning flashes + wind and bigger waves in the storm.
- A full day/night cycle: sunrise, day, golden hour, sunset, night with stars and moon, lit lighthouse and boat lantern. Sky color, sun/moon lights, and fog color must track time of day.
- Controls: keyboard (WASD/arrows to steer and throttle the boat, C to switch camera, T toggles auto-tour, 1-5 to force weather, N to jump time) and touch (on-screen joystick/buttons on phones). Camera follows the boat in play mode.
- An "auto-tour" cinematic camera mode: slow, smooth, film-like camera moves (orbits, low water-level glides, high establishing shots, close-ups of the characters) while the boat drifts along a path through the fjord and the weather and time of day progress.
- Minimal, elegant UI: small title "Fjordlys" (or a better name of your choice), a tiny hint line for controls, fading out in tour mode.
- Must run smoothly on desktop and phone browsers: keep geometry/particle counts moderate, cap devicePixelRatio at 2, handle resize/orientation.
- IMPORTANT for automated video capture, support these URL parameters:
  ?tour=1        start directly in auto-tour mode
  ?capture=1     hide ALL UI overlays (title, hints, touch controls)
  ?cycle=40      when present, compress one complete showcase into that many seconds: the time of day goes from morning through golden hour, sunset and night, and the weather passes clear -> fog -> rain -> storm -> clearing within that span (so a 40-second recording shows everything). Without it, use a relaxed pace suited to live play.
  Drive all animation from the requestAnimationFrame timestamp / performance.now() (not from wall-clock-independent accumulators that ignore time), so that overriding those functions steps the scene deterministically. Set window.__sceneReady = true once the first frame has rendered.
- No console errors or warnings in a current Chrome. Use modern Three.js r160 APIs only (no deprecated/removed ones).

Output ONLY the complete index.html, starting with <!DOCTYPE html> and ending with </html>, with no explanation and no markdown fences. Build it as index.html (plus any local asset files you create) in the current directory. Three.js may load from a pinned CDN. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own until it looks genuinely cinematic before finishing. Close any browser you open as soon as you've taken your screenshot.

ok here it is - my first Opus 5.5 vibecoded threejs 3D experience

my God!! Opus is creative!!

I made a road that forgets which way is down.

It folds 90° up a yellow wall, runs upside down across a ceiling, and turns into sheet music: steer through the notes to play each street's melody.

Watercolour. Ink. A radio on the roof.

#vibejam Build it as index.html (plus any local asset files you create) in the current directory. Three.js may load from a pinned CDN. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.

Build a GPU-accelerated fluid simulation in a single HTML file using WebGL, no external libraries. Dragging the mouse or a finger should push colorful dye through the fluid, with a soft glow. Make it look stunning and run smoothly.

Build it as a self-contained index.html in the current directory, with WebGL/WebGL2 shaders you write yourself; no libraries and no CDNs; interactive with mouse or touch input. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.

Build a small playable 3D game in Three.js: an ant defends its home from a furious giant gardener. The player controls the ant on the ground of a lush garden, seen from a low third-person camera that makes the grass blades, pebbles and flowers feel huge. The gardener towers over the scene and sweeps a humming string trimmer back and forth, chasing the ant and throwing up clippings. The ant fights back with a tiny slingshot: aim with the mouse, fire pebbles at the gardener and dodge the trimmer's swings. Show a health bar for the ant and a large health bar for the gardener at the top of the screen, with hit flashes, a clear win or lose message and a restart. Warm afternoon sunlight falls through the leaves overhead, casting moving dappled light and soft shadows, with dust drifting in the light beams. Keep the controls simple (WASD or arrow keys to move, click to shoot) and show them on screen. Everything is built in code from Three.js geometry and materials; no external models or textures. Build it as index.html (plus any local asset files you create) in the current directory. Three.js may load from a pinned CDN. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.

# Test: threejs_artwork_style_pass

Build a real-time 3D scene in three.js: a **caped flying hero** flies through a row of **large framed artworks**, and each time he passes through a frame **his rendering style changes to match that artwork's style**.

- The hero is an original, generic caped flyer (your own design, not any existing or trademarked character): a stylised humanoid in a flying pose, fists forward, with a cape that flutters and ripples in the wind as he flies.
- A row of at least **five big picture frames** stands along his flight path, spaced out, each with a gilded frame and a procedurally generated canvas in a different style, for example: **oil painting** (thick brush strokes), **ukiyo-e woodblock** (flat colours, bold outlines, wave pattern), **pixel art**, **comic book / halftone** (dots, ink outlines), **watercolour** (soft bleeding washes). More styles are welcome.
- As he flies **through** each frame, the hero's look switches to that artwork's style (custom shaders / materials / post-processing, e.g. toon shading + outlines, halftone dots, pixelation, painterly noise, paper texture), ideally with a short visible transition at the moment he crosses the frame plane. Optionally the world around him can also take on the style.
- Motion must be **smooth and continuous** (no teleporting or snapping): he flies along a gentle curved path through all frames, and the whole sequence loops seamlessly.
- The **camera follows** him smoothly (chase camera with slight lag), keeping both the hero and the next frame in view.
- Good lighting, sky/background and atmosphere; aim for a polished, showcase-quality look.


Deliverable: reply with exactly one complete, self-contained `index.html` file in a single ```html code block. Requirements:
- Use three.js (r160 or newer) loaded from a CDN through an `<script type="importmap">` (e.g. jsDelivr or unpkg); addons such as OrbitControls may be imported from the same CDN via the import map.
- No other files: no external textures, models, fonts or images. Generate any textures procedurally in code.
- It must run by simply opening index.html in a modern desktop browser, fill the window, and handle resize.
- Animate with requestAnimationFrame and a clock, so it looks right at any frame rate.
- No explanation is needed outside the code block.

Build a Three.js scene: A retro arcade claw machine with a glass cabinet, chasing marquee lights and a pile of round pastel plush creatures stands in a dim arcade. Use the arrow keys to move the three-pronged claw over the pile and Space to drop it; the claw descends, closes, and may grip a plush that sometimes slips during the lift. A successful grab drops the plush down the prize chute with a burst of confetti; the camera is front-facing with slight mouse parallax. Everything is built in code from Three.js geometry, materials and shaders; no external models, textures or fonts. The scene must visibly animate from the moment it loads and run in a browser with software WebGL (no GPU). Deliver ONE self-contained HTML file; load Three.js only through an import map from https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js (addons from https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/), with no other external requests. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Build a single self-contained Three.js scene of a fantasy sailing ship at sea, seen from a cinematic three-quarter view. The ship has a carved dragon figurehead at the bow with an open jaw and horns, a wooden hull with visible planking and a raised stern castle, three masts with full canvas sails that billow and a few pennants, rigging lines, and lanterns along the rail. It sails on animated water with rolling waves, foam at the bow, reflections and a sun path on the surface. Behind it a rocky coast with a small harbour town: stone houses with tiled roofs, a lighthouse, a pier and scattered trees on green hills. Warm late-afternoon lighting with a low sun, long shadows, light haze in the distance and a sky with a few clouds. The camera slowly orbits the ship. Everything is built in code from Three.js geometry and materials; no external models or textures.

Output ONLY the complete index.html, starting with <!DOCTYPE html> and ending with </html>, with no explanation and no markdown fences. Build it as index.html (plus any local asset files you create) in the current directory. Three.js may load from a pinned CDN. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own until it looks genuinely cinematic before finishing. Close any browser you open as soon as you've taken your screenshot.

Build the Eiffel Tower in Three.js. Build it as index.html (plus any local asset files you create) in the current directory. Three.js may load from a pinned CDN. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.

Build a Three.js scene: A single-cylinder engine is shown in a half-transparent steel block, with crankshaft, connecting rod, piston and two cam-driven poppet valves animating in sync through intake, compression, power and exhaust. Fuel-air mix is shown as blue particles, the spark as a white flash, and exhaust as grey smoke particles. The up and down arrow keys change RPM, and a floating label names the current stroke. The camera orbits on drag with a workshop-grey backdrop and warm key light. Everything is built in code from Three.js geometry, materials and shaders; no external models, textures or fonts. The scene must visibly animate from the moment it loads and run in a browser with software WebGL (no GPU). Deliver ONE self-contained HTML file; load Three.js only through an import map from https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js (addons from https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/), with no other external requests. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Build a Three.js scene: A dozen hot air balloons with striped procedural envelopes rise at different rates over rolling green fields, their burners flaring orange and lifting them in pulses. Clicking a balloon fires its burner, so it visibly glows and climbs faster. Balloons drift with a gentle wind field and the camera slowly rises with the fleet. The sky is a pale dawn gradient with soft volumetric-looking haze bands. Everything is built in code from Three.js geometry, materials and shaders; no external models, textures or fonts. The scene must visibly animate from the moment it loads and run in a browser with software WebGL (no GPU). Deliver ONE self-contained HTML file; load Three.js only through an import map from https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js (addons from https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/), with no other external requests. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Build a Three.js scene of a huge glowing jellyfish walking through a rainy city at night on very tall, thin, jointed legs, presented as a live disaster news broadcast. The jellyfish's translucent bell pulses with soft bioluminescent light, its tentacles sway beneath it, and each slow stride steps between the towers while rain streaks through the light and wet streets reflect neon signs and headlights. Frame it like a TV emergency broadcast: a main camera feed plus several smaller feeds from other angles (street level, a helicopter, a rooftop) that update as the creature moves; a HUD with a channel logo, a red LIVE badge, a scrolling news ticker, a clock and coordinates; and an event log panel that adds timestamped entries as the jellyfish crosses the city. Keep the mood tense and cinematic, with fog, flickering streetlights and flashing red and blue emergency lights. Everything is built in code from Three.js geometry, shaders and materials; no external models or textures. Build it as index.html (plus any local asset files you create) in the current directory. Three.js may load from a pinned CDN. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.

# Test: threejs_mechanical_bee

Build a real-time 3D scene in three.js of an animated **mechanical (clockwork) bee**.

- The bee is built from many distinct parts: a segmented abdomen, thorax, head with compound-eye lenses, antennae, six jointed legs and two pairs of wings.
- Materials are physically based (MeshStandardMaterial or MeshPhysicalMaterial): polished and aged **brass**, brushed **steel**, a little dark enamel or glass, with believable metalness/roughness. Use an environment map (e.g. RoomEnvironment with PMREMGenerator) so the metal reflects.
- The **wings beat fast** (a visible blur-like flutter, thin translucent panels with a metal frame/veins).
- Several visible **gears turn** inside the body (meshing gears turn in opposite directions at speeds consistent with their tooth counts).
- The whole bee **hovers with a gentle bob and slight sway loop** in mid-air; legs and antennae move a little.
- **OrbitControls** let the viewer orbit, zoom and pan around the bee, with damping.
- **Nice lighting**: a key light with soft shadows, a fill and a rim light, tone mapping (ACES or AgX) and sRGB output; a tasteful backdrop or ground so the shadow reads.
- Aim for a polished, showcase-quality look.


Deliverable: reply with exactly one complete, self-contained `index.html` file in a single ```html code block. Requirements:
- Use three.js (r160 or newer) loaded from a CDN through an `<script type="importmap">` (e.g. jsDelivr or unpkg); addons such as OrbitControls may be imported from the same CDN via the import map.
- No other files: no external textures, models, fonts or images. Generate any textures procedurally in code.
- It must run by simply opening index.html in a modern desktop browser, fill the window, and handle resize.
- Animate with requestAnimationFrame and a clock, so it looks right at any frame rate.
- No explanation is needed outside the code block.

Build an interactive Three.js scene of a single red Japanese maple (momiji) standing on a small rocky island in a still, misty lake. Its leaves are deep autumn red and orange; some drift down onto the water, where they float and leave gentle ripples. Low mist hangs over the lake and soft mountain silhouettes fade into the haze behind. A stone lantern stands beside the tree with a warm flame inside. Let the viewer interact: dragging across the water stirs the floating leaves and sends ripples through them, clicking the lantern makes it swing so its light sways across the water, and a dial turns the time of day from dawn through day and dusk to moonlight, changing the sky, the colour of the mist, the lighting and the reflections, with the moon and its reflection at night. Keep the mood calm and painterly, with a light wind moving the branches. Everything is built in code from Three.js geometry, shaders and materials; no external models or textures. Build it as index.html (plus any local asset files you create) in the current directory. Three.js may load from a pinned CDN. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.

Build a Three.js scene: A synthwave hover-bike race down an infinite grid highway beneath a striped magenta sunset sun and wireframe mountains. Steer between three lanes with A and D to dodge glowing pylons and collect cyan energy rings while speed slowly increases. The chase camera tilts into turns with a bloom-like glow, and a distance score is shown in retro chrome lettering. Everything is built in code from Three.js geometry, materials and shaders; no external models, textures or fonts. The scene must visibly animate from the moment it loads and run in a browser with software WebGL (no GPU). Deliver ONE self-contained HTML file; load Three.js only through an import map from https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js (addons from https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/), with no other external requests. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Build a Three.js scene: A small floating diorama chunk of island with a cliff cross-section shows layered rock, a palm tree, a wooden pier, a beached rowboat and a hidden treasure cave lit by a lantern. Waves lap the shore via a shader, gulls circle, and the palm sways. Click the X-marked sand to dig: sand particles fly and a chest rises and opens with a golden glow; the camera slowly orbits the floating base against a teal sky gradient. Everything is built in code from Three.js geometry, materials and shaders; no external models, textures or fonts. The scene must visibly animate from the moment it loads and run in a browser with software WebGL (no GPU). Deliver ONE self-contained HTML file; load Three.js only through an import map from https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js (addons from https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/), with no other external requests. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Build a single Three.js page with five physics scenes and a scene switcher (buttons or tabs) to move between them; each scene can be restarted. 1) An explosion in a desert: a blast with a fireball, smoke, sand and debris thrown outward and falling back under gravity, and a shockwave rippling across the dunes. 2) A tornado: a funnel of swirling dust and debris over flat land that picks up small objects and spins them upward. 3) A balloon pop: a rubber balloon inflates, stretches and bursts, its fragments flying off and settling. 4) A water drop fall: a drop falls into still water, making a splash crown, a rebound jet, droplets and spreading ripples. 5) A Newton's cradle: five steel balls on strings where the end ball swings in and its momentum passes through the row, with believable collisions and slowly damped swinging. Make the motion physically believable (gravity, momentum, collisions, damping), light each scene well and label it. Everything is built in code from Three.js geometry, shaders and materials; no external models or textures. Build it as index.html (plus any local asset files you create) in the current directory. Three.js may load from a pinned CDN. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.

Build "Millbrook Pond", a calm countryside pond diorama in Three.js, seen from above at a three-quarter angle. An irregular pond with soft grassy banks, rocks and reeds sits in a clearing ringed by trees and bushes, with a dirt path running around it. On one shore stands a small timber watermill cabin with a shingled roof and a stone chimney, and on its side a large wooden waterwheel turns continuously, its paddles dipping into the water and churning it. A plank dock juts out from the mill, a small arched wooden footbridge crosses an inlet, and a rowboat floats on the pond with a seated figure fishing, rod and line out; the boat bobs and drifts gently and the line's float makes small rings. The water is the star: a real-time reflective and refractive surface (a planar or render-target reflection of the mill, trees and sky; refraction of the shallow pond bed near the banks; depth-based tint from clear shallows to a dark centre) blended with a Fresnel term, soft normal-mapped wind ripples, and dynamic ripple rings from the waterwheel, the boat, the fishing float and the occasional rising fish, which spread and fade. Add gentle ambient life: swaying foliage, a few lily pads or drifting leaves, dragonflies or birds, and soft afternoon sun with shadows. The camera slowly orbits the pond on its own; the user can drag to orbit, pinch or scroll to zoom, and tap the water to make ripples, and a small unobtrusive control pauses the orbit and switches the time of day (for example afternoon and golden hour). The look is stylized and cohesive (low-poly or soft-shaded), and everything is built in code; no external models, textures or HDRIs. Also add a capture mode: opening index.html?capture=1 hides all UI and plays a scripted 12-second camera move around the pond that ends where it started, so it can be recorded as a seamless clip. Build it as index.html (plus any local asset files you create) in the current directory, with no build step; three.js and any addons may load from a pinned CDN. Aim for 60 fps on a laptop and at least 30 fps on a mid-range phone, with touch working. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot. Finish with a short README.md describing the controls and the capture mode.

Build an explorable tropical island in Three.js. The island has white sand beaches, palm trees, a green hilly interior and a small fishing village of wooden huts with thatched roofs, joined to the sea by a long wooden pier with boats moored alongside. The ocean around it is animated, with waves, foam along the shore and clear shallow water over a reef where fish swim among corals and sea plants, fading to deep blue further out. Let the player switch between modes: walk on the island, swim at the surface, dive underwater (with underwater fog and caustic light), sail a small boat around the island, and fly a free camera. Add a time-of-day panel with a slider that moves the sun from morning through sunset to night, changing the sky, lighting and water colours, with stars and lit windows in the village at night. Show the controls on screen. Everything is built in code from Three.js geometry, shaders and materials; no external models or textures. Build it as index.html (plus any local asset files you create) in the current directory. Three.js may load from a pinned CDN. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.

Build a conceptual X-16 engine in 3D with Three.js: four cylinder banks, one crankshaft and exposed mechanics inspired by experimental multi-bank engine architectures. Make it animate (pistons, rods and crank moving in sync) with orbit controls. Everything is built in code from Three.js geometry, shaders and materials; no external models or textures. Build it as a single self-contained index.html in the current directory. Three.js may load from a CDN or be vendored. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU) to screenshot and inspect your own output, and iterate on your own before finishing. Close any browser you open as soon as you've taken your screenshot.

Write a single self-contained HTML file that plays an original animated short film, about 50 seconds long, drawn entirely in code.

Hard technical rules:
- One file: HTML + inline <script> (+ optional inline <style>). No external images, fonts, libraries, audio files or network requests of any kind. Every frame is drawn procedurally with Canvas 2D (or WebGL if you prefer).
- The canvas renders at a fixed internal resolution of 1920x1080 and is scaled with CSS to fit the window (letterboxed, black background).
- The animation starts automatically on page load and is driven ONLY by requestAnimationFrame and the timestamp from performance.now() (measure elapsed time from the first frame). Everything on screen must be a pure function of elapsed time t, so the film is deterministic and can be captured frame by frame. No Math.random() at draw time — use a seeded PRNG / hash noise so frames are identical run to run. No setTimeout/setInterval for animation.
- Define window.FILM_DURATION (seconds). After the film ends, hold the final frame.
- Soundtrack: write an original WebAudio score (melody, chords, a little percussion or ambience, and sound cues that match story moments) synced to the same timeline. Put ALL audio scheduling in a function window.buildSoundtrack(ctx, startTime) that schedules every note/effect on any BaseAudioContext (so it also works on an OfflineAudioContext). Also expose window.renderSoundtrack = () => an OfflineAudioContext(2, 44100*FILM_DURATION, 44100) render of it returning a Promise<AudioBuffer>. For live viewing, start the soundtrack on the first click/tap/keypress (browsers block autoplay) aligned to the current film time; show a small unobtrusive "tap for sound" hint until then. Use only oscillators, noise buffers you generate, filters, gain envelopes — no samples.
- No console errors.

The film (this is a showcase of what you can animate — make it genuinely beautiful and moving):
- An ORIGINAL story with a small emotional arc (setup, a problem or longing, a turn, a warm resolution). A single consistent main character — any character you like — who appears in every scene and is recognisably the same design throughout.
- At least 4 distinct scenes, with real transitions between them (e.g. wipes, iris, match cuts, cross-dissolves, camera moves through space).
- Expressive character animation: a proper walk cycle (legs, arms, body bob), blinking, and facial emotion changes (e.g. curious, sad, surprised, joyful) that follow the story.
- A virtual camera that pans, zooms and tracks, with parallax layers for depth.
- Lighting and time-of-day changes across the film (e.g. dawn → day → dusk → night, or a storm clearing), with colour grading, glows, and shadows.
- Particles and weather (rain, snow, fireflies, leaves, dust, stars — your choice, at least two kinds).
- On-screen story text / subtitles in a tasteful storybook style that tell the story in a few short lines.
- A cohesive art direction: a warm, hand-made "paper cut-out / storybook" look is welcome (textured paper, soft edges, slight wobble), but choose what serves your story.
- End with a title of your film and a gentle closing frame.

Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>. No explanation, no markdown fences. Save it as index.html in the current directory. You may open it in headless chromium to check it and iterate.

Build a one-page scroll-driven WebGL story in the style of an award-winning Codrops demo: 'The life of a raindrop', in 5 scroll chapters (cloud, fall, river, ocean, evaporation). Each chapter has a distinct shader-driven scene (Three.js, WebGPU renderer with WebGL fallback), with smooth transitions tied to scroll position (no scroll hijack jank), crisp typography overlays, and a progress indicator. Must hold 60 fps on a mid-range laptop and degrade gracefully on phones. Procedural visuals only, no external images or video. One self-contained index.html plus inline JS/CSS.

Ink Bloom Garden: A dark canvas where every click plants an ink-drop flower that grows outward in branching, feathered petals over three seconds using layered translucent strokes. Petal colour drifts with the mouse's horizontal position. Space clears the canvas with a slow fade; S saves the current canvas as a PNG.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Pendulum Wave: Fifteen pendulums hung side by side, each with a slightly different period so that together they form travelling waves, snakes and brief alignments that repeat every 60 seconds. Show a slider for playback speed, a reset button, and draw a faint trail behind each bob.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Orbital Coffee Landing: A landing page for an invented specialty coffee roaster: a full-height hero with a CSS-drawn steaming cup, three origin cards that tilt in 3D toward the cursor, a scroll-triggered brew timeline, and a sticky header that shrinks after 80px of scrolling. Fully responsive down to 360px.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Brick Breaker Neon: A neon brick-breaker: a paddle follows the mouse or arrow keys, the ball bounces off six rows of glowing bricks, and destroyed bricks burst into particles. Include three lives, a score, a level-two layout after clearing, a pause on P, and a game-over screen with restart.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Focus Timer Orbit: A focus-session timer drawn as a planet orbiting a sun: a full orbit equals the session length. It supports 25/5 work/break cycles with editable durations, start/pause/reset, a counter of completed sessions, and a soft synthesised chime at each transition generated with WebAudio.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Rainfall Bars: An animated bar chart of monthly rainfall for an invented city (Jan 78mm, Feb 64, Mar 55, Apr 40, May 22, Jun 10, Jul 8, Aug 12, Sep 30, Oct 52, Nov 70, Dec 85). Bars fill like rain gauges, hovering shows a tooltip, and a toggle switches between millimetres and inches.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Kinetic Headline: The phrase MAKE SOMETHING WEIRD in huge letters, where each letter is an independent element that scatters away from the cursor on a spring and eases back home. Clicking cycles through three typefaces from generic font families; letters wobble slightly while idle.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Pocket Theremin: A full-screen theremin: horizontal mouse position sets pitch across two octaves on a pentatonic scale, vertical position sets volume and vibrato depth. Holding the mouse down plays a WebAudio oscillator; a glowing trail and a live waveform display follow the pointer. Keys 1-4 switch waveform.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Forest Fire Automaton: A cellular-automaton forest on a 150x100 grid: trees regrow with probability p, lightning strikes with probability f, and fire spreads to neighbours. Sliders adjust p and f live, a counter shows live trees, burning cells glow orange to red, and a click drops a spark.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Toggle Switch Gallery: A gallery of eight distinct toggle switch designs on a neutral grid: day/night, liquid blob, rocker, pill with icon, 3D push, checkbox morph, skeuomorphic lever and minimalist line. Each animates smoothly between states, is keyboard accessible, and shows its current state label underneath.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Pure CSS Sunset: A layered sunset over rolling hills built entirely with CSS gradients, shapes and keyframe animation, with no canvas or script: the sun sinks over 20 seconds, the sky shifts from gold to violet, stars fade in, and a small silhouetted windmill turns on a hill.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Magnetic Filings: Thousands of short iron-filing strokes on a pale background align to the field of two draggable magnets, one red north and one blue south. Strokes recompute live as magnets are dragged; a double click adds a third magnet and a button flips each polarity.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Soft Body Blobs: Five jelly-like blobs made of spring-connected points fall into a box, squish on impact and jostle each other. The user can grab and fling any blob with the mouse. A gravity slider and a button that tilts the box left or right are included.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Snake Reimagined: A modern snake game on a 24x24 grid with smooth interpolated movement, a gradient body that tapers to the tail, food that pulses, and walls that wrap. Speed increases every five apples. Show score and best score (saved in localStorage) and support arrows, WASD and swipe.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Color Palette Studio: A palette generator: press space to generate five harmonious colours (choose analogous, complementary, triadic or monochrome), click a swatch to lock it, and show each colour's HEX, RGB and a WCAG contrast rating against white and black. Clicking a code copies it with a toast.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Heartbeat Line: A live ECG-style monitor that scrolls a heartbeat trace across a dark grid, with a BPM readout, a slider from 40 to 180 BPM that changes the rhythm in real time, a red flash on each beat, and an optional synthesised beep per beat.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Typewriter Poem: A vintage typewriter page that types out a short original eight-line poem character by character with slight timing randomness, ink density variation and occasional struck-through corrections. Each keystroke plays a synthesised click, a bell rings at each line end, and a replay button restarts it.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Step Sequencer Grid: A 16-step, 8-row drum and synth sequencer with a lit grid. Kick, snare, hat and clap are synthesised with WebAudio, plus four pentatonic notes. Includes a tempo slider (60-180 BPM), a moving playhead, clear and randomise buttons, and swing control.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Boids Lagoon: A school of 200 fish following boids rules (separation, alignment, cohesion) in a teal lagoon, drawn as small tapered shapes that flex as they turn. Moving the mouse introduces a predator they flee from; sliders tune the three weights and a counter shows the FPS.

Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.

Koi Pond Garden: A calm, interactive Japanese garden seen from above at a gentle three-quarter angle, centred on a koi pond. The water must read as clear and refractive: you can see the pebbled pond floor and the koi through it, distorted by soft ripples, with caustic light patterns moving across the bottom and a subtle surface reflection and sheen. At least seven koi with detailed, varied patterned skin (kohaku, showa, ogon, tancho and similar), flowing fins and tails, swim naturally in smooth, unhurried curves, avoid each other and the pond edge, and occasionally rise near the surface. Surround the pond with natural stones and mossy rocks of varied shapes and textures, grasses, a few plants and flowers, floating lily pads (some with blossoms), and at least one small stone lantern or similar garden detail. Lighting should be warm and soft, with believable shadows.

Interaction: clicking or tapping the water drops a few food pellets that splash, float and slowly sink; nearby koi notice them, swarm toward them and visibly eat them (each pellet disappears when a fish reaches it), then disperse. At least two frogs sit on lily pads; clicking or tapping a frog makes it leap in an arc to another pad or into the water with a splash and rings of ripples. Clicking the water anywhere also sends out ripples. The camera can be orbited gently with a drag and zoomed within limits, but must not flip under the ground.

Build it as ONE self-contained HTML file with inline CSS and JavaScript. You may load three.js (and its addons) from a public CDN via an import map or script tag; no other external requests (no image, texture, model or audio files): make every texture and shape in code (procedural canvas textures, shaders or geometry). It must work when opened directly from disk in a current desktop or mobile browser, support both mouse and touch, fit the window responsively, keep a smooth frame rate, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.