Claude Sonnet 5.5 · 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.

Build a short cinematic camera study in Three.js that demonstrates a crane rise. The shot opens at human eye level on a lone figure sitting at a small cafe table in a narrow old-town square. The camera rises smoothly on a crane while pulling slightly back and tilting down to keep the figure in view, until it looks down from rooftop height and reveals the whole square, the surrounding rooftops and the streets running off into a lit evening town, with the figure now a small mark. Golden-hour light and long shadows. Ease it, then return so the loop closes. The animation plays automatically, fills the window at 16:9, loops seamlessly every 8 seconds with no visible jump at the loop point, and shows a small unobtrusive caption in one corner naming the technique. 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 (inline CSS and JS) 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 short cinematic camera study in Three.js that demonstrates a dolly zoom, the 'vertigo' shot. A lone figure stands at the end of a long corridor lined with repeating columns, doors and ceiling lights. Over the shot the camera physically travels backward along the corridor while its field of view narrows at the matching rate, so the figure stays exactly the same size and position on screen while the corridor behind it visibly stretches away and then snaps back. Light it with cold overhead fluorescents and a faint fog. Ease the move in and out, then reverse it so the loop closes. The animation plays automatically, fills the window at 16:9, loops seamlessly every 8 seconds with no visible jump at the loop point, and shows a small unobtrusive caption in one corner naming the technique. 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 (inline CSS and JS) 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 short cinematic camera study in Three.js that demonstrates a low-angle hero shot. A tall armoured knight stands on a rocky outcrop against a dramatic sunset sky with drifting clouds and a banner flapping in the wind. The camera sits near the ground, pitched upward, so the figure towers, verticals converge upward and the sky takes up most of the frame. A slow push-in makes the hero loom larger. Strong backlight and rim light outline the silhouette. The animation plays automatically, fills the window at 16:9, loops seamlessly every 8 seconds with no visible jump at the loop point, and shows a small unobtrusive caption in one corner naming the technique. 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 (inline CSS and JS) 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 short cinematic camera study in Three.js in the style of classic film noir, rendered in black and white. A detective in a hat and trench coat stands in a rain-slick alley at night under a single streetlamp; venetian-blind shadows from a window fall across a brick wall, cigarette smoke curls, and the rain glints in the lamp's cone. Use one hard key light, deep black shadows covering most of the frame and high contrast. The camera drifts in very slowly. The animation plays automatically, fills the window at 16:9, loops seamlessly every 8 seconds with no visible jump at the loop point, and shows a small unobtrusive caption in one corner naming the technique. 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 (inline CSS and JS) 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 short cinematic camera study in Three.js that demonstrates a 360-degree orbit shot. A glossy sculpted trophy stands on a pedestal in the middle of a dim gallery hall with pillars, framed paintings and spotlights. The camera circles the trophy once through a full turn at a constant radius and height, always aimed at it, so the room sweeps behind it like a ribbon while the trophy stays centred. The trophy itself does not rotate. Warm key spotlights and cool rim lights make reflections slide across its surface. The animation plays automatically, fills the window at 16:9, loops seamlessly every 8 seconds with no visible jump at the loop point, and shows a small unobtrusive caption in one corner naming the technique. 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 (inline CSS and JS) 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 short cinematic camera study in Three.js that demonstrates a rack focus with real depth of field (for example a bokeh/depth-of-field post-processing pass). In the foreground, close to the lens, a ringing old telephone sits on a desk; in the background, across a dim office, a person stands in a lit doorway. The camera does not move. Focus starts sharp on the phone with the doorway blurred, then pulls smoothly over about two seconds so the person becomes sharp and the phone goes soft, holds, then racks back. The animation plays automatically, fills the window at 16:9, loops seamlessly every 8 seconds with no visible jump at the loop point, and shows a small unobtrusive caption in one corner naming the technique. 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 (inline CSS and JS) 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 short cinematic camera study in Three.js that demonstrates silhouette lighting. A figure walks slowly toward a huge bright doorway (or a window onto a blazing sunset) in a dark warehouse, with haze in the air so the light pours in as visible beams. The only strong light is behind the figure, so the figure reads as a solid near-black shape with a thin bright rim, with no detail visible on the side facing the camera. The animation plays automatically, fills the window at 16:9, loops seamlessly every 8 seconds with no visible jump at the loop point, and shows a small unobtrusive caption in one corner naming the technique. 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 (inline CSS and JS) 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 short cinematic camera study in Three.js that demonstrates a side-on tracking shot. A runner (a stylised low-poly figure with an animated running cycle) jogs along a riverside path at dawn past lamp posts, benches, trees and a railing, with a city skyline far behind. The camera travels parallel to the runner at the same speed, keeping them at the same size and in the same third of the frame, while foreground objects whip past quickly, midground objects slower, and the skyline barely moves. The animation plays automatically, fills the window at 16:9, loops seamlessly every 8 seconds with no visible jump at the loop point, and shows a small unobtrusive caption in one corner naming the technique. 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 (inline CSS and JS) 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 short cinematic camera study in Three.js that demonstrates a whip pan used as a transition. The camera first holds on a calm scene: a desk with a lamp and a laptop in a quiet study. It then whips sideways so fast that the image streaks into horizontal motion blur, and settles on a completely different scene: a busy neon street stall at night. Hold, then whip again in the same direction back to the study to close the loop. Implement visible directional motion blur during the whip. The animation plays automatically, fills the window at 16:9, loops seamlessly every 8 seconds with no visible jump at the loop point, and shows a small unobtrusive caption in one corner naming the technique. 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 (inline CSS and JS) 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.

