Real-time brand motion system

§ 01Brief

Traditional broadcast motion graphics are pre-rendered — you produce an asset for every possible data state and stitch them together with a playback controller. That approach breaks when the data is live and unpredictable.

We replaced their pre-render pipeline with a real-time Unreal Engine system driven by a WebSocket feed. Every graphic — lower thirds, full-screen scores, transition animations — was a live Unreal actor responding to data events in under 50ms.

§ 02Approach

1. 01
   Design

   Motion language definition

   We worked with their in-house brand team to define a motion grammar — 4 easing curves, 3 animation durations, 2 spatial directions. Every graphic was parameterised against this system, not animated by hand.

2. 02
   Data layer

   WebSocket → Unreal bridge

   A Node.js middleware consumed the broadcast data feed and pushed structured events to Unreal via a custom WebSocket plugin. Latency from data arrival to pixel on screen: 48ms average.

3. 03
   Graphics

   12 modular graphic types

   Lower thirds, score panels, full-screen results, transition wipes, ticker, and 6 variants of each for different broadcast contexts. All driven by the same data schema.

4. 04
   Operator UX

   Broadcast control panel

   A React web app gave broadcast operators manual override for any graphic — trigger, hold, dismiss — without touching Unreal. Critical for live TV where automated timing is never perfect.

§ 03Outcomes

§ 04Gallery