F1 live timing graphics, driven by Rive data binding by Jessy MariauF1 live timing graphics, driven by Rive data binding by Jessy Mariau

F1 live timing graphics, driven by Rive data binding

Jessy Mariau

Jessy Mariau

F1 live timing graphics
F1 live timing graphics
The Formula 1 half of my FLAGFALL broadcast package: lap gaps, a DRS band, lead markers and a lap-time trace, all rendered as Rive graphics. JavaScript writes the bound properties frame by frame while the run plays. The run shown is a replay reconstructed from OpenF1 lap timing rather than a live broadcast feed, and the graphic says so on screen. The same .riv re-captions its modules from whatever data it is given, so one file serves two sports.
F1 timing view with DRS band
F1 timing view with DRS band
Built for the Rive Broadcast and Livestream UI Challenge. The moment banner, autoranging lap-time trace and module captions are all data-bound text and number properties rather than baked timelines: the runtime writes roughly 245 bound properties per frame into the file while it runs.
Lap gap chart with lead markers
Lap gap chart with lead markers
Lead change moment banner
Lead change moment banner
Part of the FLAGFALL build, published separately because it is a distinct deliverable: the same instruments that carry a chess broadcast re-skin themselves into a race timing screen with only the adapter changed.
Like this project

Posted Aug 21, 2026

I rendered lap gaps, a DRS band, lead markers and a lap-time trace as Rive graphics, with JavaScript writing the bound properties frame by frame. The run shown is a replay reconstructed from OpenF1 lap timing, and one file serves two sports.