Every race replay needs a way in. My first idea was the obvious one: five red lights, then lights out. Then I checked the data. There was no lights out in Monaco in 2022.
What actually happened
Lights out was due at 15:00, and it was pouring. Race control suspended the start and pushed the formation lap to 15:09, then to 15:16, behind the Safety Car with every car on full wets. Then came the red flag. The race finally got going at 16:05, behind the Safety Car, with a rolling start.
So my loader isn't a countdown. It's a countdown that keeps failing. That's more honest to the day, and a lot more fun to design.
Six beats, all real
Every message and every time on screen comes from race control's own log, which I pulled with FastF1. I didn't write a single word of it. The loader has six beats:
- 15:00. Rain on the lens, the original start time.
- Start procedure suspended. 15:00 gets crossed out and 15:09 takes its place.
- Formation lap at 15:16, behind the Safety Car, on extreme wets.
- Red flag. The clock stops showing a time and says SUSPENDED.
- The rain eases. The race will resume at 16:05.
- Safety car will enter pits: rolling start. Over to the race.
The crossed-out times are my favourite part. A loading screen usually hides how long you've been waiting. This one shows you every time it was wrong.
What I threw away
- The five red lights. They're iconic, and they never happened that day.
- A 3 second version. I built it first, because loaders should be fast. Watching it stressed me out: I couldn't read the messages and my attention went all over the place. Six seconds is slow enough to read and still short enough not to annoy anyone.
- Two orange glows for the Safety Car's lights. In my head they were headlights through the rain. On screen they looked like two candles. I deleted them and doubled the rain instead, heaviest at the red flag.
Two small details
- Calm mode. If your device asks for reduced motion, or you press Calm, the movement goes away and the same six messages appear as a plain text log next to the grid.
- Return visits. Nobody wants to sit through an intro twice, so a return visit only plays the last two beats, and there's always a Skip intro button. You can try it with Play as a return visit.
The rain is a 2D canvas sketch of what the 2022 footage looks like: haze, and drops sitting on the lens. The final build will use a shader for real water distortion.
Personal concept. Not affiliated with Formula 1 or Scuderia Ferrari.