On selection, three concentric arc rings broadcast outward like a radio transmission signal. Each arc scales and fades in sequence (120ms stagger), then a persistent inner glow ring settles. The radio icon vibe made literal.
Goal: Create a "Signal" radio group animation.
Visual behavior: A radio group with 3 options. Each radio indicator is a 24×24px circle. On selection, 3 concentric rings expand from the dot (CSS: scale 0.5→2.4, opacity 0.8→0) with staggered animation-delay (0ms, 200ms, 400ms) over 1000ms each, simulating radio signal arcs broadcasting outward. The core glows yellow (#eab308) with a box-shadow glow. An inner 8px dot springs in. The signal arc rings restart on each selection via a signalKey counter.
Technique: React useState tracks selected option and signalKey counter. Rings use key prop (signalKey-i) to remount on each selection. The CSS @keyframes (signal-arc) drives scale+opacity. Inline styles drive the core transitions. No library dependencies.
Accessibility: Hidden native <input type="radio"> per option, shared name attribute. Keyboard-navigable. Signal arc animation skipped under prefers-reduced-motion.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.