Scan Line
No library Intermediate
A horizontal scan line sweeps top-to-bottom through the focused input continuously on a ~2s CSS keyframe loop. Futuristic active-state ambient indicator.
A horizontal scan line sweeps top-to-bottom through the focused input continuously on a ~2s CSS keyframe loop. Futuristic active-state ambient indicator.
Goal: Create a "Scan Line" input with a continuous sweep animation on focus.
Visual behavior: The input appears normal. On focus, a thin horizontal gradient line (1-2px tall) sweeps from top to bottom of the input in a continuous loop (~2s per sweep). The line is semi-transparent with a center glow effect (left-to-right gradient from transparent to the accent to transparent). On blur, the scan line disappears.
Technique:
- Wrapper div with position:relative, overflow:hidden, border applied to the wrapper
- Input inside has no border (border on wrapper)
- Scan line: absolutely positioned child div, left:0/right:0, height:2px
- CSS @keyframes: top: 0% → top: 100% over 2s, linear, infinite
- Only render scan line when focused (conditional JSX)
- Opacity fades out near the end (e.g., opacity: 0.8 → 0 in the last 20% of the keyframe)
Accessibility: Scan line is purely decorative. Disabled 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.