chip-orbit

name	chip-orbit
description	motion-graphic primitive — multiple chips arrive at intentional off-axis anchor positions around a hero element (typically a phone or central card). chips stagger in with embedded emoji-stickers. canonical pinterest creators-orbit pattern. distinct from a regular grid because anchor positions are asymmetric and seeded.

chip-orbit

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.