A horizontal radio group styled as neumorphic LED indicator buttons. Unselected state is a dark recessed circle with deep inset shadows. Selected state lights up as a glowing amber LED: radial gradient from bright center to deep amber, multi-layer glow box-shadow, and a slow repeating pulse.
Goal: Create a "LED" radio group animation.
Visual behavior: 3 options displayed horizontally, each as a 40×40px circular LED button with a label below. Unselected: dark charcoal fill (#1a1a1a) with heavy inset box-shadow to simulate depth/recess (neumorphic). Selected: a radial gradient from bright amber-yellow center (#fcd34d) through #f59e0b to dark amber (#b45309) at edges. Multi-layer box-shadow creates an outward glow (amber, softening over distance). A 12px inner core with its own radial gradient reinforces the light-source illusion. The button pulses with a slow 2-second ease-in-out keyframe animation while lit. Labels shift from dim white to amber.
Technique: React useState tracks selected. CSS keyframes for the pulse injected via useEffect into document.head. All visual states driven by inline styles transitioning background, box-shadow. No library dependencies.
Accessibility: Hidden native <input type="radio"> per option, shared name. Keyboard-navigable. Pulse 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.