Eclipse

Working Screenshot of the Project

Our Inspiration:- Our inspiration for this project came directly from the hackathon's "Competitive Mobility Systems" theme. We were immediately drawn to the high-speed, data-driven world of Formula 1. Our vision wasn't just to make dots move around a track; it was to capture the experience of watching a modern race. The core idea was to build a simulator that provided the same data-rich, F1-style "Live Analytics" HUD that you see on a real broadcast. We wanted to model the story of the race, complete with a live leaderboard, lap times, speed, and overtakes, all in a clean, accessible, and lightweight package.

A little back story of an inspiration that lived with us even before this, both of us bonded over F1, watching every turn like our life depends on it, cheering every win of Verstappen, with Monza being our favorite. This project is personal to us and our friendship.

How We Built It:- Given our tight time constraints, we made a key strategic decision: build the entire application as a single index.html file. This approach has zero dependencies, requires no npm install, and runs instantly in any modern browser, perfect for a hackathon submission. The project is built on three core technologies loaded directly from a CDN: i. React (with JSX): We used React to manage the complex, real-time state of the simulation. It handles the game loop, the positions of all the cars, the leaderboard logic, and all the UI components.

ii. HTML5 & SVG: The "Monza-like" circuit isn't a video or an image. It's a complex within an SVG element. The F1 cars themselves are also custom-drawn SVG shapes.

iii. Tailwind CSS: All styling, from the glass-effect HUD to the layout, is handled by Tailwind CSS for rapid development.

The "magic" of the animation comes from a modern CSS property, offset-path, which we used to "attach" our SVG cars to the SVG track. A requestAnimationFrame loop in React continuously updates each car's offset-distance (its progress along the track), creating the fluid motion. The simulation logic handles randomized speeds, lap counting, and leaderboard sorting on every frame.

The Challenges We Faced (And Our "Strategic Pivot")

Our biggest challenge was, without a doubt, our initial ambition.

The 3D "Rabbit Hole" We were initially convinced we could build a full 3D version of this simulator. We spent a significant portion of our time battling three.js, react-three-fiber, complex camera logic, 3D model failures, and a nightmare-inducing series of "white screen" and "green screen" crashes. At one point, we had cars moving backward on an invisible, elevated track. It was a classic case of over-engineering.
The Pivot With the clock ticking, we made the most important decision of the hackathon: we pivoted. We realized that a polished, working 2D simulator was infinitely better than a broken, ambitious 3D one. This meant throwing out all our 3D code and starting fresh, which was a terrifying but necessary choice.
The 2D "Final Sprint" The new challenge was mastering 2D SVG animation. We had to fix stubborn lap-counting logic, smooth out a "glitchy" speedometer, and fight a whole new generation of bugs. But this time, the problems were solvable. We tackled each bug one by one, from the logic governing the leaderboard times to the math for the car speeds, until we had a stable, functional, and polished app.

What We Learned

This project was a crash course in hackathon-driven development.

Polish > Features: A simple, stable, and polished app wins over a complex, broken one every time.

The Power of the Pivot: Knowing when to abandon a failing approach is one of the most valuable skills a developer can have. Our decision to switch to 2D is the only reason we have a working project.

Zero-Dependency Builds: The single index.html file approach is incredibly powerful. It "just works" and is the perfect way to present a project to judges without friction.

Resilience: We went from a non-functioning 3D nightmare to a fully working 2D simulator by being resilient, trusting our instincts, and just debugging