Real-Time Esports HUD Builder & Broadcast Engine Architecture by Paul FadayoReal-Time Esports HUD Builder & Broadcast Engine Architecture by Paul Fadayo

Real-Time Esports HUD Builder & Broadcast Engine Architecture

Paul Fadayo

Completed work

Backend Engineer

Game Designer

Software Engineer

Next.js

React

TypeScript

Computer Software

Architecting a 60 FPS Real-Time Esports HUD Builder & Broadcast Engine

Project Overview

Role: Lead Graphics & Full-Stack Systems Architect

Client: BLOB Productions (Esports Broadcast Infrastructure Platform)

Engagement: Competitive Technical Evaluation $\rightarrow$ Full Systems Architecture & Handoff

Timeline: 6 Weeks

Tech Stack: TypeScript, PixiJS (WebGL), React, Next.js, Turborepo, WebSockets, WebRTC, CockroachDB / PostgreSQL, Socket.IO, Docker

Summary

BLOB is a live esports broadcast platform powering dynamic overlays for competitive titles (Valorant, Counter-Strike 2, Rocket League) streaming directly to OBS at 60 FPS.

I was selected following a head-to-head competitive technical evaluation (Milestone 1) to architect and build BLOB's next-generation platform from scratch: a Headless HUD Engine, Figma-grade Vector Studio, Reactive Data Binding System, and Ultra-Low-Latency OBS Broadcast Runtime.

┌───────────────────────────┐      ┌───────────────────────────┐
│     BLOB HUD Builder      │      │  Desktop App (Relay 3636) │
│ (Figma-grade Headless UI) │      │  (Valorant, CS2, RL GSI)  │
└─────────────┬─────────────┘      └─────────────┬─────────────┘
              │ Saves Scene Graph                │ 60Hz Telemetry
              ▼ (JSONB / CDN)                    ▼ (Local WS / WebRTC)
┌──────────────────────────────────────────────────────────────┐
│                  BLOB 60 FPS PixiJS Runtime                  │
│       Client-Side Edge Merge + Signal-Based Binding Engine   │
│              (Time-to-Glass < 16ms in OBS Studio)            │
└──────────────────────────────────────────────────────────────┘

Key Performance & System Metrics

60 FPS Locked: Maintained rock-solid 60 FPS under continuous 60Hz game telemetry with zero garbage collection stutter.

<16ms Time-to-Glass: Latency from raw in-game packet event to OBS canvas pixel rendering.

100% Renderer-Agnostic Scene Graph: Unified JSON schema guaranteeing pixel-perfect WYSIWYG fidelity between the browser editor and OBS broadcast runtime.

Zero Backend Compute on Hot-Path: Eliminated server compute bottlenecks via client-side edge merge architecture.

Production Monorepo Handoff: Engineered 4 core shared packages with automated P0 acceptance test suites.

The Challenge & The Competitive Evaluation

Live esports broadcasts demand native-grade visual fidelity and zero latency. BLOB’s legacy system suffered from critical architectural bottlenecks:

Virtual DOM Diffing Bottlenecks: Updating nested React DOM nodes at 60 updates/sec caused dropped frames and severe rendering stutter in OBS.

Hardcoded Overlays: Every design change required engineering assistance.

The Competitive Evaluation: BLOB ran a head-to-head evaluation between two senior architects to build a renderer-independent scene graph, normalized data contract, continuous value mapper, and 60fps mock telemetry engine.

Why My Architecture Won the Contract

Decoupled Editor from Runtime: Used React for the complex editor canvas UI (layers, inspectors, transforms), but engineered a pure vanilla PixiJS WebGL runtime with direct canvas node mutations, completely removing virtual DOM diffing from the broadcast hot path.

Edge-Merge vs. Server-Merge: Advocated for client-side data merging. Merging static tournament data with live 60Hz local telemetry directly on the client edge eliminated server egress costs and reduced end-to-end latency by 40–80ms.

The Solution: Five Progressive Engineering Milestones

1. Milestone 1 — 60fps WebGL Prototype & Scene Graph Schema

Renderer-Agnostic JSON Schema: Designed a strict schema for nodes (Rectangle, Ellipse, Vector Path, Text, Image, Group) using stable unique IDs (CRDT-ready for future multiplayer collaboration).

