TurboVerse

Inspiration

We wanted to create an engaging, lightweight way for racing fans to visualize how different cars perform head-to-head. Instead of static spec sheets, we imagined an interactive experience combining modern web animation and immersive sounds to bring racing comparisons to life.

What it does

TurboVerse lets users pick any two race cars and a track, then watch a dynamic simulation comparing their performance. It displays the winner with smooth animations and authentic engine audio, making the process both informative and entertaining.

How we built it

We built TurboVerse using Next.js and TypeScript for a modern, performant framework. Framer Motion powers all the animations, while Howler.js handles engine and finish sound effects. Tailwind CSS provides a clean, responsive design. All car and track data are stored locally to keep it fast and simple.

Challenges we ran into

One challenge was balancing design and performance—especially making sure animations and audio synced properly on different devices. We also spent time refining the visual style to feel modern without overwhelming users.

Accomplishments that we're proud of

We’re proud of delivering a polished, responsive single-page experience that feels engaging and intuitive. The combination of smooth animations, neon-inspired design, and realistic sounds creates a satisfying user experience.

What we learned

We learned how powerful modern front-end tools can be for building interactive experiences quickly. Working with Framer Motion and Howler.js gave us new insights into synchronizing visuals and audio in a web app.

What's next for TurboVerse

We’d love to expand TurboVerse by adding more cars and tracks, incorporating detailed performance stats, and letting users customize vehicle setups. We’re also exploring multiplayer mode so friends can race virtually in real-time.