From 3a3c3bd2e1887d034758ed56a374c89766f3c6b9 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sun, 15 Feb 2026 20:58:03 +0200
Subject: [PATCH] feat: add stagger animations to board list and board cards

---
 src/components/boards/BoardCard.tsx | 13 ++++++++-----
 src/components/boards/BoardList.tsx | 25 +++++++++++++++++++------
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/components/boards/BoardCard.tsx b/src/components/boards/BoardCard.tsx
index e8f2ee4..aec1106 100644
--- a/src/components/boards/BoardCard.tsx
+++ b/src/components/boards/BoardCard.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { formatDistanceToNow } from "date-fns";
 import { motion, useReducedMotion } from "framer-motion";
+import { fadeSlideUp, springs, subtleHover } from "@/lib/motion";
 import { Trash2, Copy } from "lucide-react";
 import {
   ContextMenu,
@@ -26,10 +27,9 @@ import { deleteBoard, loadBoard, saveBoard } from "@/lib/storage";
 
 interface BoardCardProps {
   board: BoardMeta;
-  index?: number;
 }
 
-export function BoardCard({ board, index = 0 }: BoardCardProps) {
+export function BoardCard({ board }: BoardCardProps) {
   const [confirmDelete, setConfirmDelete] = useState(false);
   const prefersReducedMotion = useReducedMotion();
   const addToast = useToastStore((s) => s.addToast);
@@ -74,9 +74,12 @@ export function BoardCard({ board, index = 0 }: BoardCardProps) {
 
   return (
     <motion.div
-      initial={prefersReducedMotion ? false : { opacity: 0, y: 10 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ type: "spring", stiffness: 300, damping: 25, delay: index * 0.05 }}
+      variants={fadeSlideUp}
+      initial={prefersReducedMotion ? false : "hidden"}
+      animate="visible"
+      transition={springs.bouncy}
+      whileHover={subtleHover.hover}
+      whileTap={subtleHover.tap}
     >
       <ContextMenu>
         <ContextMenuTrigger asChild>
diff --git a/src/components/boards/BoardList.tsx b/src/components/boards/BoardList.tsx
index 6d0b5ce..28a7893 100644
--- a/src/components/boards/BoardList.tsx
+++ b/src/components/boards/BoardList.tsx
@@ -1,5 +1,7 @@
 import { useState, useEffect } from "react";
 import { Plus } from "lucide-react";
+import { motion } from "framer-motion";
+import { staggerContainer, scaleIn, springs } from "@/lib/motion";
 import { Button } from "@/components/ui/button";
 import { useAppStore } from "@/stores/app-store";
 import { BoardCard } from "@/components/boards/BoardCard";
@@ -24,7 +26,13 @@ export function BoardList() {
   if (boards.length === 0) {
     return (
       <>
-        <div className="flex h-full flex-col items-center justify-center gap-6">
+        <motion.div
+          className="flex h-full flex-col items-center justify-center gap-6"
+          variants={scaleIn}
+          initial="hidden"
+          animate="visible"
+          transition={springs.gentle}
+        >
           <div className="text-center">
             <h2 className="font-heading text-2xl text-pylon-text">
               Welcome to OpenPylon
@@ -41,7 +49,7 @@ export function BoardList() {
             </Button>
             <ImportExportButtons />
           </div>
-        </div>
+        </motion.div>
         <NewBoardDialog open={dialogOpen} onOpenChange={setDialogOpen} />
       </>
     );
@@ -65,11 +73,16 @@ export function BoardList() {
         </div>
 
         {/* Board grid */}
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-          {boards.map((board, index) => (
-            <BoardCard key={board.id} board={board} index={index} />
+        <motion.div
+          className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+          variants={staggerContainer(0.05)}
+          initial="hidden"
+          animate="visible"
+        >
+          {boards.map((board) => (
+            <BoardCard key={board.id} board={board} />
           ))}
-        </div>
+        </motion.div>
       </div>
 
       <NewBoardDialog open={dialogOpen} onOpenChange={setDialogOpen} />