sticker-chip-pop

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",                  // text label, or embedded sticker
  "embedded_sticker_src": null,             // optional image (emoji, icon) inside the chip
  "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",                // none | soft-drop | hard

  "anchor": {
    "kind": "parent-relative",              // parent-relative | absolute
    "parent_id": "card-1",
    "x_pct": 0.18,                          // of parent's bbox
    "y_pct": 0.22
  },

  "tilt_deg": -6,                            // for SP-E: stickers always tilted

  "parent_settle_frame":   30,               // when parent card finishes landing
  "tier_offset_frames":    8,                // POP after parent_settle_frame
  "pop_easing":            "spring(damping=14, stiffness=220, mass=0.5)",
  "pop_overshoot_pct":     0.12,

  "post_pop_wobble":       true,             // for SP-E — see sticker-tilt-wobble effect
  "wobble_amplitude_deg":  1,
  "wobble_period_frames":  30
}

Behaviour

1. Render the chip as an absolutely-positioned element relative to its parent (or to canvas if kind = absolute).
2. Compute effective_pop_frame = parent_settle_frame + tier_offset_frames.
3. Before effective_pop_frame, render with opacity=0 + scale=0.
4. At effective_pop_frame, animate scale from 0 → 1 via spring with overshoot. Opacity ramps 0→1 over 6 frames.
5. 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.