Leaderboards: rank badges and top-gifter rows that motivate

A leaderboard makes a simple promise: climb, and everyone will see it. The animation around the board is how that promise is kept, from the crown beside a top gifter's name to the frame that follows them into every room. This guide covers what to animate, how to keep a podium readable, and where the files sit in the store.

What a leaderboard actually needs to animate

Most rank features break down into five surfaces:

• Podium marks for positions 1, 2 and 3: trophies, crowns and numbered badges beside a name or avatar.

• Top rows on the home screen or rank page: wide strips that hold the top room or top gifter of the day or week.

• Rank frames that wrap a ranked user's avatar, so the status travels with them onto mic seats and profiles.

• Ambient layers behind the rank page: light sweeps and particles that make the page feel like an event rather than a table.

• Entry moments: a short animation when a user opens the board, or when a new ranking period starts.

Treat these as one system. If the crown, the row and the frame for rank 1 share a colour and a motif, users learn the hierarchy in a single glance.

The Leaderboards & Ranks collection at a glance

The Leaderboards & Ranks collection holds 16 files, 6 SVGA and 10 PAG, ranging from 5.1 KB to 1.92 MB with a median of 313 KB. Here is how a selection compares:

Two things stand out. First, canvas size tells you very little about weight: Rank Particle covers 750x900 in just 5.1 KB, while Rank Lighting, on a similar canvas, is 1.06 MB. Vector shapes stay small; bitmap layers such as baked glow do not. Second, a 72x72 crown at 21 KB is light enough to repeat beside the names in a list.

Design the podium as a ladder, not three trophies

Rank 1 should be unmistakable, but ranks 2 and 3 should still look like the same family. A few rules that hold up well:

• Give motion to rank 1 first. Let the top mark loop; let 2 and 3 play once and settle, or loop more gently. Three equally busy badges cancel each other out.

• Keep 2 and 3 interchangeable in layout. Rank Page Background No 2 and No 3 share a 336x336 canvas, 20 fps and a 4-second length, so nothing shifts when two users swap places.

• Keep the gold, silver, bronze convention. People read it instantly. Spend your originality on shape and motion, not on recolouring the order.

• Check each mark at its real size. The Golden Trophy Rank at 120x140 has enough detail for a podium card, while a 72x72 crown suits an inline name row.

Top-room and top-gifter rows

Wide rows carry the most information: an avatar, a name, a score and often a room title. Background Room Top 1 and 2 are both 714x202 PAG strips at 25 fps, and the home banner is a 748x260 SVGA with a matching right-to-left version. If you serve RTL markets, mirror the whole row so the avatar and rank number sit on the reading-start side, rather than flipping only the text.

Keep names and scores live instead of baking them into the artwork. Both runtimes can swap images and text into named layers at playback time (dynamic items in SVGAPlayer, replaceable text and image layers in libpag), but only when the file was built with those layers. Confirm the layer names with the file's maker before you plan a layout around an injected avatar.

Rank frames live in Avatar Frames

The numbered rank frames, such as Rank Page Avatar Frame No 2 and No 3, and the charm, gift, room and guard rank sets sit in the Avatar Frames collection (154 files in total), so you can judge them against the rest of your frame line-up. A frame such as Guard Rank 1 works best when it is tied to the board that earned it:

• Award the frame for the length of the ranking period and remove it at reset. A frame that never expires stops meaning anything.

• Use a different frame for each board, so a user's frame says what they topped, not just that they ranked.

• While it is active, let the rank frame take priority over purely cosmetic frames.

Keep the motivation honest

Animation can make a board exciting, not fair. These habits keep it motivating for people outside the top three:

• Show each user their own position and the gap to the next rank, not only the podium.

• Reset on a rhythm users can plan around, daily or weekly, and use an entry animation such as Rank Enter when a new period opens.

• Use one ambient layer behind the page, Rank Lighting or Rank Particle, not both, and never alongside a looping animation on every row.

• Only animate rows that are on screen. Stop players for rows that scroll away and release them when the user leaves the page; a long list of looping files is the quickest route to stutter on a budget phone.

Single files or the crowns pack

If you need a podium set and one row style, single files are the simplest route. If you want a broader set of crowned frames and badges in one purchase, the Leaderboard Crowns Pack bundles 20 files for less than buying them one by one.

Next step

List the boards your app will run at launch, then choose one mark per podium position, one row style and one rank frame per board. Drop each file into the SVGA & PAG viewer, check it at its real display size on a few room backgrounds, and only then wire up the reset logic.