Animated Card Stack

1"use client";
2 
3import {
4  Card,
5  CardContent,
6  CardDescription,
7  CardHeader,
8  CardTitle,
9} from "@/components/ui/card";
10import { motion, useReducedMotion } from "framer-motion";
11 
12const cards = [
13  { title: "Card 1", description: "First card" },
14  { title: "Card 2", description: "Second card" },
15  { title: "Card 3", description: "Third card" },
16];
17 
18export function AnimatedCardStack() {
19  const shouldReduceMotion = useReducedMotion();
20 
21  return (
22    <div className="relative flex items-center justify-center px-8 py-16">
23      <div aria-hidden className="pointer-events-none absolute inset-0 -z-10">
24        <motion.div
25          className="absolute left-1/2 top-10 h-56 w-56 -translate-x-1/2 rounded-full bg-primary/20 blur-[140px]"
26          animate={
27            shouldReduceMotion
28              ? undefined
29              : { opacity: [0.25, 0.45, 0.25], scale: [0.9, 1.05, 0.95] }
30          }
31          transition={
32            shouldReduceMotion
33              ? undefined
34              : { duration: 11, repeat: Infinity, ease: "easeInOut" }
35          }
36        />
37        <motion.div
38          className="absolute bottom-8 right-12 h-48 w-48 rounded-full bg-emerald-400/25 blur-[150px]"
39          animate={
40            shouldReduceMotion
41              ? undefined
42              : { opacity: [0.18, 0.35, 0.18], rotate: [0, 12, 0] }
43          }
44          transition={
45            shouldReduceMotion
46              ? undefined
47              : { duration: 13, repeat: Infinity, ease: "linear" }
48          }
49        />
50      </div>
51      {cards.map((card, index) => {
52        const baseScale = 1 - index * 0.04;
53        const baseOffset = index * 18;
54        const hoverMotion = shouldReduceMotion
55          ? undefined
56          : { scale: baseScale + 0.06, y: -20 };
57        return (
58          <motion.div
59            key={card.title}
60            initial={{ scale: baseScale, y: baseOffset, opacity: 0 }}
61            animate={{ scale: baseScale, y: baseOffset, opacity: 1 }}
62            whileHover={hoverMotion}
63            whileFocus={hoverMotion}
64            transition={{
65              type: shouldReduceMotion ? "tween" : "spring",
66              stiffness: 260,
67              damping: 26,
68              delay: index * 0.08,
69            }}
70            className="absolute w-64 rounded-3xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
71            style={{ zIndex: cards.length - index }}
72// … truncated