The Slot: Freedom Through Constraint
The story behind The Slot
Inspired by Scalextric on Wikipedia
Built with Three.js · EffectComposer (UnrealBloomPass) · CatmullRomCurve3 · BufferGeometry
Techniques Centrifugal Physics · AI Opponents · Trail Rendering
Direction Capture the purity of slot car racing — one input, real physics, neon aesthetic — as a browser-based racer with AI opponents
Result A bloom-soaked 5-lap race on a figure-eight circuit where you control only speed, corners punish excess, and trails stream behind every car as you find the edge
The Story
Scalextric launched in 1957 and became the defining slot car racing brand. The concept was beautifully simple: tiny cars with a pin underneath that locked into a groove in the track. You couldn’t steer. The slot determined your path.
You only controlled one thing: speed.
Press the trigger and the car accelerates. Release and it slows. That’s it. One input.
But from this constraint emerged infinite skill. Corner entry speed. Braking points. The exact moment to lift before a hairpin. The courage to stay on the throttle through a gentle curve.
Simplicity created depth. The slot set you free.
The Take
We built a neon slot car racer that captures what made the original compelling: the purity of single-input gameplay.
Four cars race a figure-eight inspired circuit. You control the white car in lane one. Three AI opponents challenge you across five laps. Click or tap to accelerate. Release to slow down.
The stakes are real: go too fast into a corner and centrifugal force will fling you off the track. A one-second penalty while you reset. Your opponents don’t wait.
But you have an advantage: your car’s top speed is 20% higher than the AI. If you can nail your corner entry, you’ll pull ahead on the straights.
The Tech
Three.js powers the 3D rendering, with post-processing creating the neon aesthetic. The track geometry is generated from a CatmullRomCurve3 - 21 control points defining the circuit’s shape. From this curve, we extrude the track surface and generate lane lines with offset calculations.
The bloom effect uses UnrealBloomPass with carefully tuned settings: strength 1.5, radius 0.4, threshold 0.2. These values catch the orange lane lines and car glow without over-saturating. Each car has three layered meshes - solid body, inner glow, outer glow - creating depth in the neon effect.
Physics run at 60fps with velocity-based movement along the track curve. Curvature is calculated using finite differences on the tangent vectors. When speed exceeds safe limits for a given curve radius, the centrifugal calculation triggers an off-track event.
AI cars look ahead 8% of the track to anticipate curves. Each has a slightly different aggression level based on lane position. They’re beatable, but they don’t make it easy.
Trail effects follow each car - 50-point line strips with vertex colors fading from full brightness to transparent. The trails only appear when speed exceeds 30% of max, creating visual feedback for your racing rhythm.
The Experience
Tap to start. The race begins.
Your first instinct: hold down, go fast. This works for the opening straight. Then comes the first corner.
Too fast. You fly off. One second feels eternal as your opponents surge past.
Try again. This time, lift before the corner. Enter slower, exit controlled. You’re behind, but you’re learning.
By lap two, you’ve found the rhythm. Accelerate, lift, accelerate, lift. The track has a language and you’re starting to speak it.
By lap three, you’re challenging for position. The bloom-soaked neon blurs past. Trails stream behind every car.
At the finish, your time displays. Your position glows gold, silver, bronze, or nothing.
But the real reward isn’t the podium. It’s the moment you found the edge - the exact limit where speed meets control, where one more millisecond of throttle would send you flying but you held it, you held it, and you flew down the straight with the slot guiding you home.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.