A Sticker That Keeps Evolving

A fan-club sticker pack on TikTok LIVE is mostly for the room — a W, an MVP, a LEVEL UP, a WELCOME TO THE TEAM. But some creators make a different kind: a sticker designed for a single viewer, with their name on it. I have three. Three rooms, three stickers with my handle on them, in three house styles — fire and gold, tiger stripe, violet ghosts.

That is the most personal thing a creator can hand a viewer, and it is also why a room has ten of them and not a thousand. Designing one is the expensive part. A template can’t replace it — but it can replace everything after: the sticker could keep evolving once it’s made, as the person behind it keeps showing up.

My own chat history is full of the frustration with how stickers are handed out today: “These stickers are so random”, “Aren’t the stickers supposed to be back”. The stickers are loved. Their logic is opaque.

What everyone else does

Loyalty badges are not new. What’s striking about the prior art is not how these systems encode several things at once — it’s that none of them try.

YouTube and Twitch encode one axis: tenure. Twitch adds a glow for a higher tier, which is the single place a platform composites onto a badge rather than swapping it for another image. The genuinely compositional precedents are older and not from streaming at all. Military ribbon devices pin a star onto a fixed ribbon for a repeat award, and most ribbons carry zero or one. Heraldry keeps a family’s arms fixed and adds a small mark of cadency; a coat of arms that can’t be described in one sentence is invalid. Apple’s rings show three things, but three measures of the same kind in the same shape.

The lesson is restraint, and it set the ceiling for everything below: a badge can carry a level and maybe one more thing. Sixteen pixels square is about two bits of signal, and anything that spends it on six achievements spends it on none of them.

The format decides the design

The stickers come back from the API as opaque, edge-to-edge squares — 876 to 1254 pixels, no transparent margin — and anything sent back has to be the same thing. That one fact rules out the two obvious approaches.

A frame around the art — a ring, a plaque, a rim — ships a square that’s 20–50% sticker and the rest transparent, which in chat renders as a shrunken sticker. Marks over full-bleed art keep the space but lose the signal: on bright, high-contrast artwork a 4px edge mark has neither area nor contrast.

The resolution is a band. The art sits at 84% inside a solid frame, and the frame is what the system paints. The output is still a full-bleed square; nothing is empty; the name is never touched; and a mark on a dark matte has the area and contrast a mark over artwork never will. Stage zero is a plain dark border — which is what most creator-designed stickers already carry.

Two ways to climb it

Whatever the band paints has to survive a simple test: render the layers without the artwork (the art is identical for every viewer, so it carries no information), rasterise at 16 and 32 pixels, and measure how far apart the pixels land across six steps from level 0 to level 50. The measurement is a floor, not a verdict — it rewards ink, and a grammar that covers more of the square scores higher whether or not anything is legible — but it reliably catches anything that doesn’t move.

Two grammars clear it. Metals climbs the tier ladder gaming has taught everyone — bronze, silver, gold, platinum, diamond — each a different hue, with the team’s colour kept as the inner edge. Fill paints the band clockwise from the top in the team’s own colour, a fifth every ten levels: extent, not tone. Both change the whole band at every step. Anything mark-based — a segment, a dot, a corner glyph — is too small to carry a step at 32 pixels, and one colour split by brightness blurs at the top of the ladder.

The band takes exactly one thing from the creator: a colour. The default is derived from the emoji in their display name — the site already maps every emoji to a curated pair, so 🐦‍🔥 opens in fire orange, 🐅 in amber, 👻 in violet — and the artwork does the rest of the theming.

What climbs it, and what sits on it

The band has one driver: team level. TikTok already defines it, already caps it at 50, and already celebrates it at round numbers, so the ladder is a stage every ten levels and nobody needs it explained. It never goes down, it never needs a threshold set, and it’s the same in every room.

Everything else goes on a plate — a dark window let into the band, never on the art, at one of eight stations. A plate has no colour of its own: the band’s colour is the progression, and anything painted on top of it competes with it, so a plate is matte, with its label in light ink — or, if the streamer prefers no chrome at all, just the label outlined on the band. There are two kinds, and both are the streamer’s to configure.

A milestone is a count passed: a million likes, a hundred thousand diamonds, three hundred sessions. The streamer picks the signal and the numbers; the plate carries the signal’s icon and the number in short form — ♥ 1M — and stays; the face the label is set in is the streamer’s pick from a short list of free fonts the renderer ships with. One plate can hold a ladder of numbers, 100K, 500K, 1M, and shows the highest passed, so a single station tells the whole story of one stat. A rank is a top-three place held: most likes, top gifter, most comments. Only three people in a room can hold one, no amount of spending manufactures a fourth, and it’s the one thing on the sticker that can go down — so it’s a plate, not a band, reading 1st, 2nd or 3rd with crowns for first, and the same icon says which stat.

The counted signals have no ceiling, which is why they’re plates and not ladders: cutting an unbounded count into five even steps leaves nearly a whole room on step zero. A milestone is one line, drawn where the streamer wants it, and the only question it answers is yes or no.

Is it automatable?

Entirely. Every sticker above is one SVG string — base tile, band, plaque — and the same string drives both the page and the renderer, so a PNG is one rasterisation. The images in this post came from a loop over that renderer in headless Chromium, no hand step; in production the same string goes through resvg with no browser at all.

The data side is just bookkeeping. Team level is shown in the room, and every count a plate can be about — likes, gifts, comments, time in the room, sessions — is visible from inside it while it’s live, so a system that sits in the room keeps the counts itself, per viewer, and never depends on anyone exporting anything. The design is finished enough to argue with. The pipeline behind it is the next post.