Anatomy

The section has a centered header (title + subtitle) and a fixed-height card container (480px wide, 320px tall) that holds up to three cards at once via absolute positioning. Cards are rendered in reverse slice order so the top card appears last in the DOM and sits visually in front. A dismissal state is tracked in a Set; when the set equals the full testimonials array length, the empty-state view with a reset button takes over.

How it works

Each SwipeCard creates its own `x` useMotionValue, then derives `rotate` (mapped from [-200, 200] to [-15, 15] degrees) and `opacity` (a five-point fade toward the edges) via useTransform. The drag axis is locked to `x` with elastic set to 0.9, and dragConstraints returns the card to center when released below the threshold. The `onDragEnd` handler checks `info.offset.x`; if the absolute value exceeds 100px, it adds the card ID to the dismissed Set. AnimatePresence manages the exit animation, a quick 0.2s fade, so cards don't snap out.

How to build it in React

1. Build the dismissal state

   Hold dismissed card IDs in a Set inside useState. Derive the visible stack by filtering the testimonials array against that Set. A reset function replaces the Set with a fresh empty one.

   const [gone, setGone] = useState(new Set<string>());
   const remaining = testimonials.filter((t) => !gone.has(t.id));
   const dismiss = (id: string) => setGone((prev) => new Set(prev).add(id));
   const reset = () => setGone(new Set());

2. Create rotation and opacity from drag position

   Inside SwipeCard, create an `x` motion value, then map it to rotation and opacity with useTransform. These run entirely on the compositor thread, no React re-renders during drag.

   const x = useMotionValue(0);
   const rotate = useTransform(x, [-200, 200], [-15, 15]);
   const opacity = useTransform(x, [-200, -100, 0, 100, 200], [0.5, 1, 1, 1, 0.5]);

3. Dismiss on threshold and animate out

   Pass `drag="x"` with `dragElastic={0.9}` and `dragConstraints={{ left: 0, right: 0 }}` to the motion.div. In `onDragEnd`, read `info.offset.x`; call `onDismiss()` when it exceeds 100px in either direction. Wrap the card list in AnimatePresence with an exit fade.

   onDragEnd={(_, info) => {
     if (Math.abs(info.offset.x) > 100) onDismiss();
   }}

4. Render at most three cards at depth

   Slice the remaining array to three items, reverse it, then render each one. The last element after reversing is the front card; give it `isFront={true}` so it gets drag and live motion values. The others sit behind at 0.7 opacity as static depth cues.

   {remaining.slice(0, 3).reverse().map((t, i, arr) => (
     <SwipeCard
       key={t.id}
       testimonial={t}
       onDismiss={() => dismiss(t.id)}
       isFront={i === arr.length - 1}
     />
   ))}

When to use it

Reach for this pattern when you want social proof to feel interactive rather than decorative, consumer apps, marketplace products, mobile-first SaaS, or any landing page targeting an audience comfortable with swipe gestures. Skip it on B2B enterprise pages where buyers expect dense logos and quotes at a glance, or when you have fewer than four testimonials (the stack effect disappears with two cards). Provide a way to see all testimonials at once for users who won't bother swiping through.

Used by

• Tinder, The originator of the swipe-to-dismiss card mechanic, now a widely understood interaction pattern.
• Bumble, Uses the same stack-swipe mechanic for profile cards, reinforcing how natural horizontal drag feels on touch.
• Product Hunt, Applies card-deck voting UI in its Golden Kitty awards flow, letting users swipe through nominees.

FAQ