Neon Pulse
No library Beginner
A neon glow box-shadow breathes in and out on a looping CSS keyframe while the input is focused. Sci-fi terminal aesthetic with violet and cyan hues.
A neon glow box-shadow breathes in and out on a looping CSS keyframe while the input is focused. Sci-fi terminal aesthetic with violet and cyan hues.
Goal: Create a "Neon Pulse" input with a breathing glow on focus.
Visual behavior: A sci-fi terminal style input. When focused, a neon box-shadow pulses in and out on a CSS @keyframes loop (1.8s, ease-in-out, infinite). The shadow has three layers: a tight close glow, a medium spread, and a distant diffuse halo — all in the same accent color (e.g. violet #a78bfa). The border brightens and the text color warms to the accent. On blur, the animation stops and the glow fades.
Technique:
- Single input element
- CSS @keyframes animates box-shadow between a dim and bright state at 0%/100% and 50%
- animation: 'neon-breathe 1.8s ease-in-out infinite' set on focus, 'none' on blur
- border-color, color, background all transition on focus
- transition for the non-animated props: 300ms ease
Accessibility: Under prefers-reduced-motion, animation is paused (steady glow remains). Border is still 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.