Animated List

1"use client";
2 
3import { Card } from "@/components/ui/card";
4import { motion, type Variants } from "framer-motion";
5import { CheckCircle2 } from "lucide-react";
6 
7const checklistItems = [
8  "Define the experience",
9  "Design high-fidelity flows",
10  "Develop interactive states",
11  "Test accessibility scenarios",
12  "Deploy with confidence",
13];
14 
15const containerVariants: Variants = {
16  hidden: { opacity: 0 },
17  visible: {
18    opacity: 1,
19    transition: {
20      staggerChildren: 0.12,
21      delayChildren: 0.2,
22    },
23  },
24};
25 
26const listItemVariants: Variants = {
27  hidden: { opacity: 0, x: -20 },
28  visible: {
29    opacity: 1,
30    x: 0,
31    transition: { duration: 0.4, ease: "easeOut" },
32  },
33};
34 
35const iconVariants: Variants = {
36  hidden: { scale: 0 },
37  visible: {
38    scale: 1,
39    transition: { type: "spring", stiffness: 200, damping: 16, delay: 0.1 },
40  },
41};
42 
43export function AnimatedList() {
44  return (
45    <div className="">
46      <Card
47        role="article"
48        aria-label="Workflow checklist"
49        className="group relative w-full overflow-hidden rounded-2xl border border-border/40 bg-background/60 p-6 backdrop-blur transition-all hover:border-border/60 hover:shadow-lg"
50      >
51        <div className="pointer-events-none absolute inset-0 bg-gradient-to-br from-foreground/[0.04] via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100 -z-10" />
52 
53        <motion.div
54          className="relative space-y-6"
55          variants={containerVariants}
56          initial="hidden"
57          animate="visible"
58        >
59          <div className="space-y-2">
60            <p className="text-xs uppercase tracking-[0.2em] text-foreground/70">
61              Workflow
62            </p>
63            <h3 className="text-lg font-semibold tracking-tight text-foreground">
64              Project Checklist
65            </h3>
66            <p className="text-sm text-foreground/70">
67              Guide your team through each phase with confidence and clarity.
68            </p>
69          </div>
70 
71          <motion.ul
72            role="list"
73            aria-label="Project workflow steps"
74            className="space-y-3"
75            variants={containerVariants}
76          >
77            {checklistItems.map((item) => (
78              <motion.li
79                key={item}
80                variants={listItemVariants}
81// … truncated