Three layered cards sit in a tight stack at rest. On hover they fan outward — back card rotates −6° and slides left, middle rotates +5° and slides right, front card lifts upward — using a spring cubic-bezier that physically overshoots before settling.
Goal: Create a "Stack" card animation.
Visual behavior: The card appears as a stack of three layered cards at rest. The back card sits slightly offset to the left and rotated −3°; the middle card is offset right and rotated +2°; the front card is flat on top. On hover, the back card fans further left and rotates to −6°, the middle fans further right at +5°, and the front card lifts slightly upward (translateY −6px) with a deeper shadow. The motion feels springy and physical. On mouse leave the stack collapses back.
Technique:
- Three absolutely positioned divs inside a relative container; all same width/height
- Back card: transform translate(-6px, 6px) rotate(-3deg) at rest → translate(-16px, 10px) rotate(-6deg) on hover
- Middle card: transform translate(4px, 4px) rotate(2deg) → translate(14px, 8px) rotate(5deg) on hover
- Front card: transform translate(0, 0) → translate(0, -6px) on hover
- transition: 'transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1)' (spring overshoot) on all three
- box-shadow deepens on all cards as hover deepens
- Only the front card needs content; back and middle are decorative color fills
Accessibility: Under prefers-reduced-motion, skip the fan transform; hover only deepens the front card's box-shadow.
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.