Flip Card Stack — Motion Kit

Preview

01

Velocity

Gesture-friendly stack with a tactile top-card swap.

02

Depth

The stack keeps scale and rotation offsets while you drag.

03

Motion

Drag me and toss me to the back of the queue.

Drag the top card past the threshold and it snaps to the back of the stack with GSAP-driven transforms.

Attributes

Installation

pnpm dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/flip-card-stack.json

npx shadcn@latest add https://motion-kit-astro.vercel.app/r/flip-card-stack.json

bunx --bun shadcn@latest add https://motion-kit-astro.vercel.app/r/flip-card-stack.json

yarn dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/flip-card-stack.json

Usage

---
import "@/components/motion-kit/flip-card-stack-element.ts";
---

<motion-flip-card-stack
  stack-offset="8"
  stack-rotation="-10"
  drag-threshold="80"
  duration="0.3"
  ease="power2.out"
  class="inline-grid relative w-[320px] h-[480px]"
>
  <div class="flip-grid-item w-full h-full bg-white rounded-2xl p-6">
    <h2>Card 1</h2>
  </div>
  <div class="flip-grid-item w-full h-full bg-slate-50 rounded-2xl p-6">
    <h2>Card 2</h2>
  </div>
  <div class="flip-grid-item w-full h-full bg-white rounded-2xl p-6">
    <h2>Card 3</h2>
  </div>
</motion-flip-card-stack>

import "@/components/motion-kit/flip-card-stack-element.ts";

export default function Page() {
  return (
    <motion-flip-card-stack
      stackOffset={8}
      stackRotation={-10}
      dragThreshold={80}
      duration={0.3}
      ease="power2.out"
      className="inline-grid relative w-[320px] h-[480px]"
    >
      <div className="flip-grid-item w-full h-full bg-white rounded-2xl p-6">
        <h2>Card 1</h2>
      </div>
      <div className="flip-grid-item w-full h-full bg-slate-50 rounded-2xl p-6">
        <h2>Card 2</h2>
      </div>
      <div className="flip-grid-item w-full h-full bg-white rounded-2xl p-6">
        <h2>Card 3</h2>
      </div>
    </motion-flip-card-stack>
  );
}

<script setup>
import "@/components/motion-kit/flip-card-stack-element.ts";
</script>

<template>
  <motion-flip-card-stack
    :stack-offset="8"
    :stack-rotation="-10"
    :drag-threshold="80"
    :duration="0.3"
    ease="power2.out"
    class="inline-grid relative w-[320px] h-[480px]"
  >
    <div class="flip-grid-item w-full h-full bg-white rounded-2xl p-6">
      <h2>Card 1</h2>
    </div>
    <div class="flip-grid-item w-full h-full bg-slate-50 rounded-2xl p-6">
      <h2>Card 2</h2>
    </div>
    <div class="flip-grid-item w-full h-full bg-white rounded-2xl p-6">
      <h2>Card 3</h2>
    </div>
  </motion-flip-card-stack>
</template>

<script>
  import "@/components/motion-kit/flip-card-stack-element.ts";
</script>

<motion-flip-card-stack
  stackOffset={8}
  stackRotation={-10}
  dragThreshold={80}
  duration={0.3}
  ease="power2.out"
  class="inline-grid relative w-[320px] h-[480px]"
>
  <div class="flip-grid-item w-full h-full bg-white rounded-2xl p-6">
    <h2>Card 1</h2>
  </div>
  <div class="flip-grid-item w-full h-full bg-slate-50 rounded-2xl p-6">
    <h2>Card 2</h2>
  </div>
  <div class="flip-grid-item w-full h-full bg-white rounded-2xl p-6">
    <h2>Card 3</h2>
  </div>
</motion-flip-card-stack>

<script type="module" src="/components/motion-kit/flip-card-stack-element.js"></script>

<motion-flip-card-stack
  stack-offset="8"
  stack-rotation="-10"
  drag-threshold="80"
  duration="0.3"
  ease="power2.out"
  class="inline-grid relative w-[320px] h-[480px]"
>
  <div class="flip-grid-item w-full h-full bg-white rounded-2xl p-6">
    <h2>Card 1</h2>
  </div>
  <div class="flip-grid-item w-full h-full bg-slate-50 rounded-2xl p-6">
    <h2>Card 2</h2>
  </div>
  <div class="flip-grid-item w-full h-full bg-white rounded-2xl p-6">
    <h2>Card 3</h2>
  </div>
</motion-flip-card-stack>

API Reference

Attribute	Type	Default
`stack-offset`	`number`	`8`
`stack-rotation`	`number`	`-10`
`drag-threshold`	`number`	`80`
`duration`	`number`	`0.3`
`ease`	`string`	`"power2.out"`