Summary & Key ROI
23% increase in average viewer watch time after implementing the animated scoreboard
Static UI watch time Avg: 7.6 minute → Lottie UI watch time Avg: 9.3 minute
70% faster UI development cycle
Development cycle HTML/CSS/JS: 4.5 days → Lottie: 1.3 days
Over 40% of live broadcast content now includes Lottie-powered UI
Daily average of Lottie-integrated content: 5,530 broadcasts
Viewer feedback:
"The new scoreboard looks amazing—it makes watching matches so much more exciting!”
About CameraFi
Vault Micro is the technology company behind CameraFi Live and CameraFi Studio.
CameraFi Live is a mobile live streaming app that enables anyone to broadcast to platforms like YouTube, Facebook, and Twitch.
CameraFi Studio is a video production and match-tracking platform built for amateur sports teams and athletes. It offers features like real-time scoreboards, fan membership systems, and ranking features. With over 20 million downloads and 5 million registered users, CameraFi is expanding across the U.S., South Korea, Japan, and Southeast Asia.
The Challenge – Making Broadcast Data Interactive
As CameraFi Studio evolved, the team began looking for a way to enhance viewer immersion and real-time information delivery. Traditional HTML/CSS overlays were heavy on system resources and limited in flexibility. That’s when the team turned to Lottie for its lightweight vector format and support for dynamic, data-driven animations.
Lottie enabled CameraFi to design broadcast overlays that were not only visually polished but responsive to live data. These included:
Real-time scoreboard animations
Team and player intros
Replay interfaces
E-commerce overlays
Animated reactions and chat bubbles
The Solution – Utilizing Lottie as a Real-Time UI Engine
CameraFi’s design-to-dev workflow saw a dramatic shift with LottieFiles. Designers used After Effects to create animations, exported them as JSON via the LottieFiles for After Effects plugin, and seamlessly integrated them into both React Web and Android apps.
Because Lottie is vector-based, animations remained sharp across devices—while its JSON structure allowed dynamic injection of live content. Here's how they did it.
1. Real-time text updates
CameraFi leverages Lottie’s flexible JSON structure to inject live scores, player names, and other text elements in real time. By targeting the nm key to identify text layers and modifying the layer.t.d.k[0].s.t value, they dynamically update the animation content—for example:
To ensure smooth and reliable text rendering, the team disables both the "Glyphs" and "Global Glyph" export options in After Effects. This preserves actual font references within the Lottie file, enabling runtime text changes without the risk of missing or corrupted characters.
Instead of relying on shape-based glyph data, CameraFi uses preloaded web fonts to ensure consistent display across devices and platforms. These dynamic updates are powered by live data streamed from a Realtime Database, allowing animations to reflect current match conditions with minimal latency—delivering a seamless and engaging viewer experience.
2. Real-time image updates
Using the assets array and targeting asset.p, CameraFi could dynamically update team logos or player portraits.
3. Dynamic property adjustments
CameraFi adjusted font size, color, position, and rotation on the fly to adapt to the broadcast context—delivering a responsive, highly dynamic UI.
“What differentiates Lottie from other formats is that it's a JSON-based animation file that can be programmatically modified to suit real-time app requirements — enabling dynamic updates to visuals without re-exporting assets.”
— Kwon Si-hyun, Lead Developer, CameraFi Studio
What’s Next
CameraFi plans to expand Lottie integration into additional features like ranking systems, replay sequences, and AI-powered commentary.
They’re also developing a template-based Lottie marketplace to help teams and content creators create personalized overlays, along with a B2B package targeting broadcasters and production partners.
"Integrating Lottie was a turning point for us. It dramatically elevated the quality of our broadcasts and gave our developers a more flexible and efficient workflow."
— Kwon Si-hyun, Lead Developer, CameraFi Studio
