Hover sweeps a clip-path from inset(0 0 100% 0) to inset(0 0 0 0) — a bottom-to-top wipe that reveals hidden card content. A placeholder state fades out simultaneously. Sharp cubic-bezier easing gives the reveal a crisp, decisive feel.
Goal: Create a "Wipe Reveal" card animation.
Visual behavior: The card's text content is initially hidden beneath a dimmed overlay state. On hover, a clip-path wipe transitions from inset(0 0 100% 0) to inset(0 0 0 0) — sweeping from the bottom edge upward to reveal the real content. Simultaneously, the placeholder (muted) text fades out. The card image/header area also swaps its inner elements (a static icon fades, colored dots burst in with a spring scale). On mouse leave, everything reverses.
Technique:
- Use clipPath: 'inset(0 0 100% 0)' → 'inset(0 0 0 0)' on a wrapper div to reveal content
- Transition: 'clip-path 380ms cubic-bezier(0.76, 0, 0.24, 1)' — a sharp ease-out for authority
- Fade out placeholder text with opacity transition (180ms ease, no delay)
- Fade in header dots with opacity + spring scale transform, staggered via transition-delay
- Position the placeholder text absolutely so it occupies the same space as the real content
Accessibility: Under prefers-reduced-motion, swap directly (use opacity-only transition, skip clip-path animation).
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.