Two opaque panels cover the input at rest like sliding doors. On focus they translate outward — left panel slides left, right panel slides right — revealing a gradient background underneath. A sharp cubic-bezier gives the reveal a decisive, mechanical feel.
Goal: Create a "Split" input animation — sliding door reveal.
Visual behavior: Two opaque panels (matching the page background) sit over the input at rest, covering it like closed sliding doors. On focus, the left panel translates to the left (translateX(-100%)) and the right panel translates to the right (translateX(100%)), revealing a gradient background underneath. The border color transitions to an accent. On blur, the panels slide back to center and close. A sharp cubic-bezier (0.76, 0, 0.24, 1) gives the motion a mechanical, decisive feel.
Technique:
- Wrapper: position relative; overflow: hidden; border-radius; gradient background (the "revealed" state)
- Left panel: position absolute; top/bottom: 0; left: 0; width: 50%; background matches page background
- At rest: transform: translateX(0); on focus: transform: translateX(-100%)
- Right panel: same but right: 0 and translateX(100%) on focus
- transition: transform 380ms cubic-bezier(0.76, 0, 0.24, 1) on both panels
- Input: position: relative; z-index: 2 (above panels); background: transparent
- Panels: pointer-events: none; z-index: 1 so input stays clickable at all times
Accessibility: Under prefers-reduced-motion, skip the panel translate — instead use opacity: 0 on both panels when focused (instant reveal, no sliding 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.