HSG Grand Prix — Live F1 Race Visualizer

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.