A synthwave driving experience through your DEV Community articles
Live Demo • Features • Controls • How It Works
🔗 sundaydevdrive.pilotronica.com
Enter your DEV Community username, hit Start Driving, and cruise through a neon-lit synthwave world where your articles appear as roadside billboards. Each billboard shows a title, cover image, and a snippet from the article body. Click any to open the full post.
Built for the DEV Weekend Challenge: Build for Your Community.
Roadside and overhead signs generated from your real DEV posts, complete with cover images, snippets, and reaction counts.
Green road signs display your profile stats: total articles, reactions, reading time, top post, favorite tags, and join date.
Drive with arrow keys or plug in a controller. Full analog steering, throttle, and a right-stick orbit camera.
Shift between Park, Drive, and Reverse. Acceleration, braking, friction, off-road drag, it all feels right.
Chase cam, interior cockpit, side view, and free orbit. Press V to look back.
Neon city skyline, gradient sun, glowing grid ground, and a retro pixel-art car with working headlights and brake lights.
- Your articles (for community members): Enter a username to drive through their posts
- Motivational mode (for community members with no articles): Users with no articles see encouraging messages with links to start writing
- Test drive (for non-members of the community): No DEV account? Take a demo spin anyway and let the game convince you to join the DEV Community
Share a link that drops someone right into your article highway.
| Action | Keyboard | Gamepad |
|---|---|---|
| Throttle / Brake | ↑ / ↓ | RT / LT |
| Steer | ← → | Left Stick |
| Drive gear | D | D-Pad Up |
| Reverse gear | R | D-Pad Down |
| Park | P | D-Pad Left |
| Cycle camera | C | Y |
| Look back | V | R3 |
| Orbit camera | RMB + Mouse Drag | Right Stick |
| Toggle help | H | — |
- Fetches your articles from the DEV API (public, no auth needed)
- Picks 25 random articles and loads full content for snippet extraction
- Generates billboard textures on canvas: titles, covers, quotes from your writing
- Places them along a procedurally generated road that extends as you drive
- All rendering is done client-side with Three.js — no backend required
- Three.js (r170): 3D rendering, loaded via import maps from CDN
- Vanilla JavaScript: ES modules, zero build step, zero dependencies
- Canvas API: Dynamic billboard and sign texture generation
- DEV API: Article and user data (public endpoints, no API key)
├── index.html # Entry point
├── styles/main.css # All styles
├── assets/ # Favicon, poster image
└── src/
├── main.js # Animate loop, physics, event wiring
├── scene.js # Renderer, camera, lights, skyline, ground
├── road.js # Procedural path & road mesh
├── car.js # Car model, gears, headlights
├── camera.js # Chase/interior/side/orbit cameras
├── buildings.js # Neon building strips
├── billboards.js # Article billboard pool & textures
├── stats.js # Stat road signs & welcome banner
├── api.js # DEV API integration & demo mode
├── input.js # Keyboard & gamepad input
├── ui.js # DOM elements & HUD
└── messages.js # Motivational & demo messages
Serve the project root with any static file server:
npx serve .Contributions are welcome! Please:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit changes (
git commit -m 'Add amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open a Pull Request targeting the
developbranch.
No build step, no npm install — just open and drive.
Giorgi Kobaidze (Pilotronica)
- GitHub: @georgekobaidze
- LinkedIn: giorgikobaidze
- Twitter/X: @georgekobaidze
- DEV.TO: georgekobaidze
- Discord: Join the community
Made with ☕ and 🏎️ by Giorgi Kobaidze