Design a giant desert sandworm re-engineered as a robot, presented as an engineering blueprint. Deliver ONE self-contained index.html (SVG and/or canvas, inline CSS and JS, no external assets, libraries or fonts). It must include: an animated robotic worm that moves through sand, with segments that articulate as it burrows and surfaces; a labelled segment-by-segment mechanical breakdown (for example head and mouth assembly, drive segments, sensor ring, power core, tail) with callouts naming each part and what it does; a cross-section diagram of the mouth showing the grinding and intake mechanism; and a terrain and operations map showing the worm's route, depth and working zones. Everything must share one cohesive blueprint style: blueprint-blue background, white and cyan line work, grid, dimension lines, title block and technical lettering. It must look good on desktop and phone. Write everything into the working directory and finish with a short README.md.

Make multimedia from first principles: a single-page HTML gallery about one original mascot character that you design yourself (give it a name and a recognisable silhouette, colours and features). Render that same mascot in 20 clearly distinct art styles, each as its own tile drawn with SVG or Canvas and captioned with the style name, for example pixel art, woodcut, risograph poster, rubber stamp, 16-bit game sprite, ukiyo-e, blueprint, neon sign, stained glass, ASCII art, watercolour, paper cut-out, comic panel, isometric voxel, embroidery, chalkboard, Art Deco, low-poly, halftone print and a clay or 3D-shaded look. The character must stay recognisable in every style. Also include one 10-second animated clip of the mascot driven entirely by code (Canvas), with play/replay controls and a button that records the clip in the browser with MediaRecorder and offers it as a WebM download. Use no image-generation models, no external images, fonts, libraries or other assets: every picture and frame is drawn by your own code. Build it as index.html (plus any local files you create) in the current directory, with no build step. It must work on a mid-range phone, with a layout that adapts to a narrow screen. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software rendering, 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 listing the styles and how the clip export works.

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 complete, polished Battleship game playable in the browser (index.html plus any JS/CSS, no build step). Player vs computer on 10x10 grids: ship placement (drag or click, with rotate), a computer opponent with a sensible hunt/target strategy, hit/miss/sunk feedback with animation and sound, turn indicator, win/lose screen and restart. It must work with mouse and touch and look good on desktop and phone. Write everything into the working directory and finish with a short README.md.

Create a seamless looping side-view animation of a red fox running through a forest at dusk. Deliver ONE self-contained index.html (inline CSS and JavaScript only, SVG and/or canvas; no external assets, libraries, fonts or network requests of any kind). The fox runs left to right, seen in profile, with an animated running gait: legs, body, head and tail all move in a believable run cycle. The scene moves past it: a dusk sky, several layers of trees scrolling at different speeds for parallax depth, and a ground strip. One loop lasts about 8 seconds and repeats forever with no visible seam or jump. Frame the scene at 16:9, scaled to fit any window, and make it look good on desktop and phone. Write everything into the working directory and finish with a short README.md.

