On focus, a tinted background layer scales from scaleX(0) to scaleX(1) with transformOrigin left — flooding the input with color from left to right. Border color transitions simultaneously. Pure transform, no opacity flash.
Goal: Create a "Fill" input animation.
Visual behavior: On focus, a tinted background layer floods the input from left to right. A sibling div positioned absolutely inside the wrapper scales from scaleX(0) to scaleX(1) with transformOrigin: left. The border color transitions simultaneously to the accent color. On blur, the fill scales back to scaleX(0). The result is a liquid-fill effect that reads as "active" without relying on box-shadow glow.
Technique:
- Wrap the <input> in a position: relative container with overflow: hidden and border-radius
- Inside the wrapper, add a div with position: absolute, inset: 0, and the fill color (accent with low opacity)
- On focus: transform: scaleX(1), transformOrigin: left; on blur: scaleX(0)
- transition: transform 380ms cubic-bezier(0.4, 0, 0.2, 1)
- The input itself has background: transparent so the fill shows through
- Border-color on the wrapper transitions to accent on focus
- willChange: transform on the fill layer for GPU compositing
Accessibility: Under prefers-reduced-motion, skip the scaleX transition; fill appears instantly (remove transition). Border-color change is fine to keep.
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.