Rive Blog

The broadcast graphic that raises millions

140 hours of live charity streaming. Millions of viewers. One on-screen graphic that can’t fail even for a second.

-

Thursday, August 28, 2025

At Games Done Quick (GDQ), a biannual speedrunning marathon that’s raised over $50 million for charity, the “omnibar” is key to the event’s success. It sits at the bottom of the broadcast for most of the show, delivering a constant stream of live information: the game in play, the runner, the elapsed time, the charity total, upcoming donation incentives, sponsor spots, and the next run in the schedule. 

Getting the omnibar right is mission-critical. It’s a dynamic, interactive broadcast layer that staff can control in real time to rally donations, spotlight moments, and keep viewers engaged without distracting from the gameplay. 

Before Rive, the idea of a fully modular, interactive omnibar with real-time overrides was essentially impossible within GDQ’s workflow. 

“It’s a massive design and technical problem,” says Chris Hanel, GDQ’s lead production designer and co-founder of the broadcast design studio Support Class

More than a mindless rotation

The omnibar has to juggle:

  • Over 100 dynamic data points — game, runner, category, split times, donation totals, incentives, upcoming schedule, and more.

  • Custom overrides — the ability to instantly break the rotation and surface a key call-to-action.

  • Continuous motion — transitions and animations that keep viewers engaged without distracting from gameplay. 

Chris and Lead Developer Dillon Pentz needed to merge high-fidelity design with split-second control. 

“The omnibar has to do everything. And we need to control it like it’s a live show. The previous systems couldn’t handle the complexity,” says Chris. “We needed an interface that could think for itself and let us take over when the moment called for it.”

Designing for speedrun pace

They needed a tool that would give designers control over complex motion without creating a backlog for developers. Rive’s state machines and runtime integrations gave them that bridge, making it possible to design the omnibar’s look and logic in the same file. 

State machines gave the file its “brains.” All logic and state changes lived inside the Rive file, letting designers author exactly how and when elements animate, change color, or reveal extra information.

“Our state machines are pretty complex and trigger animations that affect several nested Components,” says Dillon. “The Rive Renderer has managed everything we’ve thrown at it.”

Modular design, live control

Components made the omnibar modular and reusable. Chris compares it to a subway train: each run in the event is a “car,” with its own state machine. Staff can choose which cars are visible.

That modularity was a time-saver for both design and dev. Each component kept its own behaviors while still playing nicely in the larger system. 

Past versions of the omnibar were more rigid and forced design compromises — and developer rework — whenever needs changed mid-event.

Data without layout drama

With so much live data flowing in, the omnibar’s layout had to adapt without breaking. Rive’s text and layout tools kept donation totals, runner names, and other fields aligned, even as values changed.

A workflow upgrade, not a workaround

Before Rive, Support Class built animations in static tools like Figma or After Effects, then handed them to developers to recreate with HTML/CSS/JS. It was a slow process for state-driven motion.

With Rive, they drop files directly into GDQ’s Node.js-based broadcast framework. React code passes data in, listens for events out, and keeps the omnibar’s internal and external states in sync.

“Rive lets me stay creative further into the process instead of just managing handoffs,” says Chris. “It shortens the distance between having the idea and getting it into the project, while also letting me be more ambitious.”

GG for the omnibar

For GDQ staff, the Rive-powered omnibar delivers:

  • 140+ hours of content managed from a single interface

  • Instant overrides to push urgent donation goals or featured runs

  • Up to 50% less custom animation code, freeing developers to focus on stability

  • Rapid iteration — many fixes and updates now require no developer time at all, just a new Rive file upload.

In January 2025, GDQ raised over $2.5 million for the Prevent Cancer Foundation, with the omnibar acting as the constant call-to-action for viewers to give.

During the final half hour of one run, the team needed $50,000 to hit a bonus incentive. They overrode the rotation, switched the omnibar into urgent mode, and lit up the lower third with bright red animations. Donations jumped by the hundreds, and the goal was hit with minutes to spare.

For viewers, the result was a constant stream of relevant, well-timed information that felt as smooth as the speedruns themselves. The omnibar does its job so well that it’s easy to forget how much is happening behind the scenes. 

Because the project was built in Rive, it’s easy to maintain and update. The first version launched before Rive’s Data Binding feature existed; now, Chris and Dillon are eager to rebuild it with those capabilities to simplify their code even further. 

Takeaways for broadcast teams

  1. Centralize design + logic. Rive keeps visuals and interactivity aligned.

  2. Design modularly. Components make complex systems easier to scale and update. 

  3. Plan for overrides. Build in the ability to respond instantly to live moments. 

  4. Integrate with your data. Real-time input keeps content relevant without breaking layout.

