Electric
No library Advanced
An SVG overlay traces an electric arc around the input border via stroke-dashoffset animation on focus. Neon-green sparking effect that completes a full perimeter trace.
An SVG overlay traces an electric arc around the input border via stroke-dashoffset animation on focus. Neon-green sparking effect that completes a full perimeter trace.
Goal: Create an "Electric" input with an SVG border trace animation on focus.
Visual behavior: An input with a transparent SVG overlay the same size as the input (position:absolute, overflow:visible). The SVG contains a rect matching the input's rounded border shape. On focus, the rect's stroke-dashoffset animates from PERIMETER→0 (full trace) over 600ms via CSS @keyframes, and the stroke has a neon-green glow via CSS drop-shadow filter. After the trace completes, the border gently pulses. A key counter remounts the SVG rect on each focus to restart the animation.
Technique:
- SVG rect: x=1, y=1, width=W-2, height=H-2, rx=borderRadius-1, fill=none
- PERIMETER = 2*(W+H) as approximation (or precise via 2*(W+H-4*R)+2*PI*R for rounded rect)
- strokeDasharray = PERIMETER, strokeDashoffset animates from PERIMETER to 0
- filter: drop-shadow for neon glow on the SVG element
- CSS @keyframes: from{stroke-dashoffset:PERIMETER} to{stroke-dashoffset:0}
Accessibility: SVG animation disabled under prefers-reduced-motion. Native input border color still changes on focus.
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.