High-Frequency Ingestion: Normalized key-value data bus consuming 60 ticks/sec with zero frame drops or visual jitter.

2. Milestone 2 — Headless Design Engine (Figma/Rive-Grade Primitives)

Interaction Math Engine: Authored transform pipelines for multi-selection, drag-to-move, aspect-ratio locked resize handles, 360° pivot rotation, and guide-line snapping.

Complex Style Stacks: Designed an ordered, serializable paint model supporting multiple fills (linear/radial gradients with angle rotation), multi-strokes (inner/outer), drop/inner shadows, per-corner radiuses, blend modes, and Gaussian blur filters.

Vector & Masking Capabilities: Point-level vector path manipulation, boolean operations (union, subtract, intersect, exclude), and independent mask vs. content transform matrices.

3. Milestone 3a — Reactive Data Binding & Motion Logic Engine (Core IP)

Continuous & Discrete Mapping: Built an engine that maps raw game data paths (e.g. player.0.health $0\rightarrow100$) to visual dimensions ($0\text{px}\rightarrow300\text{px}$) with configurable transition curves.

Group Scope Inheritance: Reusable components where duplicating a "Player Card" group allows children to bind to {{scope}}.health without manual rebinding.

Dynamic Repeaters & Triggers: Dynamically instantiated node lists (e.g., team series win counters) and event-driven trigger animations (e.g., pulsing red on low health, round-win celebration sequences).

4. Milestone 3b — OBS Broadcast Runtime & Jitter Smoothing

Standalone Read-Only Runtime: Lightweight bundle designed specifically for OBS Browser Sources.

Network Jitter Buffer & Dead Reckoning: Implemented linear interpolation (lerp) algorithms separating the network ingestion tick from the render tick to smooth out packet clumps and network latency spikes.

Local WebSocket & WebRTC Bridge: Native connection to the local desktop client on ws://localhost:3636 with fallback to WebRTC for remote tournament production setups.

5. Milestone 4 — Backend Persistence, Versioning & Publishing Pipeline

Draft / Live Isolation: Engineered CockroachDB/PostgreSQL JSONB persistence ensuring work-in-progress edits never corrupt live tournament broadcast streams.

Automated P0 Acceptance Suite: Created end-to-end automated verification scripts (pnpm p0:acceptance) checking database migrations, draft publishing, CDN asset delivery, and runtime URL hydration across 5 distinct services.

System Architecture & Package Boundaries

@repo/hud-contracts (TypeScript): Shared type definitions, JSON scene-graph schema, validation rules, and publishing contracts.

@repo/hud-engine (Pure TypeScript): Headless canvas interaction math, transform matrix pipelines, undo/redo history stack, and reactive binding evaluator.

@repo/hud-renderer-pixi (PixiJS / WebGL): Hardware-accelerated 2D renderer shared across both editor preview and live runtime.

apps/hud-editor (React / Vite): Figma-style overlay creation suite, layer manager, and live data simulator.

apps/hud-runtime (Vanilla JS / PixiJS): Zero-overhead OBS browser source runtime for live broadcasts.

packages/api & packages/db (Prisma / CockroachDB): Auto-saving draft service, version history, rollback, and asset pipeline.

Architectural Deep Dive: Client-Side Edge Merge

Why client-side edge merge over server-side aggregation?

In high-tier esports, routing 60 FPS telemetry from 10 players through a central cloud server introduces 40–80ms of network latency and massive cloud egress costs.

By routing high-frequency game telemetry directly via local WebSockets (localhost:3636) or P2P WebRTC and merging it client-side with immutable tournament metadata fetched once from the CDN, we achieved true zero-latency rendering at a fraction of cloud operating costs.

Project Artifacts & Visuals

Results & Client Handoff

Delivered 100% of contracted scope on schedule across all 5 milestones.

Production Acceptance: Passed all automated P0 verification suites covering DB migrations, live draft publishing, and runtime hydration.

Complete Documentation: Handed off a comprehensive MkDocs documentation hub, architectural ADRs, and video runbooks for internal engineering onboarding.

Like this project

Completed work

Posted Aug 16, 2026

Built a 60 FPS esports HUD studio & PixiJS WebGL broadcast engine with reactive telemetry bindings, Figma-grade vector tools, and <16ms latency.

Likes

Views

Clients

BLOB