If your live production demands graphics that adapt fast, Rive keeps your team in control without slowing you down. 

At Games Done Quick (GDQ), a biannual speedrunning marathon that’s raised over $50 million for charity, the “omnibar” is key to the event’s success. It sits at the bottom of the broadcast for most of the show, delivering a constant stream of live information: the game in play, the runner, the elapsed time, the charity total, upcoming donation incentives, sponsor spots, and the next run in the schedule. 

Getting the omnibar right is mission-critical. It’s a dynamic, interactive broadcast layer that staff can control in real time to rally donations, spotlight moments, and keep viewers engaged without distracting from the gameplay. 

Before Rive, the idea of a fully modular, interactive omnibar with real-time overrides was essentially impossible within GDQ’s workflow. 

“It’s a massive design and technical problem,” says Chris Hanel, GDQ’s lead production designer and co-founder of the broadcast design studio Support Class

More than a mindless rotation

The omnibar has to juggle:

  • Over 100 dynamic data points — game, runner, category, split times, donation totals, incentives, upcoming schedule, and more.

  • Custom overrides — the ability to instantly break the rotation and surface a key call-to-action.

  • Continuous motion — transitions and animations that keep viewers engaged without distracting from gameplay. 

Chris and Lead Developer Dillon Pentz needed to merge high-fidelity design with split-second control. 

“The omnibar has to do everything. And we need to control it like it’s a live show. The previous systems couldn’t handle the complexity,” says Chris. “We needed an interface that could think for itself and let us take over when the moment called for it.”

Designing for speedrun pace

They needed a tool that would give designers control over complex motion without creating a backlog for developers. Rive’s state machines and runtime integrations gave them that bridge, making it possible to design the omnibar’s look and logic in the same file. 

State machines gave the file its “brains.” All logic and state changes lived inside the Rive file, letting designers author exactly how and when elements animate, change color, or reveal extra information.

“Our state machines are pretty complex and trigger animations that affect several nested Components,” says Dillon. “The Rive Renderer has managed everything we’ve thrown at it.”

Modular design, live control

Components made the omnibar modular and reusable. Chris compares it to a subway train: each run in the event is a “car,” with its own state machine. Staff can choose which cars are visible.

That modularity was a time-saver for both design and dev. Each component kept its own behaviors while still playing nicely in the larger system. 

Past versions of the omnibar were more rigid and forced design compromises — and developer rework — whenever needs changed mid-event.

Data without layout drama

With so much live data flowing in, the omnibar’s layout had to adapt without breaking. Rive’s text and layout tools kept donation totals, runner names, and other fields aligned, even as values changed.

A workflow upgrade, not a workaround

Before Rive, Support Class built animations in static tools like Figma or After Effects, then handed them to developers to recreate with HTML/CSS/JS. It was a slow process for state-driven motion.

With Rive, they drop files directly into GDQ’s Node.js-based broadcast framework. React code passes data in, listens for events out, and keeps the omnibar’s internal and external states in sync.

“Rive lets me stay creative further into the process instead of just managing handoffs,” says Chris. “It shortens the distance between having the idea and getting it into the project, while also letting me be more ambitious.”

GG for the omnibar

For GDQ staff, the Rive-powered omnibar delivers:

  • 140+ hours of content managed from a single interface

  • Instant overrides to push urgent donation goals or featured runs

  • Up to 50% less custom animation code, freeing developers to focus on stability

  • Rapid iteration — many fixes and updates now require no developer time at all, just a new Rive file upload.

In January 2025, GDQ raised over $2.5 million for the Prevent Cancer Foundation, with the omnibar acting as the constant call-to-action for viewers to give.

During the final half hour of one run, the team needed $50,000 to hit a bonus incentive. They overrode the rotation, switched the omnibar into urgent mode, and lit up the lower third with bright red animations. Donations jumped by the hundreds, and the goal was hit with minutes to spare.

For viewers, the result was a constant stream of relevant, well-timed information that felt as smooth as the speedruns themselves. The omnibar does its job so well that it’s easy to forget how much is happening behind the scenes. 

Because the project was built in Rive, it’s easy to maintain and update. The first version launched before Rive’s Data Binding feature existed; now, Chris and Dillon are eager to rebuild it with those capabilities to simplify their code even further. 

Takeaways for broadcast teams

  1. Centralize design + logic. Rive keeps visuals and interactivity aligned.

  2. Design modularly. Components make complex systems easier to scale and update. 

  3. Plan for overrides. Build in the ability to respond instantly to live moments. 

  4. Integrate with your data. Real-time input keeps content relevant without breaking layout.

If your live production demands graphics that adapt fast, Rive keeps your team in control without slowing you down. 

