No. 05 · Case study · Live 3D scene
Under Sail
A live 3D seascape from a five-sentence prompt
A sailing yacht at sea, rendered live in your browser: waves computed the way film studios do it, a sky lit by the physics of sunlight, and four kinds of weather. Claude Code built all of it from one short prompt, with no 3D models, no photos and no image files.
Your browser can't run the live 3D scene, so this is a still frame from it.
How to use it
- Drag
- Look around the boat. On a phone, swipe sideways.
- Pinch
- Move closer or further away. On a computer, Ctrl and scroll, or just scroll in full screen.
- Weather
- Golden hour, a squall, sea fog or moonlight. The sea changes with the wind.
- 1 to 4
- Once you've clicked the scene: switch the weather. The arrow keys look around, + and - zoom, Space pauses.
What you’re looking at
Everything in that frame is made by code, right now, in your browser. There’s no 3D model of a boat, no photo of a sky, no video of water and no image file. The sea, the clouds, the hull, the sails and the logo on the mainsail are all computed by your device’s graphics chip, dozens of times a second. Switch the weather and see what changes: the waves build up or flatten out with the wind, the light follows the sun or the moon, and in the squall you get rain, whitecaps and lightning.
I wanted to see how far Claude Code gets with 3D, so I gave it five sentences (they’re at the bottom of this page) and let it work. One of the five has a typo: “floating in the clean”. Claude Code read it as the open sea and carried on.
What the prompt left open
The prompt asks for a boat, as photorealistic as possible, in cinematic weather and light, with the Good AI Guide on the mainsail. And it asks for three.js, a free library for 3D graphics in the browser. Every other decision was Claude Code’s. A few of them:
Waves that behave like waves. The sea is computed the way film and game studios do it: measurements of how wind builds up waves (oceanographers call the result the JONSWAP spectrum) are turned into a moving surface with a fast Fourier transform, a standard piece of signal maths, at three different scales, every frame. More wind means taller, longer and steeper waves, and foam where the crests fold over.
A boat that floats on them. The longer waves are added up a second time, on the processor, at five points under the hull, and the boat follows them on springs. That’s why it pitches and rolls with some weight instead of copying every ripple.
Light that follows physics. The sky comes from a model of how sunlight scatters in air, haze and ozone, which a graphics researcher at Epic Games published in 2020. It’s why the low sun turns orange, why the sky above it stays blue, and why moonlight gives you the same sky, only much darker. The boat is lit by the same sun, through the same air.
Sails that glow. Sailcloth lets light through. With the sun behind them, the sails light up and the seams and battens show as darker lines. The print on the far side of the mainsail shows through too, faintly and mirrored, as it does on a real sail. Each side has its own print, placed so it reads the right way round from that side.
Details nobody mentioned. The boat’s home port is Basel, the home port of every yacht that sails at sea under the Swiss flag, and it flies the Swiss ensign. It leaves a wake, its navigation lights come on at night, the camera rides the swell like a camera boat would, and on a narrow phone screen the view widens so the whole boat stays in frame.
It also has a name on its transom: Brilliant New Hire, the picture I use for what AI is at work. That didn’t come from the five sentences. Claude Code ran inside this site’s code and could read my notes on the site and on me, so it knew about the brilliant new hire and that I live in Switzerland. That’s where the name, the home port and the flag come from, and a fresh chat with the same prompt won’t give you them. It’s what Your AI Has No Idea What Your Company Does is about, on a small scale: what an AI knows about you and your work shows up in what it makes.
What’s not real
Some of it is faked:
- The clouds are flat: a painted layer with lighting tricks. Look at them for a while and you’ll see it.
- The boat doesn’t push the water. There’s no fluid simulation: the sea is simply kept out of the hull, and the foam is painted where a real hull would make it.
- The sails don’t really catch the wind. Their shape comes from a formula (how far out the boom is, how much the sail twists toward the top) plus a little flutter.
- The rain only falls near the camera, and the lightning is a drawn effect.
- Phones and tablets get a lighter version, and some of them a simpler one still: fewer waves, simpler clouds and no reflection of the boat in the water. If frames still come too slowly, the scene lowers its resolution by itself.
How it went
Claude Code planned the scene, wrote it, and checked its own work in a loop: render a frame in a browser without a window (driven by a script, so it could take screenshots), look at the screenshot, fix what was wrong, and go again. It went round that loop about 40 times. Some of what it caught:
- The sun came out as a black dot. It was brighter than the image format could store, and the overflow turned it black.
- The rain was invisible. Every raindrop faced away from the camera, and graphics chips skip surfaces they see from behind.
- The squall first looked like a mild grey evening. The haze under the storm cloud was being lit as if the sun reached it.
- The sails had stripes, because each sail is a single sheet and it was casting shadows onto itself.
One of its own tests flagged the waves as too high: 2.3 metres in a wind for which a textbook rule of thumb predicts 1.6. Claude Code worked out that the rule of thumb and the wave spectrum the scene is built on already disagree by about 30 percent, treated the spectrum as the reference, and changed the test rather than the sea.
The finished scene is about 6,300 lines of code in 19 files, tests for the maths included. I haven’t changed a line of it.
The prompt has no company data in it, so you can try it on whatever you have, including the assistant your employer gave you. If you want to see what a coding agent is like to work with, Using Claude Code is where I’d start.
The prompt, word for word
Copy it, paste it, see what you get
These five sentences are everything I typed. Claude Code also had this site's code and my notes on it to read. If you try it, put your own company's name on the sail.
For the "What's possible" section, I want to look into your 3D modelling abilities and your prowess with three.js. Build a 3D render of a boat floating in the clean, as high quality and photo realistic as possible. Create cinematic conditions through weather and light. The boat should have Good AI Guide branding on its main sail. Use three.js.
A chat assistant like Claude, ChatGPT or Gemini will likely give you a simpler version in a single file. For a scene like this one you'll want a coding agent such as Claude Code or Codex, one that can create files, run them in a browser and look at what it made. Here, Claude Code went round that render-and-look loop about 40 times on its own. If yours doesn't, ask it to.