feat: add column stagger + card stagger + card hover/tap animations

src/components/board/KanbanColumn.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { Plus } from "lucide-react";
 import { motion, useReducedMotion } from "framer-motion";
+import { fadeSlideUp, springs, staggerContainer } from "@/lib/motion";
 import { useDroppable } from "@dnd-kit/core";
 import {
   SortableContext,
@@ -68,9 +69,11 @@ export function KanbanColumn({ column, onCardClick }: KanbanColumnProps) {
       style={style}
       className="group/column flex shrink-0 flex-col rounded-lg bg-pylon-column"
       aria-label={`${column.title} column, ${cardCount} card${cardCount !== 1 ? "s" : ""}`}
-      initial={prefersReducedMotion ? false : { opacity: 0, x: 20 }}
-      animate={{ opacity: 1, x: 0 }}
-      transition={{ type: "spring", stiffness: 300, damping: 25 }}
+      variants={fadeSlideUp}
+      initial={prefersReducedMotion ? false : "hidden"}
+      animate="visible"
+      transition={springs.bouncy}
+      layout
       {...attributes}
     >
       {/* The column header is the drag handle for column reordering */}
@@ -84,7 +87,14 @@ export function KanbanColumn({ column, onCardClick }: KanbanColumnProps) {
         strategy={verticalListSortingStrategy}
       >
         <ScrollArea className="flex-1 overflow-y-auto">
-          <ul ref={setDroppableNodeRef} className="flex min-h-[40px] list-none flex-col" style={{ gap: `calc(0.5rem * var(--density-factor))`, padding: `calc(0.5rem * var(--density-factor))` }}>
+          <motion.ul
+            ref={setDroppableNodeRef}
+            className="flex min-h-[40px] list-none flex-col"
+            style={{ gap: `calc(0.5rem * var(--density-factor))`, padding: `calc(0.5rem * var(--density-factor))` }}
+            variants={staggerContainer(0.03)}
+            initial="hidden"
+            animate="visible"
+          >
             {column.cardIds.map((cardId) => {
               const card = board?.cards[cardId];
               if (!card) return null;
@@ -104,7 +114,7 @@ export function KanbanColumn({ column, onCardClick }: KanbanColumnProps) {
                 Drop or add a card
               </li>
             )}
-          </ul>
+          </motion.ul>
         </ScrollArea>
       </SortableContext>