Animated nameplates for esports streams

Nameplates are arguably the most-watched graphic on any esports broadcast. They sit under every camera cut, every player highlight, every interview. A bad nameplate — flat text on a flat box — drags the whole production down to amateur. A good one is a quiet flex: clean motion in, readable typography, a logo that doesn't fight the player's face.

This post walks through how to build animated nameplates that look broadcast-grade using Quadraviz, with notes on the design decisions that matter most. The technique generalizes to any tool that supports Rive, but the live-control half of the workflow is Quadraviz-specific.

#What "nameplate" means here

In esports production, a nameplate is the lower-third graphic that identifies a player or caster on screen. (If you've heard it called a "lower third," that's the same thing.) Three things are non-negotiable:

A name. Usually the in-game handle, sometimes the real name underneath.
A team or affiliation. Logo or initials, color-keyed to the team.
A role. Caster, observer, IGL, support — context that helps a casual viewer follow what's happening.

Optional fourth elements include flags, sponsor badges, and player stats. Everything else is decoration that risks crowding the player out of frame.

#Step 1 — Design the static composition first

Open Rive (or your designer's tool of choice). Before you touch any animation, lay out the static end state of the nameplate exactly where it will sit on screen.

Pin yourself to these constraints:

Safe area. Stay at least 80 px from the bottom edge of a 1080p canvas. Streaming compression eats edge pixels.
Text contrast. Aim for WCAG AA against your busiest background frame. Players move; backgrounds change every second. A nameplate that's readable on a clean menu screen but unreadable during a teamfight has failed.
One typeface. Two weights of one face is plenty. Three typefaces is a sign you're solving a layout problem with fonts.
Logo discipline. If the team logo doesn't survive at 32 px height, redraw it. Do not rely on team-provided SVGs that were designed for jerseys.

Get the static state right before you animate anything. Motion will not save a layout that doesn't read.

#Step 2 — Build the entrance animation in Rive

A broadcast-grade nameplate enters in 350–500 ms. Faster reads as glitchy. Slower wastes airtime.

The simplest reliable pattern:

Background bar slides in from the side. 300 ms ease-out. Offset 100% of its own width.
Text fades in with a tiny upward translate. Stagger by 80–120 ms after the bar starts. 8–12 px translate, 200 ms.
Logo or accent element pops in last. Scale from 0.8 → 1.0 over 180 ms with a soft bounce. This is the only place a small overshoot is allowed.

In Rive, build this as a single state machine with three states: idle (hidden), entering, and visible. Bind an input boolean show that drives the transition from idle to entering, then auto-advances to visible after the animation completes.

For the exit, mirror the entrance: scale logo down, fade text out with a downward translate, slide the bar off. Bind a second input hide. Do not reuse the entrance animation in reverse — reverse motion always reads as backward, even to viewers who can't articulate why.

#Step 3 — Expose bindable data

This is where most tutorials hand-wave. A nameplate is useless if every player change means re-exporting the file.

In Rive, expose four text inputs and one image input:

playerName (string)
playerRealName (string, optional)
teamName (string)
role (string)
teamLogo (image)

Bind those inputs to the corresponding text and image nodes in the composition. Export the .riv file.

#Step 4 — Wire it up in Quadraviz

In the Quadraviz dashboard:

Create a new channel for your broadcast (or reuse the scoreboard channel — both can share one browser source).
Upload the .riv file as a scene.
Quadraviz auto-detects the bindable inputs and renders a control panel for them.
Drop the channel URL into a browser source in OBS, vMix, or your encoder of choice. See how to add a live scoreboard overlay to OBS for the exact OBS steps — it's the same technique.

To put a nameplate on screen during a stream:

Type the player's handle, real name, team, and role into the dashboard.
Drop in the team logo (or pick one from the team library if you've pre-loaded them).
Hit Show.

The state machine you built in Rive does the rest. To swap to a different player, edit the fields and hit Show again — the existing nameplate will exit, the new one will enter.

#Step 5 — Build a team library, not a thousand scenes

The mistake most one-person productions make is creating a new scene per player. After three weeks of streams you have a folder of 80 near-identical scenes, and any design change means editing 80 files.

Don't do that. Build one nameplate scene, and a separate list of players:

json

[
  {
    "handle": "Soren",
    "real": "Søren Bjerg",
    "team": "Wraiths",
    "role": "Mid",
    "logoUrl": "https://cdn.quadraviz.com/teams/wraiths.svg"
  },
  {
    "handle": "Hex",
    "real": "Hex Foxes",
    "team": "Hex Foxes",
    "role": "Jungle",
    "logoUrl": "https://cdn.quadraviz.com/teams/hex.svg"
  }
]

Store the list wherever you already manage tournament data — a Google Sheet, an Airtable, a Postgres table behind a small API. Quadraviz lets you bind a dropdown in the dashboard to that source via the public API. Now picking a player is one click instead of seven text fields. (For the full data-binding workflow, see how to automate overlays with live match data.)

#Step 6 — Pre-cache logos before you go live

The single most embarrassing on-air failure with browser-source overlays is a missing logo. The browser source goes to fetch https://team-website.example/logo.svg, the team website is having a bad day, and the slot stays blank.

Two cheap fixes:

Upload every team logo into Quadraviz's asset library ahead of time. The CDN handles the rest.
For sponsor or guest logos you can't host, run a one-line check before the stream goes live: open the channel URL in a browser tab, watch the network panel, confirm every asset returns 200.

This takes five minutes and prevents the kind of bug that ends up in a clip on Twitter.

#Common mistakes to skip

Animating during the visible state. A nameplate that pulses, breathes, or shimmers while it's up is a nameplate viewers stare at instead of the player. Idle states should be perfectly still.

Using stroke text for legibility. Bigger type and better contrast solve the problem. A 2-pixel stroke around every letter is a 2010s OBS-plugin fix for a problem the rest of broadcast solved with typography.

One nameplate scene per language. Use the same scene with localized text bindings driven per channel. Multi-language tournaments are a feature, not a fork in your asset tree — see multi-language tournament overlays.

Hardcoding team colors in the scene. Use a bindable color input on the bar fill. You will switch teams every match.

#FAQ

What's the difference between a nameplate and a lower third? In esports, they're the same graphic: the bar near the bottom of the screen that identifies a player or caster. "Lower third" is the broadcast-industry term; "nameplate" is the esports-native one.

How long should the entrance animation be? 350–500 ms. Under ~300 ms reads as a glitch; over ~600 ms wastes airtime and feels sluggish on fast cuts.

Do I need an animator or a paid Rive license? No animator. You can design a clean nameplate yourself with one typeface and the three-step entrance above. Rive's free tier covers this workflow; a paid plan only matters for advanced features.

Can I change the player on screen without editing OBS? Yes. Edit the fields in the dashboard (or pick from your player list) and hit Show. OBS never gets touched after the initial setup.

#Doing this with Quadraviz

If you want the dashboard, the per-player bindings, and the sub-200 ms updates without building the integration layer yourself, start a free Quadraviz account. The free tier covers the full workflow above with a small watermark — enough to run a real production and decide whether it's worth upgrading.

How to add a live scoreboard overlay to OBS — the same browser-source technique, applied to scoreboards.
Automate overlays with live match data — bind player and score data from a Sheet, API, or webhook.
Quick start — the broader Quadraviz onboarding.
Quadraviz vs LIGR — comparison focused on esports and multi-language streaming.