On hover, the primary label slides out to the left while a secondary label simultaneously slides in from the right — both driven by the same translateX transition. Different from swap-text which moves vertically; this is a horizontal wipe with distinct label content. No dependencies.
Goal: Create a "Wipe Swap" button animation.
Visual behavior: On hover, the primary label ("Get Started") slides out to the left and disappears, while a secondary label ("Let's Go →") simultaneously slides in from the right. Both labels move with the same 300ms cubic-bezier transition. The incoming label is a different color (e.g. indigo/violet) to signal the change. On mouseleave, they reverse.
Technique: Two spans inside the button — the first is display:block and translates from translateX(0) to translateX(-115%) on hover. The second is position:absolute inset:0 with flexbox centering, translating from translateX(115%) to translateX(0) on hover. Button has overflow:hidden and a fixed minWidth so layout doesn't shift. Use React useState for the hovered state.
Accessibility: Under prefers-reduced-motion, remove the CSS transition so the swap is instant.
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.