Build a single-page Three.js scene (one index.html file, no build step, three.js from a pinned CDN) with a rigged humanoid character (a procedural skeleton and simple body meshes are fine) that plays walk, run and jump cycles, with on-screen buttons or keys to switch between them and blend smoothly from one to the next. The motion must look human, not spider-like: respect realistic joint limits (knees and elbows bend one way only, no joint rotates past a human range), feet plant on the ground with no sliding while in contact, the pelvis bobs and the torso stays upright with natural counter-rotation of shoulders and hips, and arms swing opposite to the legs. Include a ground grid, an orbit camera and a toggle that shows the skeleton. It must run at 60 fps in a desktop browser and work with touch. Write everything into the working directory and finish with a short README.md describing the controls.

Fais-moi un diorama pixel-art animé de Paris la nuit, pour servir de fond en boucle à une vidéo lofi de 10 heures sur YouTube. Tout dans un seul fichier HTML (canvas + JavaScript, sans librairie).

AMBIANCE ET COULEURS
Joue à fond sur le contraste chaud / froid : une nuit pluvieuse bleu nuit et violette, avec des coins de lumière chaude. La tour Eiffel dorée, les fenêtres éclairées, les réverbères, un café.

LA SCÈNE (de l'arrière vers l'avant)
- Un ciel en dégradé tramé (dithering façon pixel art), une lune avec un halo, et plusieurs couches de nuages qui défilent lentement, éclairées par la lune au-dessus et par la ville en dessous.
- La tour Eiffel au centre, dorée, avec sa structure en treillis, ses 3 plateformes et son antenne. Son phare tourne et balaie le ciel. Elle scintille régulièrement (des points blancs qui clignotent partout), et une lumière rouge clignote tout en haut.
- Au fond, une ligne de toits parisiens avec des fenêtres qui s'allument et s'éteignent, le dôme doré des Invalides et le Sacré-Cœur blanc sur sa colline.
- Un quai avec des platanes et des réverbères.
- La Seine, avec les reflets de la tour et des lampadaires qui ondulent, de longues traînées de lumière dorée, des ronds de pluie sur l'eau, et un bateau-mouche éclairé qui traverse de temps en temps.
- À gauche, au premier plan, un immeuble haussmannien : toit en zinc mouillé, cheminée qui fume et crache des étincelles, un chat dans une lucarne qui bouge la queue, une fenêtre à la bougie qui vacille, une télé qui clignote en bleu, un balcon en fer forgé, un café avec un store rayé rouge et un néon « CAFÉ » qui grésille de temps en temps.
- À droite, un réverbère parisien avec un halo chaud, qui vacille parfois.
- Tout en bas, une balustrade en fer forgé avec des jardinières.

EFFETS
- De la pluie sur 3 profondeurs. Les gouttes deviennent orange quand elles passent dans une lumière, et elles éclaboussent sur les rebords, le store et la balustrade.
- DES BILLETS QUI TOMBENT DU CIEL : des billets de 100 €, 50 € et 20 €, sur plusieurs profondeurs. Ils virevoltent comme des feuilles (ils se balancent, pivotent, se retournent et brillent quand ils font face).
- De la fumée qui dérive avec le vent, des étincelles, des lumières qui vacillent, et 2 éclairs discrets dans les nuages par boucle.

TECHNIQUE (important)
- Le rendu interne est en 480×270, agrandi ×4 sans lissage (plus proche voisin), pour obtenir un 1920×1080 parfaitement net en plein écran.
- La boucle est PARFAITE et dure 4 minutes : chaque animation est une fonction du temps modulo 240 s (fréquences entières, particules déterministes), donc aucun saut au moment où ça reboucle.
- Touche R : enregistre exactement une boucle en 1920×1080, 60 fps, et télécharge le fichier vidéo (mp4 si possible, sinon webm).
- Touche S : capture PNG en 1080p. Touche F ou double-clic : plein écran. Le curseur se cache quand on ne bouge pas la souris.
- Optimise pour tenir 60 fps : sprites pré-rendus, halos en cache, et un canvas avec l'option willReadFrequently.

