Gradient Spin
No library Advanced
A conic-gradient border rotates continuously while the input is focused, achieved by spinning a larger gradient square behind a clipped wrapper to simulate an animated gradient border.
A conic-gradient border rotates continuously while the input is focused, achieved by spinning a larger gradient square behind a clipped wrapper to simulate an animated gradient border.
Goal: Create a "Gradient Spin" input with a continuously rotating conic-gradient border on focus.
Visual behavior: At rest, a standard rounded input. On focus, a spinning conic-gradient border appears and rotates continuously. The technique: a wrapper div (overflow:hidden, border-radius) contains a larger square div (width = diagonal of wrapper, centered at 50%/50%) with a conic-gradient background that animates rotation via @keyframes. Inside the rotating square, an inner content div (inset:2px, matching background) holds the input so only a 2px border of the gradient is visible around the edges.
Technique:
- Wrapper: position:relative, overflow:hidden, border-radius, fixed width/height
- Rotating bg: position:absolute, width = Math.ceil(Math.sqrt(w²+h²)), top:50%/left:50%, transform:translate(-50%,-50%), conic-gradient, animates rotate via @keyframes
- Inner mask: position:absolute, inset:2px, border-radius:(wrapper-2), background matching page background
- Input inside mask: no border, no background, full height
- animationPlayState: 'running' on focus, 'paused' on blur (with opacity transition for the rotate div)
Accessibility: Rotation paused under prefers-reduced-motion. Static gradient visible as focus indicator.
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.