feat: add Framer Motion animations with spring physics and reduced-motion support

src/components/boards/BoardCard.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { formatDistanceToNow } from "date-fns";
+import { motion, useReducedMotion } from "framer-motion";
 import { Trash2, Copy } from "lucide-react";
 import {
   ContextMenu,
@@ -24,10 +25,12 @@ import { deleteBoard, loadBoard, saveBoard } from "@/lib/storage";
 
 interface BoardCardProps {
   board: BoardMeta;
+  index?: number;
 }
 
-export function BoardCard({ board }: BoardCardProps) {
+export function BoardCard({ board, index = 0 }: BoardCardProps) {
   const [confirmDelete, setConfirmDelete] = useState(false);
+  const prefersReducedMotion = useReducedMotion();
 
   const setView = useAppStore((s) => s.setView);
   const addRecentBoard = useAppStore((s) => s.addRecentBoard);
@@ -66,7 +69,11 @@ export function BoardCard({ board }: 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 }}
+    >
       <ContextMenu>
         <ContextMenuTrigger asChild>
           <button
@@ -141,6 +148,6 @@ export function BoardCard({ board }: BoardCardProps) {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-    </>
+    </motion.div>
   );
 }

src/components/boards/BoardList.tsx

@@ -60,8 +60,8 @@ export function BoardList() {
 
         {/* 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) => (
-            <BoardCard key={board.id} board={board} />
+          {boards.map((board, index) => (
+            <BoardCard key={board.id} board={board} index={index} />
           ))}
         </div>
       </div>