Original design & concept
The FireTrace concept, layout and visual design come from Dilum Sanjaya and his awesome video: x.com/DilumSanjaya/status/2108241054298415258. This prototype rebuilds that dashboard with a working, interactive map in place of the video mockup. All credit for the original design goes to him.
How it was built with Claude
The app was built end to end by Claude (Opus 5.5) in Claude Code, starting from a single prompt:
Build the map dashboard in this video including an interactive map instead of the video mockup. For the interactive map, use Mapbox (mapbox rendering + base map). Do not model planes or driving cars yet. Make the map style and the burning fire as faithful as possible.
- Studied the reference. Downloaded the video, extracted frames with ffmpeg and sampled UI and map colors from the poster frame.
- Picked the location. Read the cursor coordinates shown in the video (34°17′N 117°55′W) to place the incident on real San Gabriel Wilderness terrain.
- Wrote the app. Spread model, fire shader, tree layer, Mapbox style and the full dashboard UI, as plain ES modules with no build step.
- Checked its work visually. Rendered the app in headless Chrome and compared each capture with the reference frames, tuning fire shape, char tone, trees, camera and labels over several rounds.
- Deployed it to Vercel.
A person directed the work and reviewed the result. Claude wrote the code and did the visual tuning.
Services
| Mapbox GL JS v3.32 | Map rendering: 3D terrain, draped layers, custom WebGL layer, markers |
| Mapbox Satellite | Aerial imagery, recolored in-style with raster-color |
| Mapbox Terrain-DEM v1 | 3D terrain and hillshade, plus elevation tiles for the fire model, trees, slope readout and elevation profile |
| Mapbox Streets v8 · Terrain v2 | Water, roads, admin lines, structures and contours (2D mode and optional layers) |
| Google Fonts (Inter) | UI typography |
| Vercel | Static hosting. There is no backend: everything runs in the browser. |
Architecture
Terrain-DEM tiles→geo.js512² elevation grid→fire-model.jsarrival-time grid→fire-render.jsWebGL2 fire canvas→Mapbox mapdraped on 3D terrain
geo.js fetches Terrain-DEM tiles for a 16 km square and resamples them into an elevation grid.fire-model.js runs a minimum-travel-time spread (wind, slope, fuel, spot fire) and maps it onto clock time so the burned area follows the incident's acreage curve. It also derives the perimeter, head path, spread vectors and retardant drops.fire-render.js shades char, embers, streaks, flame front and glow for the current time into a canvas that Mapbox drapes as a canvas source.trees.js draws instanced conifers and oaks in a Mapbox custom layer. They char as the front passes.map.js holds the style and overlays. ui.js and main.js drive the timeline, charts, key events, layers, weather and cursor inspector from one shared time value.