toggle-pill-slide

Purpose

Render a 2-3 option segmented control (e.g. Annual / Monthly) where the active option is highlighted by a sliding pill background. When the active option changes, the pill animates between option positions.

Params

{
  "options": ["Annual", "Monthly"],
  "active_index_keyframes": [
    { "atFrame": 0,  "index": 0 },
    { "atFrame": 30, "index": 1 }
  ],

  "container_bg": "#F5F3EE",
  "container_radius_px": 28,
  "container_padding_px": 6,