The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
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
Very impressive 👏
Thank you @Victor Olabisi
Looks rrally cool!
Thank you @Abdullah Eroğlu
Reactive data engine mapped to live telemetry? This is next-level broadcast tech!
Thank you @Ayomide Adeoye
cool hovers
Thank you 😊
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Challenges
View all
Related posts
I built the Contra Labs Creative Intelligence Report 2026 Framer site.
the report site scrolls like a film. clean framer build
Another exciting project wrapped up! ✨
This time, we worked on Olympian by Design – a premium one-on-one coaching brand focused on personal transformation and high performance.
Our goal was to create more than just a beautiful website. We wanted the entire client journey to feel connected – from the first landing page visit to purchasing the program and going through the coaching experience.
We designed three custom pages from scratch, built them in Kajabi, created a branded member area, set up the coaching program, and refreshed the app with new onboarding screens.
All wrapped in a bold, dark, luxury-inspired design.
Because great design shouldn't stop at checkout. It should follow the client through the entire experience.
Great project
So excited to see Creative Intelligence 2026 by @Contra Labs out in the world!
At @Heed Collective , we had the pleasure of designing both the website and the report. We’re incredibly grateful for this collaboration!
Our creative exploration started with a question:
What does Creative Intelligence mean today?
We believe it lives at the intersection of creativity and analysis, imagination and insight.
We translated this into a visual story that begins in space — vast, dreamy, full of possibility — and gradually moves closer to Earth, grounding imagination in something tangible and human.
Huge congrats to the whole team, @Erin Horner, @Ben Huffman, @Mark Vassilevskiy, @Alex Karpodinis, @Stacy · Heed Collective, @Heed Collective , and the entire @Contra Labs team 👏
Incredible work, congrats!
