Watch: The Complete Quadraviz Tutorial Series

The hardest part of live graphics isn't any single step. It's that the steps live in different tools, and most tutorials only cover one of them. You find a great Rive animation tutorial that ends at export. You find a great OBS tutorial that starts with a finished overlay. The gap in the middle — the part where a design becomes something an operator can drive during a show — is where people give up.

So we recorded the whole thing. Four videos, one project, PSD to on-air.

#Part 1 — From PSD to Rive

Watch it

Most people arrive with a design already made. A scoreboard in Photoshop, layers named the way a designer names layers, everything flattened in the wrong places.

This one covers preparing those layers, importing into Rive, rebuilding the scoreboard's structure, and setting up the artboard so it can actually be animated afterwards.

The structural work here is what determines whether Part 2 is pleasant or miserable. A scoreboard built as one flat group animates as one flat group.

#Part 2 — Animate Your Graphics

Watch it

Timelines, keyframes, in and out transitions, and state machines.

The part worth paying attention to is what "broadcast-safe" means for an animation: interruptible and loopable. A show does not wait for your entrance transition to finish. A lower third that can't be pulled off air mid-animation, or that breaks if it is triggered twice, will embarrass you eventually — and it always happens live.

#Part 3 — Bind Live Data

Watch it

This is where the graphics stop being a video and start being an instrument.

Data binding in Rive, view models, bindable properties, and how to name your inputs so they map cleanly onto Quadraviz Smart Inputs. Do it once and every subsequent score change is a value on a dashboard rather than a re-export.

Naming is the thing people underestimate. text1 and text2 are fine when you have two of them. At twenty inputs across five scenes, they're a puzzle you have to re-solve every show. The docs on Smart Inputs go into more depth on this.

#Part 4 — Stream Your Rive Files

Watch it

The payoff. Upload the file to Quadraviz, create your resources — teams, players — run the binding wizard, and add the scene to OBS or vMix as a browser source.

Then the part that makes the whole pipeline worth building: changing things while it's on air. Scores, names, whole scenes, from one dashboard, with OBS doing nothing but compositing a browser source.

#Where to go after

The series ends with graphics running. Everything after that is depth:

• Rive for broadcast graphics — The whole pipeline in one page
• Set up your data — Structure collections properly before you have fifty resources
• Set up the Live Controller — Preview and Live, auto-play, and editing resources mid-show
• Invite your team — Hand the controller to an operator and keep building
• The Quadraviz API — Drive a channel from a stream deck or a Companion module

New videos land on the channel. If there's something you want covered, tell us — the series exists because people kept asking the same four questions.