Fixed inputs (do not ask for anything):
- Deliverable: index.html in the current directory, one self-contained file (canvas + JavaScript, no libraries, no CDNs, no external image, font or audio files); code only.
- The harness makes the video itself, headlessly: it opens index.html in headless Chromium (software rendering, no GPU) with a 1920x1080 viewport and records exactly one full loop, t = 0 to 240 s, to a 1920x1080 MP4 at 30 fps. During that capture the page's clock is stepped exactly 1/30 s per frame (requestAnimationFrame timestamps, performance.now(), Date.now() and timers), no key is pressed and nothing is clicked: the scene must start animating as soon as the page loads; the R-key recording is not used.
- Audio is optional; a silent page is fine.

Playwright 1.63.0 (playwright-core) is already installed for you in the current directory: node_modules is pre-installed and read-only, so do not run npm install there or npx playwright install (if you want another npm package, install it in a subdirectory); it has no bundled browser, so launch the local Chromium with chromium.launch({ executablePath: "/usr/bin/chromium" }). ffmpeg and python3 (with numpy) are on PATH. You may open your page in headless Chromium, take screenshots or render frames, inspect your own output and iterate on your own before finishing. Close any browser you open as soon as you are done with it.

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 ocean in your own GLSL shaders: a large water surface displaced on the GPU by a sum of Gerstner waves, with foam on the crests, fresnel reflection of a procedural sky, subsurface tint in the troughs and sun glitter. A small fishing boat rides the waves, its height and tilt computed from the same wave function on the CPU so it never clips. A slider moves the weather from calm sunny day to night storm (bigger waves, rain streaks, lightning flashes, darker sky); drag to orbit the camera. Everything is built in code; no external models, textures or HDRIs. 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. It must run at a smooth frame rate on a mid-range phone and touch controls must work. 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.

Build a Three.js scene of two spiral galaxies colliding, simulated on the GPU: at least 100,000 star particles whose positions and velocities live in floating-point render targets updated each frame by your own GLSL simulation shaders (ping-pong / GPGPU), attracted by the two galaxy cores, with additive glowing points coloured by speed and tidal tails forming over time. Drag to orbit, pinch or wheel to zoom, a slider for time speed and a button to restart with a new random collision angle. Show the live particle count and FPS. Everything is built in code; no external models, textures or HDRIs. 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. It must run at a smooth frame rate on a mid-range phone and touch controls must work. 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.

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 endless terrain flyover: the landscape is generated in chunks around the camera from layered noise (fBm plus ridged noise for mountains) computed in your own code or shaders, with level of detail that lowers far chunks, seamless edges between chunks, biome colouring by height and slope (beach, grass, forest, rock, snow), animated water, distance fog and a moving sun with a day to night cycle. The camera glides forward on its own; the player steers with arrow keys or an on-screen touch joystick, and a seed field regenerates the world. Everything is built in code; no external models, textures or HDRIs. 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. It must run at a smooth frame rate on a mid-range phone and touch controls must work. 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.

Build a Three.js jet ski physics simulation on an open ocean. The ocean is an animated, endless wave surface (sum of directional waves) that you also sample on the CPU, so the jet ski floats on it with real buoyancy: several hull sample points push it up by their depth below the surface, giving pitch and roll as it rides over swells, with drag, gravity, and airtime and a splash-down when it jumps off a crest. The rider controls throttle and steering with the keyboard (W/S or arrow keys, A/D to steer) and with on-screen touch controls on mobile (a throttle slider or pedal and a steering stick). Steering leans the craft into the turn and grip falls off at speed. Add a foamy wake trail and spray particles from the hull that scale with speed, a smooth chase camera that follows behind and above, a sky with a sun and a visible horizon where the sea fades into haze, and a small HUD with speed and a sea-state slider (calm to stormy) that changes wave height live. Everything is built in code; no external models, textures or HDRIs. 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. It must run at a smooth frame rate on a mid-range phone and touch controls must work. 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.

# 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 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 single self-contained index.html using Three.js (imported from a pinned CDN; no external models, textures or other assets) that shows a full humanoid powered-armour suit built only from code: primitives, extruded shapes, lathes and generated geometry. Aim for 500 or more distinct mesh parts (plates, joints, pistons, vents, bolts, cables, lights) with a coherent, detailed design and good materials and lighting. Include an assemble / explode animation (parts fly in and lock into place, and can be exploded back out), a sci-fi HUD overlay (targeting reticle, part labels that track parts on screen, a system status panel), orbit controls, and buttons to trigger assemble and explode. It must run smoothly and work with touch on mobile. When the suit is built, log the total number of distinct mesh parts to the console as: PART_COUNT <n>. Write everything into the working directory and finish with a short README.md.

