On selection, five star dots appear around the option with SVG connecting lines forming a mini constellation. Each star twinkles with a looping opacity animation. Feels like the option is cosmically chosen.
Goal: Create a "Constellation" radio group animation.
Visual behavior: A cosmic radio group with 3 options. Each radio indicator is a 28×28px area. On selection: 5 small star dots (4×4px, pink #fbcfe8 with glow) appear in a pentagon pattern around the center, each with a staggered pop-in animation (70ms delay × index). SVG lines connect the stars forming a mini constellation shape, also animating in with delay. After appearing, stars enter a looping twinkle animation (opacity oscillation). The center radio core glows pink on select.
Technique: React useState tracks selected option and starKey counter. STARS and LINES arrays are precomputed. Stars use CSS animation chain: star-appear (pop-in) then star-twinkle (loop). SVG lines fade in. All keyed to starKey for remount on each selection. No library dependencies.
Accessibility: Hidden native <input type="radio"> per option, shared name attribute. Keyboard-navigable. Star twinkle 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.