Purpose
Render N chips arriving around a central element at specific, asymmetric anchor positions (NOT a grid). Implies "conversation orbiting the focal object" — many reactions, opinions, pins clustering around the hero.
Params
{
"hero_element_bbox": { "x": 200, "y": 800, "w": 400, "h": 800 },
"chips": [
{ "content": "Design goals", "emoji": "✨", "anchor_x_pct": 0.18, "anchor_y_pct": 0.22, "delay_frames": 0 },
{ "content": "LOVE YELLOW!", "emoji": "🟡", "anchor_x_pct": 0.78, "anchor_y_pct": 0.30, "delay_frames": 6 },
{ "content": "INTO IT", "emoji": "🔥", "anchor_x_pct": 0.30, "anchor_y_pct": 0.74, "delay_frames": 12 },
{ "content": "yes", "emoji": "👀", "anchor_x_pct": 0.80, "anchor_y_pct": 0.70, "delay_frames": 18 }
],
"anchor_origin": "canvas", // canvas | hero "arrival_easing": "spring(damping=14, stiffness=200, mass=0.5)", "tier_2_delay_after_parent_frames": 12,
"chip_bg": "#FFFFFF", "chip_radius_px": 24, "chip_padding_px": [10, 14], "chip_text_color": "#0F0F0F", "chip_font_family": "Inter", "chip_font_size_px": 22, "embedded_sticker_size_px": 32 }
## Behaviour
1. After the hero element lands (parent settle), wait `tier_2_delay_after_parent_frames`.
2. For each chip, animate scale 0 → 1 with spring at `delay_frames` offset.
3. Anchor positions are intentionally asymmetric — no two chips share x or y axes.
## Style pack overrides
- **SP-B (pinterest-saturated)** — primary use case. 3-5 chips around a phone mock.
## Quality Checks
- Anchor positions are asymmetric (not a 2×2 grid).
- Each chip has a small embedded sticker / emoji.
- Chips arrive AFTER parent (two-tier).
- No chips overlap the hero element's primary content.
## Failure Modes
- **Chips form a grid.** Anchors too uniform. Use intentional off-axis positions.
- **Chips pop simultaneously.** Per-chip delay_frames missing.
- **Chips cover hero content.** Move anchors outward.