Build a single-page Three.js scene (index.html, no build step, three.js from a pinned CDN or vendored) showing a glossy translucent slime/jelly blob resting on a floor. It must behave as a soft body: clicking or dragging pokes and squishes it, it wobbles and settles with visible jiggle and damping, and it casts a soft contact shadow on the floor. Include subsurface-like translucency, specular highlights, and a small UI to reset and to drop the blob from height. Target 60 fps on a mid-range phone; mobile touch must work. Write everything into the working directory and finish with a short README.md describing controls.

Build a single self-contained index.html (Three.js from a CDN) showing interactive soap bubbles. Each bubble uses a custom shader for thin-film iridescence (colour changes with view angle and film thickness), plus a fresnel rim and a reflection from a procedural environment. Click to blow a new bubble from the cursor. Bubbles drift on a gentle noise wind field, bounce softly off each other, and pop with a small particle burst when they touch the floor or are clicked. Include a UI slider for film thickness, wind strength and bubble count (max 60), and an FPS readout. One file, no build step, no external assets. Save the main page as index.html in the current directory (plus any local asset files you create), with no build step. You may serve it locally and open it in headless chromium (/usr/bin/chromium, software WebGL, no GPU, no WebGPU) 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.

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 "Plush Lagoon", a miniature toy-spa water toy in Three.js. The scene is a small rectangular swimming pool on a pale plinth, seen from a three-quarter view against a soft deep-blue backdrop: glass side walls with thin brass edges so you can see the water from the side, a white coping rim, a tiled pool floor in teal and white, a ladder with brass rails on one side, a potted palm tree beside it and a few small props on the plinth (a folded towel, a bottle). The water is the star: an interactive height-field surface simulated on the GPU (render-target ping-pong or an equivalent) with real-time ripples that spread, reflect off the walls and fade; the surface refracts the tiles below and reflects the environment with a Fresnel term; animated caustics play across the pool floor and walls, driven by the simulated surface; the water volume reads through the glass walls with depth-based tint. Along the bottom, a pastel picker bar offers at least seven cute plush toys built in code from simple shapes (teddy bear, bunny, duck, whale, octopus, panda, cat), each with its own soft colour and name label. The user drags a toy from the bar or taps one and taps the water to drop it in: it splashes, makes rings, then floats and bobs with simple buoyancy (several sample points, sinking and resurfacing, tilting with the waves) and drifts and bumps gently against the walls and the other toys. Holding on a floating toy dips it under; tapping the water makes ripples. Add a small info card for the selected toy, an orbit/pause control and a mood selector that changes the lighting and water colour (for example deep blue night and sunny day). The UI should be soft, rounded and pastel, with clean typography. Everything is built in code; no external models, textures or HDRIs. 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. It must hold at least 30 fps on a mid-range phone, with touch, drag and tap all working, and stay smooth on a laptop. 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.

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 real-time interactive coastal simulation as one single self-contained HTML page using Three.js (CDN imports are fine). The scene: a shallow turquoise lagoon along a white-cliff coastline, with a free-fly camera that can skim across the water surface and dive below it.

Required features:
1. Water surface: animated waves with transparency and real-time refraction of the seabed and submerged objects, sky and cliff reflections, and foam where the water meets the shore and cliffs.
2. Underwater fauna: schools of small fish with flocking behavior that scatter when the camera comes close, at least one larger creature (ray, turtle, or shark) cruising the lagoon, caustic light patterns on the sand, and visible light rays under water.
3. Birds: birds flying above the coastline with flapping or soaring motion, at least some of them diving toward the water.
4. Camera droplets: when the camera rises out of the water, droplets cling to the lens and drip away or clear over a few seconds (screen-space overlay or post-process). Underwater, the view has blue-green fog and tint.
5. Lighting controls: on-screen controls to scrub the time of day (at least sunrise, noon, sunset, night) with matching sun position, sky color, water color, and underwater lighting; stars and a moon at night.
6. Performance: target a smooth 60 fps at 1080p on a mid-range GPU; show a live FPS meter and provide a quality toggle.

The page must run by opening the HTML file directly, with no build step and no server.