Animations

Quadraviz animations are Rive files. Vector. Cloud-rendered. No baked video, no After Effects exports, no waiting.

Why Rive

  • Vector: scales to any resolution without re-rendering
  • Stateful: inputs control animation state at runtime
  • Small: a complex scoreboard is often under 50 KB
  • Live: change an input, the animation reacts on the next frame

Importing a Rive file

In the dashboard, open Scenes → New scene → Import Rive. Drop your .riv file.

Quadraviz scans the file for inputs — booleans, numbers, and triggers you exposed in the Rive editor — and surfaces them as dashboard controls automatically.

ts
// Conceptually, a Rive scene exposes inputs you can set live.
scene.setNumber('scoreA', 12);
scene.setBoolean('isOvertime', true);
scene.fire('goalScored');

Designing for Quadraviz

A few patterns we recommend when building Rive files for broadcast:

  • Use state machines, not raw animations — easier to drive from data
  • Expose only the inputs an operator actually needs to touch
  • Keep the artboard at the output resolution (1920×1080 for HD streams)
  • Name inputs in a way that reads well in the dashboard (scoreATeam A score)

Next

  • Scenes — wrap your Rive file with branding and controls
  • Channels — push the scene to your stream