A radio group with 30px spherical indicators that transform from a flat hollow ring into a 3D gel/bubble using a radial gradient highlight at the top-left and a specular gloss spot. Selected state glows with a violet aura and inset shine.
Goal: Create a "Bubble" radio group animation.
Visual behavior: A group of 3 radio options. Each indicator is a 30×30px circle that dramatically changes from a flat, near-invisible hollow ring (unselected) to a 3D gel/bubble sphere (selected). The selected state uses a radial gradient going from a white/near-white highlight at top-left through vivid violet (#a78bfa) to deep purple (#4c1d95) at bottom-right. A small specular gloss spot (38% wide blurred ellipse) springs in at top-left to complete the 3D illusion. Outer box-shadow adds a violet glow aura. Labels gain weight and brighten on selection.
Technique: React useState tracks selected. All visuals driven by inline style transitions on background, border-color, box-shadow, and a child span for the specular highlight. No keyframes needed. No library dependencies.
Accessibility: Hidden native <input type="radio"> per option, shared name. Keyboard-navigable. Transitions 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.