| name | sticker-chip-pop |
| description | motion-graphic primitive — small UI chip / sticker / label that pops in as a delayed nested beat AFTER its parent card / panel has landed. encodes the two-tier choreography that's the single most consistent "pro" tell across reference videos (parent lands first, then child stickers arrive 200–400ms later). used in SP-B (pinterest reaction chips), SP-E (chaos-card sticker labels), SP-A (carousel card chips). |
sticker-chip-pop
Purpose
Pop a small UI chip / sticker / label INTO a parent card or panel, with a delay that creates the two-tier rhythm characteristic of professional motion graphics. Without this delay, scenes feel amateur because "everything-at-once" entrances lack the considered timing reference videos all share.
Params (params.schema.json)
{
"id": "shirts-chip",
"content": "Shirts",
"embedded_sticker_src": null,
"embedded_sticker_size_px": 32,
"chip_bg": "#FFFFFF",
"chip_text_color": "#0F0F0F",
"chip_border_radius_px": 24,
"chip_padding_px": [12, 16],
"chip_font_family": "Inter",
"chip_font_size_px": 22,
"chip_font_weight": 700,
"chip_shadow": "soft-drop",
"anchor": {
"kind": "parent-relative",
"parent_id": "card-1",
"x_pct": 0.18,
"y_pct": 0.22
},
"tilt_deg": -6,
"parent_settle_frame": 30,
"tier_offset_frames": 8,
"pop_easing": "spring(damping=14, stiffness=220, mass=0.5)",
"pop_overshoot_pct": 0.12,
"post_pop_wobble": true,
"wobble_amplitude_deg": 1,
"wobble_period_frames": 30
}
Behaviour
- Render the chip as an absolutely-positioned element relative to its parent (or to canvas if
kind = absolute).
- Compute
effective_pop_frame = parent_settle_frame + tier_offset_frames.
- Before
effective_pop_frame, render with opacity=0 + scale=0.
- At
effective_pop_frame, animate scale from 0 → 1 via spring with overshoot. Opacity ramps 0→1 over 6 frames.
- After pop, if
post_pop_wobble = true, apply continuous tilt oscillation per wobble_amplitude_deg.
Style pack overrides
SP-A (marshmallow)
- Used inside A4 (pricing carousel) for small tier-label chips above the price.
tilt_deg: 0 (no tilt — Marshmallow is axis-aligned).tier_offset_frames: 8.
SP-B (pinterest-saturated)
- Used for reaction chips in chip-orbit pattern around a phone.
tier_offset_frames: 12.- Embedded sticker image (emoji / lemon / palm tree) inside chip.
chip_shadow: soft-drop.
SP-E (chaos-card)
- Used INSIDE every card to label its category / action.
tilt_deg: random ±6°.post_pop_wobble: true.- Card-color-complementary chip bg.
When to use
- ANY archetype where a parent element has child labels / chips / sticker overlays.
- Whenever you need to create a two-tier rhythm in a scene (parent lands → child arrives).
When NOT to use
- For the primary headline or hero element (those use pop-in or scale-bounce directly).
- When the chip's job is to be a CTA across scenes (use
element-handoff instead — the CTA chip in SP-A is NOT a sticker-chip-pop because it's a sharedLayer).
Quality Checks
tier_offset_frames ≥ 4 (less than 4 frames doesn't read as a two-tier beat).effective_pop_frame ≤ scene.duration_frames - 12 (the chip needs time to be seen after popping).- Chip's bbox doesn't overlap parent's primary content (price, headline, etc.).
- Embedded sticker (if any) renders inside the chip's bbox.
Failure Modes
- Chip and parent pop simultaneously.
tier_offset_frames is 0. The whole point is the delay — set to 8+.
- Chip overflows parent card. Recompute anchor x_pct / y_pct to ensure chip's bbox fits within parent bounds.
- Chip's text wraps unexpectedly. Add
white-space: nowrap to the chip's text style.
- Wobble looks robotic. Reduce amplitude to 0.5° or extend period to 60 frames. Subtle is the goal.
