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.