Good, Great, Perfect: designing the tap-to-react layer of a live room

Most of what happens in a live room costs nothing. Gifts get the attention, but the bulk of interaction is people tapping: a like, a follow, a Perfect after a good song. Those taps are free and constant, and they need an answer almost instantly, which makes them a design problem of their own.

Every tap has two audiences

When someone taps a reaction, two different groups need two different things.

• The person who tapped needs confirmation, immediately. Play the animation locally the moment the finger lifts; do not wait for the server. If the request later fails, quietly reset the icon rather than playing an error.

• Everyone else needs a sense of the room's mood, not a replay of every tap. Ten likes in a second should read as one lively burst, not ten stacked animations.

Getting this split right matters more than any single asset, because it decides how often each file actually plays.

A graded scale: Good, Great, Perfect, Amazing

Rating words are the most structured part of the reaction layer. They work for karaoke scores, game rounds, quiz answers or a host rating the room, and they read as a ladder as long as the order never changes.

The Reactions & Party Effects collection has all four on the same 230x120 canvas, which makes them easy to swap in one slot:

Room Good, Room Great, Room Perfect and Room Amazing share exactly the same specs, which is handy if you want separate assets for the room itself and another surface.

Practical rules for a rating scale:

• Fix the order. Decide which word sits at the top, keep it there everywhere, and never use one word for two levels.

• Keep the canvas constant, as these four do, so the slot never jumps when the word changes.

• Pace the sequence. At under two seconds each, two ratings back to back still feel snappy; five in a row start to feel like noise.

Light and heavy versions of the same word

Not every Perfect needs 161 KB. Perfect II says the same word at 180x80, 12 fps and 1.4 seconds in just 3.5 KB, roughly a forty-sixth of the full version.

That gives you a simple rule: use the heavy version for rare moments, such as the end of a round or a best score, and the light one for frequent beats, such as every correct note or streak tick. The collection as a whole leans light: 92 files, 78 SVGA and 14 PAG, ranging from 180 B to 347 KB with a median of 16 KB.

Likes and follows: confirm, then get out of the way

Likes and follows are the most frequent taps of all, so their animations should be short, small and quiet.

• Use state pairs. The store has Like Before and Like After as a pair, which maps cleanly onto an unliked and a liked icon.

• Match the theme. Like and Like Dark exist as separate files; check every reaction on both your light and dark surfaces.

• One play per tap. If someone taps again mid-animation, restart from the first frame rather than queueing a second play.

• Follow once, celebrate once. A follow, such as Room Follow, is a relationship change, so it can be a touch bigger than a like, but it should never block the screen.

Moods, emoji and room-wide moments

Emoji reactions sit between a like and a gift. Emoji 1 to Emoji 8 share a 288x288 canvas, 30 fps and a 3-second loop; Emoji 1 to 7 range from 36 KB to 54 KB, and Emoji 8 is 119 KB. Love, Broken and Sleep run at 240x240, 30 fps and 3 seconds, at 17 KB, 25 KB and 19 KB. In a voice room, play them above the sender's seat so everyone can see who reacted.

Some reactions belong to the whole room. Chat Room Shake Together (159x159, 30 fps, 3 s) matches the top of the collection's size range at 347 KB and suits an everyone-at-once moment. Party titles such as Party Title Online label a room or a moment as a party, and small toys such as Funny Wheel (252x252, 10 fps, 1 s, 156 KB) or the PAG Interactive Slot Machine (180x180, 30 fps, 2.4 s, 16 KB) give people something to tap together.

Reactions are not gifts: throttle them

A paid gift must play; a free reaction can be dropped. Build your queue around that difference.

• Priority: paid gifts first, then the viewer's own reactions, then everyone else's.

• Coalesce: merge identical reactions that arrive together into one animation with a counter.

• Cap concurrency: pick a small limit for reactions on screen at once and drop the overflow rather than queueing it.

• Preload the set: reaction files are small enough to load when the room opens, so the first tap never waits on the network.

Test each file in the SVGA & PAG Viewer over your real room background; a word that is crisp on dark can vanish on a pale theme. SVGA files play with the open-source SVGAPlayer runtimes, and PAG files need Tencent's libpag.

Next step

List every tap action in your room, mark each one as rare or frequent, and give it a heavy or light animation to match. For the celebration side, the Party Night Pack gathers fireworks, confetti and big gift-combo celebrations: 20 files for less than buying them one by one. For everyday chat reactions, the Normal Emoji Pack adds 23 files.