One prompt, one file.
Built with Claude Code from the prompt below, then fitted to this page: a city block that builds itself, then loops. Copy the prompt, swap the parts in brackets for your own subject, and paste it into Claude Code.
Build a single-file web page (HTML, CSS and JS, no build step) that plays a looping 3D animation of [a busy corner coffee shop on a city block].
Tech: Three.js [0.186.1] from a CDN through an import map, with its addons. RoundedBoxGeometry for every block, MeshStandardMaterial, one sun with soft shadows plus a hemisphere light, and an ambient occlusion pass (GTAO) through EffectComposer, finished by OutputPass with neutral tone mapping so brand colours stay true. Reuse one geometry per shape and one material per colour, and use a seeded random generator so every load looks the same.
World: a floating diorama on one rounded slab, with a soft shadow beneath it. Pack it with recognisable props built only from simple shapes: [buildings with window grids, trees, cars, delivery scooters, people, street lamps]. Lots of small moving parts, each with a reason to move.
Motion: on load the world builds itself in about a second, pieces rising and popping into place with a little overshoot, from the centre outwards. That plays once. After it, everything runs on a seamless [10]-second loop: [customers queue and step inside, scooters drive off and come back, cars loop the block]. Drive every motion from the loop time and give each one a whole number of cycles per loop, so the last frame matches the first. Camera: a slow eased sway around the slab with a gentle push-in, on the same loop.
Style: clean isometric product render with a narrow field of view (about 22°), looking down about 35°. Off-white ground [#F2F3F5], [white and pale grey models with ink #0B0B0C details], and one accent colour, [ultramarine #1E3BFF], only on the things that matter. No textures, no 3D text.
Overlay: a frosted-glass card titled "[Daily Grind · Live Sales]" with three stats that tick up as customers go in: [orders, coffees, revenue].
Frame: [fill a 1080×1920 frame], no scrollbars, autoplay on load. Cap the pixel ratio at 2, pause when the tab is hidden, and with reduced motion show the finished scene standing still. Expose window.renderAt(seconds) to draw one exact frame, so the loop can be recorded as video.