Border Draw
No library Intermediate
On focus, four border lines trace around the input clockwise — top, right, bottom, left — each starting after the previous finishes. Pure CSS transforms, no dependencies.
On focus, four border lines trace around the input clockwise — top, right, bottom, left — each starting after the previous finishes. Pure CSS transforms, no dependencies.
Goal: Create a "Border Draw" input focus animation.
Visual behavior: On focus, four accent-colored lines trace around the input in clockwise order — top draws left-to-right, then right draws top-to-bottom, then bottom draws right-to-left, then left draws bottom-to-top. Each line takes ~220ms and starts the moment the previous finishes (staggered by 220ms). On blur the lines retract instantly.
Technique: Four absolutely-positioned <span> elements, each covering one side. Same approach as the Draw Outline button:
- Top: full width, scaleX 0→1, origin-left, delay 0ms
- Right: full height, scaleY 0→1, origin-top, delay 220ms
- Bottom: full width, scaleX 0→1, origin-right, delay 440ms
- Left: full height, scaleY 0→1, origin-bottom, delay 660ms
Wrapper div: position relative. Input: transparent background, subtle static border for the field boundary.
Accessibility: Animated spans hidden under prefers-reduced-motion (motion-reduce:hidden); a static border focus ring shown instead (motion-reduce:block on a fallback span).
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.