Aurora
No library Intermediate
An animated aurora gradient drifts behind the input on focus via a CSS hue-rotate keyframe that loops continuously. When unfocused, the gradient fades out.
An animated aurora gradient drifts behind the input on focus via a CSS hue-rotate keyframe that loops continuously. When unfocused, the gradient fades out.
Goal: Create an "Aurora" input focus animation with a drifting rainbow gradient.
Visual behavior: The input has a translucent background. On focus, an aurora effect appears behind it: an absolutely positioned div with conic-gradient (purple → cyan → pink → purple) and a heavy blur, with a CSS @keyframes animation cycling hue-rotate from 0deg to 360deg on a ~4s loop. The aurora fades in on focus and fades out on blur.
Technique:
- Wrapper div with position:relative
- Aurora layer: absolute, inset:-2px, border-radius to match, conic-gradient background, filter:blur(8px), opacity transitions 0↔1, hue-rotate keyframe loops
- animationPlayState: 'running' on focus, 'paused' on blur (keeps opacity transition smooth)
- Input sits on top (position:relative)
- CSS @keyframes: 0%{filter:hue-rotate(0deg)} 100%{filter:hue-rotate(360deg)}
Accessibility: Border color change provides focus indicator. Aurora animation paused 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.