01 / worldGenerate hazards before guidance
Deterministic distance-based functions place pothole fields and compute the line around nearby hazards.
TypeScript · pure track functionsChaos Riders00
Chaos Riders
Read the road. Find the line. Hold your nerve.
World direction / Yaoundé concept art
A visual target for the world: a working taxi, market density, warm dust, and a readable route through the street. This is concept art; a captured browser prototype appears below.
Chaos Riders brings the markets, taxis, weather, and roads of Cameroon into a driving world. My work connects creative direction and product engineering: a launch experience that establishes the world, and a playable browser prototype that puts its central idea under your thumb. The larger game remains in development.
RoleDirection + engineeringindependent project
WorldCameroon firstYaoundé · Douala · Bamenda · Limbe
RuntimeThree.js + Reactbrowser prototype
InteractionSteer / steady / flowtouch + keyboard controls
01
The consequential problem
A world has to survive contact with the player
The place needed to shape the driving, down to the next small correction.
A market street asks different things of a driver than a clean circuit. The road is uneven, openings narrow, and the best route changes as hazards approach. Those conditions offered the core interaction: look ahead, choose a line, and keep the machine settled.
The experience also had to make sense in a browser and on a phone. A large imagined world could establish ambition, but a short playable run had to explain what the player would actually do.
- Give the setting a mechanical consequence.
- Make the first run understandable with touch or a keyboard.
- Keep the visual target and the playable build clearly identified.
02
What I saw
A line is a promise
The guidance on the road has to agree with the road itself.
The racing line becomes useful when it responds to the same potholes that can unsettle the car. In the prototype, hazards are generated first, then the line bends around them. Its purpose is legible in motion: it gives the player a path to read, a reason to steer, and a reference for judging the quality of a run.
03
The decision that changed the system
Make one small drive carry the idea
Build a short loop of anticipation, correction, and earned momentum.
The browser demo begins with a twenty-second clock. Steering selects the route; braking creates room to react; a timed steady action helps control the machine through a hazard field. Clean driving earns flow feedback and a speed boost. Camera response, road motion, and the HUD make the consequences visible.
That compact loop gave the project a concrete center while the regional world, vehicles, and broader game continued to develop.
01Read ahead
The line reveals a route through the approaching pothole field.
02Choose the opening
Steer toward the route and brake when the next correction needs more room.
03Steady the machine
Time the steady action as the field challenges the car's stability.
04Carry the momentum
Clean sectors trigger flow; impacts and line quality remain visible in the run feedback.
04
System anatomy / rationale / surfaces
The same road, through every layer
Track math, vehicle response, and presentation share one playable situation.
The launch prototype has its own focused runtime. It pairs deterministic track functions with a Three.js scene and a React interface, while keeping the larger game's engine exploration separate.
Decision anatomy / select a knot
Pressure did not decorate the architecture. It determined it.
Before / tension
The visible path and the collision system could describe different versions of the road.
The knot / decision
Generate deterministic pothole fields, then use smooth repulsion and road bounds to shape the line around them.
After / consequence
Rendering and collision can query the same track functions at any distance. The route has a mechanical basis.
02 / responseTranslate input into a felt consequence
Steering, braking, timed stability, collision response, and flow operate on the current run state.
Touch · keyboard · frame loop03 / sceneKeep the road and the feedback together
The rendered road, hazard positions, vehicle, camera, and HUD express the same driving state.
Three.js · React Three Fiber04 / entryLet the visitor choose when to drive
The launch page introduces the world, then loads the playable demo at its explicit play interaction.
React lazy · Suspense · ViteArchitecture rationale / pressure → choice → consequence
PressureDecisionWhy it mattered
A decorative line can disagree with the hazardsCompute guidance from the generated potholes
What the player sees refers to the same situation the collision loop evaluates.
A short demo needs more than left and rightCombine route choice, braking, stability timing, and flow
A small input vocabulary supports anticipation and increasingly deliberate control.
A rich world can become an expensive first impressionMake the playable runtime an explicit lazy-loaded entry
Visitors can understand the setting before committing to the driving interaction.
Surface atlas
The system becomes tangible through the places people encounter and use it.
World introduction
Regional imagery connects markets, highlands, rain, and coast to distinct driving conditions.
Playable run
A bounded browser scene puts line reading, steering, braking, and stability under direct control.
Run feedback
The clock, speed, line quality, impacts, and flow make performance inspectable during and after a run.
Vehicle garage
The launch experience introduces the machines and their personalities; model development continues alongside the prototype.
Runtime
Three.js · React Three Fiber · TypeScript
Interface
React · Framer Motion · touch + keyboard
Delivery
Vite · lazy-loaded demo · WebP imagery
Technology atlas / select a tool
The tools behind the decisions.
Select a tool to see the role it plays in this system.
- Rendering / Playable prototype
Three.js
Road geometry, vehicles, lighting, and hazards share a real-time scene that responds to the player's driving.
05
Authentic proof
Playable prototype / captured browser build
An existing development capture of the playable scene. The road, taxi, racing line, countdown, speed, and line-quality readout are rendered together. This documents the prototype rather than a released full game.
Regional direction / Bamenda concept art
The Bamenda world concept shifts the driving proposition toward highland climbs and control. Regional artwork establishes the intended range; it does not imply that every location is already playable.
06
What changed in my operating model
Materiality is also response
A world starts to feel real when a small action changes what happens next.
The strongest connection between the art and the prototype is the demand the road makes on the player. A turn, a patch of broken ground, and the decision to brake can carry as much identity as a large establishing image. The work continues at that boundary: bringing the visual direction closer to the playable response without losing clarity.
The current evidence is a launch experience, a playable browser prototype, and an evolving game and asset pipeline. The broader game and its regional modes remain in development.
- Let the environment determine the interaction.
- Use motion and feedback to explain consequence.
- Show the visual ambition and the running build with equal precision.