Tom Greenaway
Tom Greenaway
Hi – my name's Tom and I like making things.
Receive updates on my latest games, experiments and thoughts.
"A city of lights."
When you live in Paris, you experience the city in two completely separate ways: the overground streets and the underground metro first created in 1900.
On a standard 2D transit map, those two worlds have nothing to do with each other. Châtelet is just a labyrinth; Chemin Vert is just a dot on a purple line. You can't see how Line 6 climbs out of the earth onto a stone viaduct to cross the Seine or how Line 4 had to be sunk in giant waterproof caissons beneath the river bed in 1908.
I wanted to see both worlds at once: a living 3D architectural maquette of Paris above ground and the subterranean tunnels underneath. An experience that could also act as a way to learn more about the history of Paris too. As I practiced for the French citizenship interview at the start of this year I thought this virtual map could help inspire and teach others about Paris too.
So I opened Antigravity with Gemini 4 Argon and built it across many iterative prompts. Here is how it came together into an interactive historical miniature of this fantastic city of lights.
I kicked things off with this prompt:
"I'd like to create a web application that uses Three.JS to create a really beautiful simulation of Paris's metro system. The idea is that it will show the metro lines under the city but there will also be a visible 3D recreation of Paris itself on top. The 3D recreation of Paris can be made as a blender model using the Blender MCP server we're installing. There should also be a timeline slider that lets us rewind the look of the city and the metro lines to when the very first paris metro line was created/opened. and we should be able to slide up to 2026 today as new lines and stops are added or removed. the metro lines should be colour coded according to the real metro line colours in Paris. the individual metro stops should also be hoverable to reveal information about them. Paris should look stunning and beautiful, showing major monuments but also the haussemanian design of the buildings. The HUD / UI of the app should be minimalist."
Gemini 4 Argon stood up a complete Three.js application with animated trains, colour-coded metro lines, and a 1900–2026 timeline scrubber. To make the surface city feel authentic to the real geometry of Paris, I steered it to pull real OpenStreetMap data and let you control the surface opacity with a fade slider:
"Great start! Can we change a few things. Make the buildings opaque by default, and add a fade slider so you can make it as transparent as you like… Pull actual street map data to make it feel more accurate to the real city."
That brought in real geographic coordinate data, the actual winding curve of the Seine around Île de la Cité and Île Saint-Louis, street-aligned Haussmannian perimeter courtyard blocks, and custom 3D landmarks.
To build the 3D landmarks, I connected Antigravity and Gemini 4 Argon to Blender using the Blender MCP server. The setup is delightfully direct: you leave the Blender desktop app open and running in the background with the MCP add-on enabled, which gives the model a live connection into Blender. Through MCP tools like execute_blender_code (which runs Python scripts directly inside the live Blender instance), get_scene_info, and look (which snaps multi-angle viewport renders — front, right, top, three_quarter — and feeds the images straight back into the model's context), Argon can sculpt a model, look at what it just built, spot proportion issues, and refine the geometry before exporting it to Three.js.
Even with a live Blender connection, though, my first pass at the monuments was too vague. If you just ask for "major Paris monuments," you get simplistic geometric primitives — a couple of grey boxes for Notre-Dame and a glorified cone for the Eiffel Tower — all hidden underneath giant glowing indicator pillars.
First, I got rid of the pillars so you could actually see the geometry:
"At the moment the monuments have a column above them so we can't really see the 3D representations of them. Can we make that much more subtle and really show off the 3D models on the map."
Then, to get the monuments looking like real miniature architecture rather than board-game tokens, I had to be much more explicit with Argon about using Blender to capture each building's defining silhouette and structural anatomy:
"Let's make the 3D models of the monuments much more detailed and recognisable using Blender. Use
execute_blender_codeandlookto inspect each monument from multiple angles as you build it. I want to see the actual architectural features that define each silhouette: Notre-Dame's twin western bell towers, rose window, flying buttresses, and Viollet-le-Duc spire; the Eiffel Tower's four arched base piers, three observation levels, and tapered iron lattice; the white Romano-Byzantine domes of Sacré-Cœur; the Corinthian portico and colonnaded dome of the Panthéon; the golden dome of Les Invalides; the glass pyramid in the Cour Napoléon at the Louvre; and all 9 historic Grandes Gares railway terminals with their glass-and-iron train sheds and clock towers."
Giving the model concrete architectural vocabulary — and telling it to verify its own work with look inside the live Blender session — completely changed the output. You can see the collection lined up on the Blender grid above: from the Eiffel Tower, Notre-Dame, the Arc de Triomphe, Sacré-Cœur, and the golden dome of Les Invalides, down to the Centre Pompidou (complete with its red exterior escalator tube), the Grand Palais glass roof, the Concorde Obelisk, the four open-book towers of the Bibliothèque Nationale de France, and the Grande Arche de la Défense.
Once the 3D monuments were in place, we hit a classic 3D UX problem: hover hijacking. When you tried to hover your mouse over Notre-Dame on the densely packed Île de la Cité, the cursor kept snapping to nearby underground Métro stations (Cité or Châtelet) instead of the cathedral. And because the monuments were assembled from lots of small details — flying buttresses, spires, and iron trusses — hovering over a building felt finicky.
I asked Gemini 4 Argon to make monument selection unmistakable:
"Let's make it so that when you hover over the monuments in the map, they get a 4px black outline."
To make hovering feel effortless, Argon wrapped each of the 22 monuments in an invisible hit-box (so you don't have to pixel-hunt thin spires or open iron lattice), gave surface monuments priority over underground stations when you're viewing the city from above, and drew a crisp 4px black ink outline around the hovered monument — paired with an Art Deco information card right next to your cursor.
If you build a 3D simulation of Paris, the Eiffel Tower at night is non-negotiable. It has to glow in warm golden floodlights from the inside out, sweep its dual rotating searchlight beacons across the sky, and burst into its famous five-minute diamond sparkle (le scintillement).
Our first attempt at night mode had three bugs that made me laugh out loud when I zoomed in:
Why would a golden searchlight cone produce a dark purple ring at its tip?
When Gemini 4 Argon inspected the light-beam code, it found the culprit right away: at the far edge where the beam fades out into the night sky, a tiny negative number was sneaking into the lighting calculation. Once the scene's glow filter tried to blur those invalid pixels, it turned the tip of the beam into a neon purple halo. Clamping the fade to zero and smoothing out the falloff erased the purple ring immediately.
Next, I overhauled the tower's night illumination:
"Can we make the Eiffel Tower illuminated in a gradient from dark orange to yellow? And can we add a button to trigger the sparkle effect."
Instead of flat colour bands, Argon lit the iron lattice with a warm vertical gradient from dark amber at the base up to bright gold at the tip — with a dedicated ✨ Sparkle Eiffel button in the top bar so you never have to wait for the top of the hour.
<select> Dropdown: The SVG Skyline ExplorerLook closely at the right-hand panel in the nighttime screenshot above.
For the first 10 or more prompts, selecting a Métro line or jumping to a monument used standard HTML <select> dropdowns, and every control panel was open on screen at once. Functional but ugly.
"We have a lot of UI visible by default. Could we minimise as much as possible, maybe just a single settings button in the top right… Can we rethink the way the user selects and views details about the metro lines and monuments? At the moment it's a very boring select dropdown."
I followed up with another prompt:
"For the skyline silhouettes of the buildings, can we make it so the image/column is actually a 2d silhouette of the corresponding building ?"
We stripped the HUD back to the bone:
VIEW & SETTINGS and a single 4-button vertical icon strip on the right edge.🚇) tab, the dropdown became a route diagram with circular station nodes, transfer badges, and fake train counters.🏛) tab, the dropdown became an interactive 2D SVG West → East Paris Skyline Profile. Every bar in that chart is a custom-drawn SVG architectural silhouette of its respective building.
Once we had both the 3D surface architecture and the deep underground Métro network working in harmony, I wanted the historical layer to do more than just list construction dates.
If you go through the French citizenship process, you sit an oral interview at the Préfecture called the entretien d'assimilation. You are expected to know the foundational milestones, figures, institutions, and Republican values of France.
Studying those questions from a flat PDF list of flashcards feels abstract. But almost every single milestone in that curriculum happened at a physical place in Paris.
So in the following prompt, I asked Gemini 4 Argon to weave the two together:
"Could you add a historical walking tour that connects the monuments to the history of France and Paris as needed by the French naturalisation exam?"
That became the 📜 History Tour tab shown in the third screenshot above — here paired with X-Ray Mode, which fades the Haussmannian surface into an obsidian ghost blueprint so the subterranean engineering takes centre stage:
Looking back through the 20+ prompts in the session log, the thing that impressed me most about Gemini 4 Argon wasn't that it generated a working 3D app on the first prompt — plenty of models can scaffold a basic Three.js scene.
What stood out was how well it understood my clarifications and directions for iterating, improving the 3D world, and the UX itself:
It turns out the best way to understand how Paris fits together — above ground, underground, and across its history — is to build your own.
Article published on: 15 Oct, 2026