Layered Stack

Stack of cards with depth — back cards are visible offset behind the front card. Hover lifts the top card with a spring.

Use and inspectUse this when the motion supports the surrounding content. Connect callbacks and state to your app, keep the reset preview as a local demonstration, and add a reduced-motion fallback for movement or looping. The preview is synthetic; it does not call a backend.Next: inspect the source below and replace the demo inputs with your own data.

Layered StackStack of cards with depth — back cards are visible offset behind the front card. Hover lifts the top card with a spring.

"use client";
import { motion } from "framer-motion";

type LayeredStackProps = {
  count?: number;
  colors?: string[];
};

const DEFAULT_COLORS = [
  "rgba(255,255,255,0.92)",
  "rgba(255,255,255,0.55)",
  "rgba(255,255,255,0.25)",
];

export function LayeredStack({ count = 3, colors = DEFAULT_COLORS }: LayeredStackProps) {
  const cards = Array.from({ length: count });

  return (
    <div className="mp-layered-stack">
      {cards.map((_, i) => (
        <motion.div
          key={i}
          className="mp-layered-stack-card"
          style={{
            position: i === 0 ? "relative" : "absolute",
            top: i === 0 ? 0 : i * 7,
            left: i === 0 ? 0 : i * 5,
            zIndex: count - i,
            background: colors[i] ?? `rgba(255,255,255,${0.9 - i * 0.25})`,
          }}
          whileHover={
            i === 0
              ? {
                  y: -10,
                  boxShadow: "0 20px 44px rgba(0,0,0,0.38)",
                }
              : {}
          }
          transition={{ type: "spring", stiffness: 300, damping: 24 }}
        />
      ))}
    </div>
  );
}

Installnpm install framer-motion

Props

Prop	Type	Default	Description
count	number	3	Number of stacked cards
colors	string[]	—	Background color per card (front to back)