Animated Card Stack

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