Laser
No library Intermediate
On focus a cyan laser beam sweeps left-to-right along the bottom border via scaleX keyframe (300ms), leaving a persistent glowing hairline underline.
On focus a cyan laser beam sweeps left-to-right along the bottom border via scaleX keyframe (300ms), leaving a persistent glowing hairline underline.
Goal: Create a "Laser" input focus animation.
Visual behavior: A standard input field without a bottom border. Below it sits a 2px track. On focus, a bright cyan laser beam (linear-gradient with glow) sweeps left-to-right across the track via scaleX 0→1 CSS keyframe (300ms, easing: cubic-bezier(0.22,1,0.36,1)). After the sweep completes, a persistent glowing cyan hairline remains for the duration of focus.
Technique:
- Wrapper div holds the input and the 2px bottom track
- Input has border-bottom:none, rounded top corners only
- Track div has overflow:hidden and a relative child for the beam
- Beam uses transformOrigin:'left center' and animates scaleX via CSS keyframes
- A second div behind the beam provides the persistent post-sweep glow (opacity/color transition delayed by ~290ms)
- Use a React key counter on focus to remount the beam and restart the animation
Accessibility: Under prefers-reduced-motion, skip the sweep animation; show the glowing underline instantly 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.