A radial gradient spotlight tracks the cursor inside the button. On mousemove, CSS custom properties --sx and --sy are updated with the cursor position as percentages, repositioning a radial-gradient in the background. The rest of the button remains dark, making the spotlight feel like a physical light source. No dependencies.
Goal: Create a "Spotlight" button animation.
Visual behavior: As the cursor moves across the button, a soft radial gradient spotlight follows it — illuminating the area under the cursor while the rest of the button stays dark. The spotlight is a ~80px radius circle of purple/violet light (rgba(139,92,246,0.35)) that smoothly repositions itself. The button has a dark (#111827) base background with a subtle violet border.
Technique: On mousemove, compute cursor position as percentages within the button rect: x = (e.clientX - rect.left) / rect.width * 100, y = (e.clientY - rect.top) / rect.height * 100. Store these as CSS custom properties --sx and --sy directly on the button element via style.setProperty(). The button background is: radial-gradient(circle 80px at var(--sx, 50%) var(--sy, 50%), rgba(139,92,246,0.35) 0%, transparent 70%), #111827. On mouseleave, reset --sx and --sy to 50%. No state needed — this is purely CSS property mutation.
Accessibility: Purely visual cursor-driven effect. No animation in the motion sense — the gradient repositions with cursor. Acceptable 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.