Skip to content

Swipe Deck

Testimonials as a physical card stack: fling the top card sideways and it tucks under the deck.

  • drag with velocity
  • rotation from drag offset
  • stack reordering
  • autoplay
swipe-deck.prompt.md
# Build: "Swipe Deck" testimonials section

You are a senior creative front-end engineer. Build this testimonials section exactly as specified.

## Target stack
React + Tailwind CSS v4 + Framer Motion

## Concept
Testimonials presented as a physical stack of cards. You can drag or fling the top card sideways. Once it passes a threshold it springs back and tucks under the stack, and the next card rises to the top.

## Content (use verbatim)
- Title (h2): "People ship faster with it"
- Intro: "Drag a card aside to read the next one."
- Quotes (name, role, quote):
  1. Mariam Haddad, Indie maker: "I pasted the prompt into my agent and got the exact section from the preview on the first try."
  2. Omar Fathy, Freelance designer: "The motion feels hand-tuned. Clients notice it before they notice anything else."
  3. Lina Park, Growth lead at Driftly: "We replaced half our landing page in an afternoon and the bounce rate dropped the same week."
  4. Youssef Amin, Full-stack developer: "Finally a library that gives me the brief as well as the code. My agent stopped guessing."

## Layout
- Two columns at ≥768px (text 1fr, deck 1.1fr), stacked on mobile.
- Text column: title 60px/36px with tight leading. Under the intro, a row of progress dots: the active dot is a 28px pill in the accent color, the others are 8px dots in the text color at 20% alpha, with springy width changes.
- Deck: 340px tall, max-width 420px, centered.
- Card: an accent quote-mark icon at the top, the quote (24px, medium weight) in the middle, and at the bottom an initials avatar (gradient from accent to text color) with name and role.

## Design tokens
- Background: #F2EEE6 · Text: #1B1A17 · Card: #FFFFFF · Accent: #3B5BFF
- Card radius: 28px. Shadow: `0 30px 60px -20px` in the text color at 25% (smaller for cards behind the top one).

## Motion
1. **Stack positions:** the card at stack position `pos` animates to y = pos×16px, scale = 1 − pos×0.05 and rotate = ±pos×4° (alternating sign; the top card is 0°). Cards at pos > 2 fade out. Use a spring (stiffness 260, damping 24).
2. **Drag:** only the top card can be dragged, on the x axis only, with elastic 0.7. Its rotation follows the drag offset, mapping −220…220px to −16…16°. It scales to 1.03 while dragged.
3. **Release:** if |offset| > 110px or |velocity| > 600px/s, move this card to the back of the order. It always snaps back to x = 0, and the stack spring carries it underneath.
4. **Autoplay:** advance every 4s. Pause while the pointer is over the deck.

## Accessibility
- The deck is `aria-live="polite"`. Cards behind the top one ignore pointer events.
- Use `touch-action: pan-y` so vertical page scrolling still works on mobile.
- Respect `prefers-reduced-motion`.

## Deliverable
One self-contained component with a config object holding every value above.
0