Interactive demos
One circuit. Two engines of style.
Silverstone Circuit · Grand Prix layout
Start with the exact code from the initial Grok 4.5 seed prompt (simplified circuit, play / pause / restart, orbit camera), then compare the multi-step refinements — OpenStreetMap centerline, scenery, and a classic 3D sibling.
Prompt 01 · Seed only
Restored from the first session snapshot — before OSM digitization, barrier experiments, or packaging. Single user prompt:
generate using three.js a voxel-style scene of an F1 car driving around a 3D representation of Silverstone circuit. The user should be able to play, pause, and restart the animation as well as rotate the map to look at the circuit and car from different angles.
One-shot · Voxel
Hand-drawn simplified centerline, instanced box asphalt, voxel F1 car, lap timer, and orbit controls — the direct product of the seed prompt (plus a tiny play-button wiring fix so Play actually works).
Prompts 03–16 · Research & package
After OSM research, scenery placement, follow cam, packaging, and the classic 3D sibling — the polished pair that shares a ~5.86 km digitized GP centerline.
Iterated · Style A
Blocky asphalt track and open-wheel F1 car built from instanced boxes. Flat Lambert materials, chunky kerbs, and a playful low-poly garage feel.
Iterated · Style B
Continuous asphalt ribbon, PBR-style materials, gravel run-off, kerbs, pits, and grandstands — plus a follow cam for a third-person chase.
| Aspect | Voxel | Classic 3D |
|---|---|---|
| Track | Instanced box voxels | Continuous ribbon mesh |
| Car | Box-built voxel F1 | Smooth cylinders / boxes |
| Materials | Lambert, flat colors | Standard (roughness / metalness) |
| Path data | Shared Silverstone OSM centerline | |
| Stack | Three.js · Vite · vanilla JS | |
How it was built
Session prompts that shaped Trail Brakers with Grok 4.5 — from the seed voxel scene through Silverstone accuracy, barriers, the classic 3D sibling, and this showcase landing page.
generate using three.js a voxel-style scene of an F1 car driving around a 3D representation of Silverstone circuit. The user should be able to play, pause, and restart the animation as well as rotate the map to look at the circuit and car from different angles.
I hit play but nothing happened
the basic functionality of the game work though it does not look like the actual silverstone circuit. Can you research and look up the real silverstone and model it accurately?
can you ensure the building and the grandstands are in their proper location? Also mark the corners with their names and T numbers?
I think we should make the turn labels taller. Also the grandstands look like they're oriented the wrong way. Can you do some research on what the buildings look like and how we can model them accurately? Also there are some missing patches in the road that needs to be filled in?
can you expand the grass around the track? Some of the stands are going off map
can you have a follow car button which will follow the car from a 3rd person perspective from behind?
there are blue and white blocks around the track, are those supposed to be the walls? Some of them are on the track itself and seem to be randomly placed around the circuit. If they're supposed to be the track walls, can we research the runoff areas, gravel, and walls of silverstone and implement them accurately?
There are some issues with the placement of continuous perimeter walls, blue blocks only at TecPro zones at turns 3–5 (which are labeled or placed incorrectly as they appear to go T5–3 in descending order), Turn 6–7 have perimeter walls that don't seem to connect correctly, are on the track, and have random curves. Also on Maggotts and Becketts as well as T16 Vale. Can you check again by researching and consulting with the visual data of Silverstone to correct these mistakes?
That did not change anything, perhaps we should take a different approach and attempt to place all of the wall segments manually in their proper location as opposed to using math, because the distances from the walls and the track are not uniform. Some will be closer than others especially at the loop and how close it is to maggotts and becketts. So perhaps we should research the track's barrier locations throughout and then place the barriers in the corresponding locations
I think we are nearly there with the barriers and the tec-pro, we need to verify that they all connect and that we don't have overlays like at T3, T6 on both sides, T9 has a slight gap in the barriers, Maggotts and Becketts towards Aintree and the Loop have barrier overlaps. There's also a triangle barrier overlap by T17 Club
I think the barriers experiment was interesting, however it appears too difficult a problem to solve. Remove the barriers and the tec-pro from the track
can you create a separate repo that is a sibling to this one and implement the same silverstone track but in a traditional 3D look?
it does not seem to be running, can you try again?
for the voxel and 3D versions of trail-brakers that was created, can you package them up in a single git repo (perhaps merge them into the a trail-brakers repo) and create a landing page showcase both projects?
can you deploy this to vercel after adding a banner at the top of the landing page that this was made with grok 4.5?