Six node dots arranged in a hexagonal halo around the radio indicator light up in ripple sequence with staggered animation-delay on selection, connected by faint SVG lines. Simulates a neural network firing pattern.
Goal: Create a "Neural" radio group animation.
Visual behavior: A radio group with 3 options. Each radio indicator is a 40×40px area with a 14px center circle and 6 small node dots arranged in a hexagonal halo (radius 14px from center, spaced 60° apart). On selection, the 6 nodes animate with staggered CSS animation-delay (0ms, 60ms, 120ms... 300ms): each pulses in (scale 0→1.4→1, opacity 0→1) in violet (#a78bfa). SVG lines connect center to each node, transitioning from dim to visible violet. The center core glows violet on select. Nodes and lines reset on each selection via nodeKey counter.
Technique: React useState tracks selected option and nodeKey. NODES array is precomputed with x/y coordinates via trigonometry. SVG overlay draws connection lines. Outer nodes use CSS animation (neural-pulse keyframe) with index-based animation-delay. No library dependencies.
Accessibility: Hidden native <input type="radio"> per option, shared name attribute. Keyboard-navigable. Node 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.