A 3D film that lives in one HTML file.
76 seconds over a valley: a stone viaduct, a steam train, a village on a canal and mountains in the haze. The land, grass, water, smoke and music are generated by code in the browser tab. The file holds no models, textures or sound recordings.
- 76 seconds
- 6 shots
- 1,474 lines of code
- 0 models, textures or recordings
The video has no sound. The 3D version plays its generated soundtrack.
What the code draws
- 01
Land and grass
Hills, fields and a canal come from a noise function. About two million grass blades bend in a wind field on the graphics card.
- 02
Viaduct and train
Stone arches, rails and sleepers follow one track line. The locomotive turns its wheels and connecting rods at the speed it travels.
- 03
Smoke and water
Smoke and steam leave the chimney in puffs timed to the wheels. The canal reflects the viaduct and the sky.
- 04
Light and haze
Low evening sun, long shadows and a haze that warms toward the sun. Letterbox, film grain and colour grading are applied in one pass.
- 05
Sound
Chuffs in time with the wheels, rail joints, a whistle, wind, birds and a quiet chord pad. All synthesised with WebAudio.
One request, then checking every frame
- 01
The reference
The idea comes from a demo by Lentils (@Lentils80): a one-file fly-through of a valley with a viaduct and a steam train, built with Claude Opus 5.
- 02
The build
Claude Code with Claude Opus 5.5 wrote the scene, the camera script and the sound as one file on Three.js r185. The first cut was ready in under an hour.
- 03
The check
Every draft was rendered to stills and to a full 30 fps video and reviewed frame by frame. The film runs at about 60 frames per second on an RTX 3060 graphics card.
- 04
The fix
On Chrome's OpenGL backend the screen blinked black from the eleventh second. A particle past the end of its life produced an invalid number, and the glow pass spread it across the frame. One clamp fixed it.
The same method for a client scene
A scene like this can show a product, a place or an event. It runs on a website without a plugin and exports to video frame by frame for social media.
- Hero scene for a product page
- Fly-through of a venue or a tourist place
- Event trailer cut from a live scene
- Short loops for social media
Questions about the film
What do I need to watch the 3D version?
A current browser with WebGL 2: Chrome, Edge, Firefox or Safari. Nothing to install.
Does it work on a phone?
Yes. On phones the scene plants about 620,000 grass blades in place of two million, so it stays smooth. Older phones may still run it slowly.
How was the video made?
The scene renders any moment exactly on request. We captured 2,280 frames at 1080p and joined them into the MP4 on this page.
Can you build a scene like this for us?
Yes. Send a short brief through the contact page: what should be in the frame, where it will run and the deadline.
Idea: Lentils (@Lentils80). Code: Claude Opus 5.5 in Claude Code. Direction and checks: Marketing MIX. x.com/Lentils80