On hover, 6 dots orbit the button in a continuous circle via CSS keyframes. Each dot shares a single rotate→translateX→counter-rotate keyframe; staggered negative animation-delay offsets each dot to an evenly-spaced starting position. The lead dot is slightly larger.
Create a button where 6 particles orbit around it on hover.
CSS keyframe:
from { transform: rotate(0deg) translateX(46px) rotate(0deg); }
to { transform: rotate(360deg) translateX(46px) rotate(-360deg); }
Each particle shares the same keyframe but has a different negative animation-delay
to distribute them evenly around the orbit:
delay = -(i / totalDots) * duration
Precompute the dots array outside the component (stable keys, no index key rule).
Fade particles in/out with opacity transition on hover.
Disable animation under prefers-reduced-motion.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.