A self-playing 3D documentary of the 6 June 1944 landings, rendered on the real terrain of Normandy, with a directed cinematic camera and bilingual narration.
▶ Try the live demo · 🔧 Built on the open engine, fork your own
D-Day, 6 June 1944, was Operation Overlord: the Allied assault on German-occupied France, and the largest seaborne invasion in history. This replays it in 3D on the actual terrain of Normandy: real elevation, real satellite imagery, projected to scale. A camera directs itself across the landings, over historically-sourced troop movements, the real June 1944 flags, bilingual narration, weather, and a day/night cycle. Every frame is the live engine. Nothing is mocked up. No build step, no backend, no API keys: one folder of static files that runs in any browser.
Just after midnight, three airborne divisions seized the flanks: the US 82nd and 101st over the Cotentin peninsula around Sainte-Mère-Église, and the British 6th east of the Orne at Pegasus Bridge and the Merville Battery. At the landing hour the seaborne assault hit five beaches: Utah and Omaha (American), Gold and Sword (British), and Juno (Canadian), with Free French commandos at Ouistreham. Omaha, facing the veteran German 352nd Division, came close to disaster; the other beaches broke through the Atlantic Wall. By nightfall the Allies held five beachheads, not yet linked and with Caen still in German hands, but they had a foothold in Europe, at a cost of at least 4,400 Allied dead.
- 🗺️ Real Normandy, to scale. Actual SRTM elevation and Sentinel-2 satellite imagery, projected by real lng/lat. Not a stylised map.
- 🎬 It directs itself. A cinematic "Director" plays 6 to 9 June as a sequence of shots; grab the camera any time to free-look, and it resumes.
- ⚔️ Historically sourced. Dated troop movements, the five beaches, the airborne drops, the commanders, and the real June 1944 flags (the 48-star US flag, the green-leaf Canadian Red Ensign, the Free French tricolour with the Cross of Lorraine, and the German Iron Cross, never the swastika).
- 🌧️ Atmosphere. Naval gunfire, smoke, the Channel weather, and a day/night cycle.
- 🌏 Bilingual. 中文 and English narration and labels throughout.
- ⚡ Zero infrastructure. No build, no backend, no API keys; runs offline from static files.
- 🤖 Engineered with AI, in the open. Built through agentic engineering with Claude Code, and running on an open-source engine anyone can fork.
 00:00 · The Airborne Drops. The US 82nd and 101st drop over the Cotentin to seize the western flank. |
 06:30 · Bloody Omaha. The 1st and 29th run into the intact, unexpected 352nd Division. |
 07:25 · Gold, Juno, Sword. The British and Canadians break the Atlantic Wall; the French free Ouistreham. |
 Afternoon · 21st Panzer. The only armoured counterattack of the day drives for the sea. |
Every still above is a real frame from the live engine over real SRTM elevation and Sentinel-2 satellite imagery. Geography is present-day; the 1944 coastline and defences differed, so see Historical accuracy below.
If this made you think "wow, AI can build that?", a ⭐ helps other people find it.
Map tiles must be loaded over HTTP (same-origin). Opening index.html via file:// will not work.
-
Fetch the terrain and imagery tiles (first time only):
node tools/fetch_tiles.mjsThis downloads the elevation and satellite imagery tiles for the Normandy bounding box from their source providers into
lib/tiles/. No account or API key is required. -
Serve and open:
node tools/serve.jsthen open http://localhost:5050. (Windows: double-click
start.bat; macOS/Linux:sh start.sh.)
- Terrain: AWS "Terrarium" elevation tiles (SRTM/USGS, public domain) decoded to a real height-mesh, Web-Mercator, to scale (with a fixed vertical exaggeration for legibility).
- Surface: EOX Sentinel-2 cloudless 2016 satellite imagery draped over the terrain.
- Direction: a state-machine "Director" plays a fixed storyboard of shots; free-look pauses it.
- Everything is data-driven from
data.js(forces, dated movement tracks, front lines, weather, storyboard, narration). The.jsmodules are the engine;index.htmlis the page.
This documentary came before the engine it now runs on existed, so it was built the harder way, through agentic engineering. It began as a written brief and was engineered by hand from there, pass by pass: the architecture, the historical research, and the shot-by-shot direction that turn a brief into a finished film. Not prompt-to-app. The reusable engine, cinematic-3d-battle-engine, was extracted from this work, so the next battle does not have to be built the hard way.
This documentary runs on cinematic-3d-battle-engine, an open-source engine that renders any battle, historical or fictional, as a self-playing 3D documentary on real-scale satellite and elevation terrain. You describe a battle in a data file and the engine renders it: no build, no backend, no API keys. Clone the engine, follow its PLAYBOOK, and make your own. See it applied to another campaign in the Battle of Hong Kong 1941 (live demo).
- Code (the
.jssource,index.html,tools/): MIT, seeLICENSE. - Narration, scenario data and text content: CC BY 4.0, https://creativecommons.org/licenses/by/4.0/.
- Bundled and fetched third-party software and data (Three.js, Sentinel-2 imagery, SRTM/USGS elevation) retain
their own licenses; see
THIRD_PARTY_NOTICES.md.
- Satellite imagery: Sentinel-2 cloudless 2016 © EOX IT Services GmbH (s2maps.eu); contains modified Copernicus Sentinel data.
- Elevation: SRTM, courtesy U.S. Geological Survey via AWS Terrain Tiles.
- 3D engine: Three.js (MIT), via cinematic-3d-battle-engine.
- Background music: "Gray Tide at Normandy", composed by Keith Li with Suno.
- Historical sources: Wikipedia "Normandy landings"; Gordon A. Harrison, Cross-Channel Attack (U.S. Army Center of Military History); Cornelius Ryan, The Longest Day; the Imperial War Museums; the National WWII Museum; the Juno Beach Centre; and the U.S. National D-Day Memorial (casualty figures).
This is an illustrative reconstruction, not an authoritative tactical record:
- Geography is present-day. The satellite imagery and elevation are modern. The 1944 coastline, the Cotentin marshes the Germans deliberately flooded (since drained), the Atlantic Wall fortifications, and postwar construction (the Ouistreham ferry port, the Mulberry harbour remains at Arromanches, modern roads) all differ from June 1944. Beaches and unit positions are shown only approximately, anchored to real place-name coordinates.
- Strengths are D-Day approximations. About 156,000 Allied troops landed on 6 June (roughly 73,000 American and 83,000 British and Canadian, including some 23,400 airborne). German divisions are shown at representative strength, not their full committed force.
- Troop positions are narrative-schematic. They are anchored to real coordinates, not an hour-by-hour tactical map.
- Unit markers fly the real flag each force used in June 1944: the 48-star United States flag (1912 to 1959), the 1801 Union Flag, the Canadian Red Ensign (green maple leaf, 1922 to 1957), the Free French tricolour with the Cross of Lorraine, and, for the German forces, the Iron Cross (Balkenkreuz), the Wehrmacht's insignia. The Iron Cross is used deliberately and not the swastika: it is historically accurate, legal everywhere including Germany, and avoids a prohibited symbol.
Built by Keith Li. Find me on LinkedIn.