Skip to page content and links

Work

TiledMedia Racing Interface for a Multiview Player

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.

Client: TiledMedia

TiledMedia / Multiview player / 2026

Live telemetry, drawn as it happens.

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

The brief

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 build

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.

The constraint

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 delivered experience

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.

Project media

Racing interface inside the multiview player

Full-resolution demo of the racing interface in the TiledMedia multiview player, 64 s.

Track map view modes

Track map moving between full map, sector, driver focus and full-screen layouts (transparent background, 16 s).

Track map camera move

Track map focus camera following driver markers.

Leaderboard re-ranking

Leaderboard rows re-ranking as the gaps change (10 s).

Driver card

Driver card transition in (8 s).

Racing interface: player frame

Racing interface: player frame

Frame from the player demo recording.

Track map: venue 1

Track map: venue 1

Track map drawn from the venue 1 circuit SVG.

Track map: venue 2

Track map: venue 2

The same track map drawn from a second circuit SVG.

Have a project in mind?

Explore motion design and interactive animation services, or get in touch about your project.