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
β’ 12h
This one took way more hours than it looks like. π
Just published a new case study on a Framer landing page I built for a basketball Video Assistant Coach from concept to final build.
If you've ever wondered what actually goes into a "simple-looking" site, this breaks it down.
π Full process here
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
Trending
retrofuturism
Share your favorite designs from the past exploring the distant future. Or your own take on the aesthetic π
halftone
Dots. Texture. Grain. Let's see your designs using the halftone technique.
Midjourney
Creatives are showing off what they're making with Midjourney.
colorgrade
Video editors sound off: How do you enhance the mood of your video in color grading?
Related posts
Just wrapped up a new SaaS motion design project. π
I explored how UI animation, motion, and product storytelling can turn a digital product into a clear and engaging visual experience.
SyncPilot β Work Smarter. Create More.
TOP π
Photorealistic exterior renders of a proposed bistro terrace expansion in Texas - created to help the client visualize and greenlight construction before breaking ground.
so cosy π€
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
Looks rrally cool!
