A retro traffic light simulation built with R3F and XState. Watch cars stop for pedestrians, emergency vehicles override the system, and enjoy the synthwave aesthetics.
| Technology | Purpose |
|---|---|
| React | UI framework |
| TypeScript | Type-safe JavaScript |
| Vite | Build tool and dev server |
| React Three Fiber (R3F) | React renderer for Three.js |
| Three.js | 3D graphics library |
| @react-three/drei | Useful helpers for R3F |
| @react-three/cannon | Physics engine integration |
| @react-three/postprocessing | Post-processing effects (bloom, vignette, noise) |
| XState | State machine library for traffic logic |
| Biome | Linting and formatting |
| Tool | Purpose |
|---|---|
| GitHub Copilot | AI pair programming |
| Claude Opus 4.5 | AI assistant |
The traffic light logic is powered by an XState state machine. You can visualize and interact with the machine below:
The traffic system uses a parallel state machine with two concurrent states:
trafficLightSystem (parallel)
├── carLight
│ ├── green → Cars can go
│ ├── greenWaiting → Waiting before pedestrian crossing
│ ├── yellow → Prepare to stop
│ ├── red → Cars must stop
│ ├── redWaiting → Brief pause before resuming
│ └── yellowToGreen → Prepare to go
│
└── pedestrianLight
├── dontWalk → Pedestrians must wait
├── waitingToWalk → Signal transitioning
├── walk → Safe to cross
└── flashing → Finish crossing soon
| Event | Description |
|---|---|
pedestrian_button |
Pedestrian requests to cross |
emergency |
Emergency vehicle triggers override |
clear_emergency |
Emergency mode ends |
- Node.js 18+
- pnpm (recommended) or npm
# Clone the repository
git clone https://github.com/yourusername/midnight-transit.git
cd midnight-transit
# Install dependencies
pnpm install
# Start development server
pnpm dev| Command | Description |
|---|---|
pnpm dev |
Start development server |
pnpm build |
Build for production |
pnpm preview |
Preview production build |
pnpm lint |
Lint and fix with Biome |
pnpm format |
Format code with Biome |
MIT