On hover, a violet light beam races continuously around the button border. A 2px-padded wrapper div clips a large rotating conic-gradient square — only the border gap is visible, creating the illusion of a beam orbiting the perimeter. The button interior stays dark. No dependencies.
Goal: Create a "Border Beam" button animation.
Visual behavior: On hover, a bright violet light beam races continuously around the button's border. The button interior stays dark (#0f172a). The beam is a single bright arc that completes one orbit every ~1.8 seconds. Off hover, the beam stops.
Technique: A wrapper div (display:inline-block, padding:2px, border-radius:10px, overflow:hidden) clips a large spinning square. Inside: (1) a 400×400px span centered via top:50%, left:50%, margin:-200px on each side, with a conic-gradient(from 0deg, transparent 0%, #a855f7 8%, #c084fc 12%, transparent 18%) background — this is the beam arc. On hover, it gets animation: btn-border-beam-spin 1.8s linear infinite. (2) a regular <button> element with position:relative, background:#0f172a, border:none so it covers the center, leaving only the 2px border gap visible. Track hover with React useState on the wrapper div.
Accessibility: Spin animation disabled 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.