A sci-fi radio group where selecting an option fires two concentric cyan rings outward in a looping radar-ping animation. The indicator core glows with a radial gradient and a center dot springs in. Monospace labels shift from dim to bright cyan.
Goal: Create a "Radar" radio group animation.
Visual behavior: A group of 3 radio options with a sci-fi/radar aesthetic. Each indicator is a 22×22px circle. Unselected: faint cyan border (25% opacity), muted label. Selected: full cyan (#06b6d4) border with inner radial gradient glow, a 6px center dot that springs in with overshoot, and two concentric ring overlays that animate outward and fade like a radar ping (animation: radar-ring 1.1s ease-out infinite, staggered 360ms). Labels are monospace, shifting from dim to bright cyan on selection.
Technique: React useState tracks selected. CSS keyframes injected via useEffect into document.head. Inline styles drive all transitions. Concentric rings are conditionally rendered spans with absolute positioning. No library dependencies.
Accessibility: Hidden native <input type="radio"> per option, shared name. Keyboard-navigable. Animations 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.