HSG Grand Prix is a live event race visualizer built for a student charity event supporting animal welfare. The display runs as a projected screen in the venue while an operator manages the race from a separate control panel — no technical knowledge required.
Six real F1 teams (Ferrari, Red Bull, Mercedes, McLaren, Alpine, Aston Martin) race across the screen, each represented by their official branding, team colors, and a custom SVG car.
The race screen features:
- Live lane reordering: Team rows slide up and down smoothly as rankings change, always showing who is leading.
- Animated scrolling track: The road surface scrolls continuously to create the illusion of movement, with per-lane speed changes during turbo.
- Proportional car positioning: Cars spread across the full track width relative to each other — no bunching, even at high scores.
- Countdown sequence: A full-screen 3-2-1-GO! sequence with F1-style starting lights before the race begins.
- Winner ceremony: Confetti, team color highlight, and an adaptive podium (1, 2, or 3 places based on how many teams scored).
The operator control panel includes:
- Score buttons: +1, +5, +10, −5 per team, with turbo ×2 multiplier when active.
- Random events: Crash (car shakes and falls back), Turbo Boost (road speeds up, points doubled), Pit Stop (car pauses for a set duration then resumes).
- Race controls: Start with countdown, Stop, Declare Winner (auto-selects highest scorer), and Reset.
Built entirely with vanilla HTML, CSS, and JavaScript — no frameworks, no backend. The two pages communicate in real time via the browser's BroadcastChannel API and are deployed as static files on Vercel.
The charity angle is embedded throughout the experience — the winning team's contribution goes toward an animal welfare donation, making the race both competitive and meaningful for attendees.