Racing interface inside the multiview player
Full-resolution demo of the racing interface in the TiledMedia multiview player, 64 s.
Work
A racing interface system for TiledMedia's multiview video player: track map, leaderboard, speedometer and driver cards in Rive, driven by live telemetry and configured at runtime by their engineers.
TiledMedia / Multiview player / 2026
A racing interface system for TiledMedia's multiview video player, driven by live telemetry and configured at runtime by their engineers.
My role: Motion design, Rive component system and runtime API
Delivered: Track map, leaderboard, speedometer and driver cards (plus popup and lower-third card elements), with standalone demos, architecture diagrams, developer documentation and Xcode integration projects
Tools: Rive (state machines, ViewModels, data binding, Luau scripting), Adobe Illustrator
TiledMedia's player puts many live video feeds on one screen. For a racing use case they needed an interface layer on top of the footage: where every kart is on the circuit, who leads and by how much, and how fast the focused driver is going. All of it had to be driven by telemetry and configurable from their own application.
The track map draws any circuit from a track SVG pasted into one property. A Luau pipeline parses the geometry, and a layout engine computes the full map, mini map, mask and focus camera from it. Twenty driver flags ride the racing line from a race-progress feed. The same map runs as an overview and a focus view, with operator-selectable layouts. The leaderboard re-ranks its rows in motion as the gaps to the leader change. The speedometer builds its own scale from the maximum speed, and the driver cards, popups and lower thirds share one set of content and color inputs. Every component exposes a typed runtime API, so the client sets content, colors and layout from their app.
Nothing in the player is authored per venue or per driver. Circuits, drivers and telemetry arrive at runtime, so each component had to draw itself from data, and which system writes which value had to be settled in a written contract. The numeric readouts needed a typeface that held up at speed, so I designed one, Nocturne Varsity, and embedded it in the files.
The components were delivered with architecture diagrams, standalone demos and Xcode integration projects. My screen recording shows the system running inside TiledMedia's player on kart-race footage. It is the demo TiledMedia took to IBC 2026.
Full-resolution demo of the racing interface in the TiledMedia multiview player, 64 s.
Track map moving between full map, sector, driver focus and full-screen layouts (transparent background, 16 s).
Track map focus camera following driver markers.
Leaderboard rows re-ranking as the gaps change (10 s).
Driver card transition in (8 s).
Final speedometer file.
Frame from the player demo recording.
Track map drawn from the venue 1 circuit SVG.
The same track map drawn from a second circuit SVG.
Explore motion design and interactive animation services, or get in touch about your project.