Swipeable Card Stack

What We're Building

A stack of photo cards with depth (scale + offset so you can feel the pile)
Drag on the top card, with rotation tied to horizontal movement
A swipe threshold—drag far enough and the card flies off
Cards re-enter at the back of the stack after being swiped

No external state machines. No reducers. Just motion and useState.

Setup

You'll need Motion for React. If you're on the older framer-motion package, the API is identical—swap the import.

We'll also use clsx for conditional classes, though you can inline styles if you prefer.

The Data

Let's define a simple array of photo cards. Swap in your own images or wire this up to an API—the component doesn't care.

The Card Component

Each card is a motion.div that only accepts drag when it's on top. The key mechanic: we use useMotionValue and useTransform to derive rotation from the x position. This is the part that makes the interaction feel physical rather than programmatic.

A few things worth calling out:

dragConstraints={{ left: 0, right: 0 }} + dragElastic={0.85} — Setting constraints to zero and elastic to a high value gives you that rubbery feel. The card lags behind your finger slightly, then snaps back if released early.

dragSnapToOrigin — When the user releases below the swipe threshold, the card snaps cleanly home. No manual spring animation needed.

exit on the parent AnimatePresence — The exit animation reads the current x value to decide which direction to throw the card. This is the moment it flies off screen.

The Stack Container

The stack manages the order. When a swipe fires, we shift the top card to the bottom of the array—so nothing is ever truly deleted.

Why slice(0, 3)? Rendering only the top 3 cards keeps the DOM lean. The user can never see deeper than 2–3 cards in the stack anyway, so there's no reason to mount all five (or fifty).

AnimatePresence initial={false} — The initial={false} prop prevents the enter animation from firing on first render. Without it, every card would animate in when the page loads.

Adding Swipe Direction Indicators

The interaction is already good. Let's make it great by showing a visual cue—a colored overlay that fades in as the user drags further.

Add this inside the SwipeCard component, just before the closing motion.div:

Both overlays use useTransform against the same x motion value. One fades in as x goes negative, the other as x goes positive. They're invisible at rest and cost nothing when not dragging.

Keyboard & Button Controls

Not everyone swipes. Add arrow key support and buttons so the interaction is accessible.

Touch on Mobile

Motion handles pointer events natively, so touch works without any extra code. One thing to watch: if your card stack is inside a scrollable container, vertical scroll and horizontal drag will compete. Fix it by disabling scroll during drag with a CSS touch action:

Or pass it directly via the style prop on your motion.div:

Putting It Together

Drop <CardStack /> anywhere in your app:

What to Try Next

Undo — Keep a history array and pop from it to put a card back on top. Pair with a shake animation on the stack to signal the undo.

Callbacks per direction — onSwipe("left") and onSwipe("right") are already wired up. Connect them to whatever matters: save to favorites, add to a queue, log to an API.

Velocity-based throw — Read dragInfo.velocity.x in onDragEnd instead of position. Fast flicks should trigger a swipe even if the drag distance is short. More realistic, more fun.

Portrait vs. landscape — Cards don't have to be square. A tall portrait ratio (like 3:4) looks great for people photos; landscape suits landscapes. Let the content drive the shape.

The complete component is about 120 lines split across two files. Motion does the heavy lifting—physics, exit animations, transform derivation—so the code you write is almost entirely about intent, not implementation. That's the deal.

// components/SwipeCard.tsx
"use client"

import { motion, useMotionValue, useTransform, AnimatePresence } from "motion"
import Image from "next/image"
import { Photo } from "@/lib/photos"

interface SwipeCardProps {
  photo: Photo
  isTop: boolean
  onSwipe: (direction: "left" | "right") => void
  stackIndex: number // 0 = top
}

const SWIPE_THRESHOLD = 100 // px from center to trigger a swipe

export function SwipeCard({ photo, isTop, onSwipe, stackIndex }: SwipeCardProps) {
  const x = useMotionValue(0)

  // Rotate up to ±20° as the card travels ±200px
  const rotate = useTransform(x, [-200, 0, 200], [-20, 0, 20])

  // Subtle opacity on the left/right edges so you get a sense of commitment
  const opacity = useTransform(x, [-200, -100, 0, 100, 200], [0.6, 1, 1, 1, 0.6])

  function handleDragEnd() {
    const xVal = x.get()
    if (xVal > SWIPE_THRESHOLD) {
      onSwipe("right")
    } else if (xVal < -SWIPE_THRESHOLD) {
      onSwipe("left")
    }
    // If under threshold, Motion's dragElastic/dragSnapToOrigin snaps it back
  }

  // Stack the cards visually: cards deeper in the stack are smaller + lower
  const scale = 1 - stackIndex * 0.05
  const yOffset = stackIndex * 12

  return (
    <motion.div
      className="absolute inset-0 cursor-grab active:cursor-grabbing"
      style={{
        x: isTop ? x : 0,
        rotate: isTop ? rotate : 0,
        opacity: isTop ? opacity : 1,
        scale,
        y: yOffset,
        zIndex: 10 - stackIndex,
      }}
      drag={isTop ? "x" : false}
      dragConstraints={{ left: 0, right: 0 }}
      dragElastic={0.85}
      dragSnapToOrigin
      onDragEnd={handleDragEnd}
      initial={{ scale: 0.9, opacity: 0 }}
      animate={{ scale, y: yOffset, opacity: 1 }}
      exit={{
        x: x.get() > 0 ? 600 : -600,
        opacity: 0,
        rotate: x.get() > 0 ? 30 : -30,
        transition: { duration: 0.35, ease: [0.32, 0, 0.67, 0] },
      }}
      transition={{ type: "spring", stiffness: 300, damping: 30 }}
    >
      <div className="relative w-full h-full rounded-2xl overflow-hidden shadow-2xl">
        <Image
          src={photo.src}
          alt={photo.alt}
          fill
          className="object-cover"
          draggable={false} // prevent browser's native image drag
          priority={stackIndex < 2}
        />
        {/* Subtle label at the bottom */}
        <div className="absolute bottom-0 inset-x-0 p-4 bg-gradient-to-t from-black/60 to-transparent">
          <p className="text-white text-sm font-medium">{photo.alt}</p>
        </div>
      </div>
    </motion.div>
  )
}