At Games Done Quick (GDQ), a biannual speedrunning marathon that’s raised over $50 million for charity, the “omnibar” is key to the event’s success. It sits at the bottom of the broadcast for most of the show, delivering a constant stream of live information: the game in play, the runner, the elapsed time, the charity total, upcoming donation incentives, sponsor spots, and the next run in the schedule. 

Getting the omnibar right is mission-critical. It’s a dynamic, interactive broadcast layer that staff can control in real time to rally donations, spotlight moments, and keep viewers engaged without distracting from the gameplay. 

Before Rive, the idea of a fully modular, interactive omnibar with real-time overrides was essentially impossible within GDQ’s workflow. 

“It’s a massive design and technical problem,” says Chris Hanel, GDQ’s lead production designer and co-founder of the broadcast design studio Support Class

More than a mindless rotation

The omnibar has to juggle:

  • Over 100 dynamic data points — game, runner, category, split times, donation totals, incentives, upcoming schedule, and more.

  • Custom overrides — the ability to instantly break the rotation and surface a key call-to-action.

  • Continuous motion — transitions and animations that keep viewers engaged without distracting from gameplay. 

Chris and Lead Developer Dillon Pentz needed to merge high-fidelity design with split-second control. 

“The omnibar has to do everything. And we need to control it like it’s a live show. The previous systems couldn’t handle the complexity,” says Chris. “We needed an interface that could think for itself and let us take over when the moment called for it.”

Designing for speedrun pace

They needed a tool that would give designers control over complex motion without creating a backlog for developers. Rive’s state machines and runtime integrations gave them that bridge, making it possible to design the omnibar’s look and logic in the same file. 

State machines gave the file its “brains.” All logic and state changes lived inside the Rive file, letting designers author exactly how and when elements animate, change color, or reveal extra information.

“Our state machines are pretty complex and trigger animations that affect several nested Components,” says Dillon. “The Rive Renderer has managed everything we’ve thrown at it.”

Modular design, live control

Components made the omnibar modular and reusable. Chris compares it to a subway train: each run in the event is a “car,” with its own state machine. Staff can choose which cars are visible.

That modularity was a time-saver for both design and dev. Each component kept its own behaviors while still playing nicely in the larger system. 

Past versions of the omnibar were more rigid and forced design compromises — and developer rework — whenever needs changed mid-event.

Data without layout drama

With so much live data flowing in, the omnibar’s layout had to adapt without breaking. Rive’s text and layout tools kept donation totals, runner names, and other fields aligned, even as values changed.

A workflow upgrade, not a workaround

Before Rive, Support Class built animations in static tools like Figma or After Effects, then handed them to developers to recreate with HTML/CSS/JS. It was a slow process for state-driven motion.

With Rive, they drop files directly into GDQ’s Node.js-based broadcast framework. React code passes data in, listens for events out, and keeps the omnibar’s internal and external states in sync.

“Rive lets me stay creative further into the process instead of just managing handoffs,” says Chris. “It shortens the distance between having the idea and getting it into the project, while also letting me be more ambitious.”

GG for the omnibar

For GDQ staff, the Rive-powered omnibar delivers:

  • 140+ hours of content managed from a single interface

  • Instant overrides to push urgent donation goals or featured runs

  • Up to 50% less custom animation code, freeing developers to focus on stability

  • Rapid iteration — many fixes and updates now require no developer time at all, just a new Rive file upload.

In January 2025, GDQ raised over $2.5 million for the Prevent Cancer Foundation, with the omnibar acting as the constant call-to-action for viewers to give.

During the final half hour of one run, the team needed $50,000 to hit a bonus incentive. They overrode the rotation, switched the omnibar into urgent mode, and lit up the lower third with bright red animations. Donations jumped by the hundreds, and the goal was hit with minutes to spare.

For viewers, the result was a constant stream of relevant, well-timed information that felt as smooth as the speedruns themselves. The omnibar does its job so well that it’s easy to forget how much is happening behind the scenes. 

Because the project was built in Rive, it’s easy to maintain and update. The first version launched before Rive’s Data Binding feature existed; now, Chris and Dillon are eager to rebuild it with those capabilities to simplify their code even further. 

Takeaways for broadcast teams

  1. Centralize design + logic. Rive keeps visuals and interactivity aligned.

  2. Design modularly. Components make complex systems easier to scale and update. 

  3. Plan for overrides. Build in the ability to respond instantly to live moments. 

  4. Integrate with your data. Real-time input keeps content relevant without breaking layout.

If your live production demands graphics that adapt fast, Rive keeps your team in control without slowing you down. 

Join our newsletter

Get all the latest Rive news delivered to your inbox.