Spotlight
No library Intermediate
A radial gradient spotlight follows the cursor horizontally inside the input as the user mouses over it, creating a torch-light illumination effect within the field.
A radial gradient spotlight follows the cursor horizontally inside the input as the user mouses over it, creating a torch-light illumination effect within the field.
Goal: Create a "Spotlight" input with a cursor-following radial gradient light.
Visual behavior: The input appears dark by default. When focused and the user moves their mouse over it, a radial gradient spotlight follows the horizontal cursor position — a soft elliptical glow illuminates wherever the mouse is, fading toward the edges. The spotlight appears on focus and disappears on blur.
Technique:
- Wrapper div with position:relative; ref attached for getBoundingClientRect
- onMouseMove: calculate cursor x position as a percentage of the wrapper width
- Spotlight layer: absolutely positioned inside the input, background set to radial-gradient centered at the cursor x position
- Example: radial-gradient(ellipse 60px 100% at {spotX}% 50%, rgba(accent,0.15) 0%, transparent 80%)
- Opacity transitions based on focus state
- No animation needed; the gradient updates instantly on mousemove
Accessibility: Spotlight is purely decorative. Input remains fully functional and focusable without it.
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.