The top three: building a leaderboard podium people want to stand on

Most people who open a leaderboard will never be on it. They look at the top three, decide whether those places are worth chasing, and close the page. That makes the podium the most important part of the board. If places 1, 2 and 3 look the same as places 4 to 100, there is little to chase. If the top three carry frames, badges and a banner that follow them around the app, the board becomes a goal.

Three new packs cover the podium from different angles.

Rank Top Pack: the top three, everywhere

The Rank Top Pack gives each of the top three places its own colour: Top 1 in rose pink, Top 2 in flame red and Top 3 in emerald. For each place there are four animations, plus PNG stills:

The PNGs are a medal of each badge and stills of the chat bubble and banner, which is how the pack reaches 21 files.

The point of this pack is that the reward travels. A user who finishes first wears the Top 1 frame on their avatar, the badge on their profile and the bubble in the chat for the whole of the next period, so everyone they meet sees the result.

Mind the heavy pieces

Two pieces need care. The chat bubbles are about 2 MB each, which is a lot for something that repeats down a chat; use the still in the chat list and animate only the newest message. And the Top 3 frame is 6.98 MB, far heavier than the Top 2 frame at 284 KB, so download it in the background when the results are announced rather than when the frame first appears on a seat.

Winged Top 3 Rank Frames: one podium, four boards

Apps often run several leaderboards at once: games, gifts, rooms and events. The Winged Top 3 Rank Frames pack has a gold Top 1 frame with a crown and TOP1 plate, an ice-blue Top 2 and a rose-gold Top 3, each made for all four of those boards. That is 12 SVGA frames.

• The Top 1 frames are 640×360; the Top 2 and Top 3 frames are 280×180, so first place is visibly larger on the page.

• All twelve run at 15 fps on a four-second loop, between 320 and 390 KB.

Because the three places share one style across every board, a user switching from the gift board to the room board recognises the podium at once.

Leaderboard Palace Backgrounds: a stage for each board

The Leaderboard Palace Backgrounds give each board a full-screen hall in its own colour: CP, family, game, room, gifts sent and star. These six are VAP files at 750×1624, and they are remarkably light for full-screen animation, from 132 to 577 KB, because video compression handles large soft areas of light far better than frame-by-frame images do. They loop in 0.9 to 2.8 seconds.

The pack also has two SVGA swirl rings at 220×220, one golden and one teal, to sit behind the top avatars.

Putting the page together

1. Background: the palace for that board, playing behind everything.

2. Podium: the top three avatars in their winged frames, Top 1 in the middle and larger, with the swirl ring behind first place.

3. List: places 4 onwards as plain rows with small medals, no animation.

4. Results moment: when a period ends, play the Rank Top banner for each winner in the rooms they are in, then switch on their frame, badge and bubble for the next period.

For a new app, the Leaderboard Palace Backgrounds also come inside the App Starter Pack, with a Top 1–3 set of lion rank frames, Rich and Charm level badges, gifts, entrances and staff role tags.

Next step

List the leaderboards your app runs and how long each period lasts, then decide which rewards travel with the winners and for how long. Preview the palace backgrounds and frames together in the free viewer, which plays both SVGA and VAP.