Stickers and mascots

Play the clasp. Then switch to "Flat clip-art" and play it again.

The flat one is not wrong, exactly. It just looks like it was generated. The sticker looks like someone made it. That difference comes from a short list of rules, most of them from Kelvin Adithya's fun-isometric, a skill that draws and animates exactly this kind of sticker.

Where stickers belong

Empty states, onboarding, feature cards: the rare, friendly screens. Not inside buttons, not in a list of fifty rows. A sticker is illustration, so it gets illustration time (a second of action, then rest), never the 200ms of a control's feedback.

Drawing one

1. One square, one outline

   A 500-unit canvas, the subject filling about half of it with room to swing. One ink outline, about 5 units, on every part, with sharp corners. No gradients, no drop shadows, no glow.

2. Faces lean

   An isometric face is tilted back, so rectangles become slanted parallelograms and circles become ellipses. It is not just rotated. The side falls the same way (down and left) on every part.

3. Every part is a slab

   Each part is a slab: a flat shape with its own thickness. The lock is a body slab, a shackle slab and a raised keyhole plate. Three to six parts for one object.

4. Sparse ink detail

   One keyhole. Two pupils. A few lines. Sparkles are small white stars with the same outline.

Painting the detail flat onto one shape is the tell of a generated sticker. Build it from parts.

Colors as jobs, not hex codes

The sticker's fills are named by palette role: main for bodies, deep for the dark side, tint for pale fills, gold for coins and stars, plus ink and white. Two accents and white per icon.

Roles are what let a sticker move to a new brand. Map main and deep to your design tokens and every part keeps its meaning. Leave a sticker on its default six-color palette in a two-color product and everyone can tell nobody mapped it.

Moving one

• Pick the motion by the verb. A lock clasps, a coin bounces, a bell wiggles, a plane drifts. The verb decides the movement, not the noun.
• Use tuned keyframes, not a sine wave. The presets come from After Effects keys an animator already tuned. Change the amplitude or start; never stretch them.
• Pivot where it would hinge. Children follow 4 to 6 frames late, so nothing moves in lockstep.
• Sparkle on the beat. The glint starts on the slam, the landing, the reveal.
• Then hold still. Loops run two to three seconds with the action in the first half. Filling the hold with idle wobble is the quickest way to cheapen it.
• Pop with scale, never fade. A slab is drawn as a stack of copies, so fading it shows the stack.

If fun-isometric is installed, let it draw, check and export the sticker (live on a canvas or as looping video with a still poster). If not, build to these rules as an animated SVG. Either way, check it at 160px beside your other stickers: same line weight, faces leaning, every part with thickness.

From a video clip to a vector mascot

Sometimes the source isn't drawn by hand at all. It is a short, flat animated clip, perhaps made by a video model: a rooster typing, a blob waving. That can become one SVG that is tiny, sharp at any size and recolorable.

It only works for simple, flat art: solid fills, two to eight colors, clean outlines, no gradients or texture. Ask for that when you generate the clip ("flat vector style, solid colors, no gradients, plain background").

1. Extract frames

   ffmpeg -i clip.mp4 -vf "fps=12,scale=512:-1" frames/f_%03d.png. Twelve frames a second reads as animation; 24 doubles the file for little gain.

2. Reduce the colors, then trace

   Quantize each frame to its handful of colors first, then vectorize with vtracer (Potrace for pure black and white).

3. Clean and name

   Remove specks, merge near-identical colors, delete the background, run SVGO. Name each color region the same in every frame (body, beak, eye-l), matched by position and color. Named layers are what make it editable.

4. Assemble and budget

   One SVG, one group per frame, a stepped animation: a vector flipbook. Colors become CSS variables. Merge identical frames into longer holds. A simple 24-frame loop lands around 20 to 60 KB; bigger means slivers survived step three.

The SVG stays the editable source. Export onward to Lottie, Rive or MP4 only when a platform needs it.

Make an animated isometric sticker of a padlock for our empty "No saved passwords" state.
- 500-unit canvas, one 5-unit ink outline, faces leaning, side falling down-left
- three parts, each its own slab: body, shackle, keyhole plate
- fills by role (main, deep, tint, ink, white), mapped to our tokens --accent and --accent-deep
- verb "clasp": shackle drops, two small bounces, sparkle on the slam, then a still hold; play once, no idle loop
- reduced motion shows the closed lock
Check it at 160px next to our existing stickers.