How I Built a 60 FPS Real-Time Esports HUD Builder & WebGL Broadcast Engine for BLOB

Live esports broadcasts don’t forgive dropped frames. When competitive titles like Valorant, Counter-Strike 2, and Rocket League stream tournament telemetry at 60 updates per second, standard React virtual DOM reconciliation simply chokes under the load in OBS Studio. I was brought on by BLOB Productions following a competitive head-to-head architectural evaluation to completely re-engineer their broadcast overlay infrastructure from the ground up.

What We Built:

- 60 FPS Headless HUD Engine: Built a renderer-independent JSON scene graph with Figma/Rive-grade interaction math (multi-selection, aspect-ratio locked transforms, boolean operations, and 360° pivot rotations).

- Complete Vector & Style Stack: Multi-fills with linear/radial gradients, multi-strokes, inner/drop shadows, per-corner radiuses, blend modes, and Gaussian blurs.

- Reactive Data & Motion Logic Engine (Core IP): Continuous value mapping (e.g., player health mapped to visual bar width), dynamic scope inheritance across duplicated player cards, repeaters, and event-driven trigger animations.

- Ultra-Low Latency OBS Runtime: A lightweight PixiJS (WebGL) runtime with signal-based direct node mutations and a jitter-smoothing dead reckoning buffer—maintaining $<16ms Time-to-Glass.

- Zero-Egress Client-Side Edge Merge: Merged high-frequency P2P/WebSocket telemetry directly on the client edge with static tournament metadata, eliminating expensive cloud compute bottlenecks.

- Cloud Persistence & Publishing Pipeline: CockroachDB/PostgreSQL draft-versus-live isolation, version rollback, and an automated P0 verification test suite.

Read the full case study with architectural diagrams and demo breakdown here: 60 FPS Real-Time Esports HUD Builder