Build Story · 3D explainer · EN / BG
Hydrogen Journey Visualizer: hydrogen, made visible
A full-screen 3D walk through a planned green-hydrogen chain, from sunlight to street lights, in English and Bulgarian.
In one look
The problem
A hydrogen project is a chain of plants, tanks and vehicles that most people never see. A list of megawatts and tonnes does not show how daytime sun ends up as light after dark.
What we built
One full-screen 3D scene and eight steps. Scroll, swipe or use the arrow keys to follow the hydrogen from a new solar plant through electrolysis, storage, refuelling, buses and trucks, street lighting and a gas-turbine blending trial. Each step shows one figure and names its source. Switch between English and Bulgarian at any time.
Where it is now
Live as a single page at project23.d9.army, labelled "Planned configuration, 2024–2030" so it reads as a plan, not a running plant. It is a finished explainer, last changed on 24 September, and it has no accounts, no pricing and nothing to install.
What this would have cost in 2024
About $6.7k and 3-4 weeks
2024 team: 2 people: a 3D web developer and a 3D artist, with a part-time Bulgarian translator. Built here by one founder working with AI in 5 working days over 24 days.
| Piece | 2024 hours |
|---|---|
| 3D scene: eight stations, camera path, particle flows, animation | ~42 |
| Bilingual overlay: captions, step rail, keyboard/wheel/swipe, reduced motion, mobile | ~21 |
| Sourced figures and EN/BG copy for eight steps | ~21 |
| 17 Blender models with a triangle budget and mesh checks | ~53 |
| Model loader, material mapping and swap-in | ~15 |
| Visual restyle and material tuning | ~15 |
| Link preview, icons, manifest, responsive QA | ~11 |
| Total (PERT) | ~178 |
Method: PERT (O+4M+P)/6 per piece; low = O × $25, likely = PERT × $37.5, high = P × $50 (Accelerance 2024 Eastern-Europe band). These are estimates of what a team would have needed in 2024, not invoices.
How it was built
From first commit to current build in 5 working days over 24 days
- From prototype to web app
A standalone Three.js prototype was ported into a web app: eight stations along one camera path, particle flows for electricity, hydrogen, oxygen and vapour, and English and Bulgarian copy. Lights and panel tilt were tuned the same morning.
project created 09:07 UTC · first working port 09:14 UTC - A set of 17 models
Models for the solar plant, electrolyser hall, water basin, tank, refuelling station, bus, truck, car, fuel cell, gas turbine, street lamp and city blocks were built in Blender with a triangle budget, and added to the project in one commit.
17 models · 37,688 of 55,000 triangles · 0 mesh faults found - Models replace shapes drawn in code
A model loader went in first. Then the solar and electrolyser parts, and then the rest, were swapped from shapes drawn in code to the Blender models.
three swaps in 33 minutes (09:42 to 10:15 UTC) - AI-generated meshes, measured
Two 3D meshes made by an AI tool were measured against the hand-built ones. Both came in far over budget and need a full remesh first. Neither is in the live build.
28,474 triangles against a 4,000 cap for the water basin - Link preview and icons
A share image was set so links show a preview, and three days later an H icon and an app manifest followed.
- A black restyle
The scene was restyled to a black base, visuals and materials were tuned, and the step captions moved to the top left.
4 edits in about 30 minutes (13:51 to 14:21 UTC)
Who did what
The founder decided
- A port, not a redesign: the first version kept the prototype's wording, figures and camera path as written.
- Every step names its source, and the page is labelled as a planned configuration, not a running plant.
- Three.js is bundled with the page, and the scene is plain Three.js code rather than a scene framework.
- The whole model set has a 55,000-triangle budget, and came in at 37,688.
- Motion is optional: the page follows the reduced-motion setting, and without WebGL it still shows the captions with a plain message.
AI built and checked
- The web app, built in Lovable from Ilian's written brief, which carried the prototype's source.
- The 17 models, built headless in Blender by a Claude Code session from Ilian's brief.
- The later look changes (black restyle, material tuning, caption position), made as Lovable edits.
Stack
Want something like this for your team?
From one call to something live. The same method is in the Claude Operator Pack.
From the founder
You might also like
Shares Three.js · TanStack Start
Shares React · TanStack Start
Shares React · TypeScript