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

src/components/board/CardThumbnail.tsx

@@ -1,4 +1,5 @@
 import { format, isPast, isToday } from "date-fns";
+import { motion, useReducedMotion } from "framer-motion";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import type { Card, Label } from "@/types/board";
@@ -13,6 +14,8 @@ interface CardThumbnailProps {
 }
 
 export function CardThumbnail({ card, boardLabels, columnId, onCardClick }: CardThumbnailProps) {
+  const prefersReducedMotion = useReducedMotion();
+
   const {
     attributes,
     listeners,
@@ -40,11 +43,14 @@ export function CardThumbnail({ card, boardLabels, columnId, onCardClick }: Card
   }
 
   return (
-    <button
+    <motion.button
       ref={setNodeRef}
       style={style}
       onClick={handleClick}
       className="w-full rounded-lg bg-pylon-surface p-3 shadow-sm text-left transition-all duration-200 hover:-translate-y-px hover:shadow-md"
+      initial={prefersReducedMotion ? false : { opacity: 0, y: -8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ type: "spring", stiffness: 300, damping: 25 }}
       {...attributes}
       {...listeners}
     >
@@ -77,6 +83,6 @@ export function CardThumbnail({ card, boardLabels, columnId, onCardClick }: Card
           )}
         </div>
       )}
-    </button>
+    </motion.button>
   );
 }

src/components/board/KanbanColumn.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { Plus } from "lucide-react";
+import { motion, useReducedMotion } from "framer-motion";
 import { useDroppable } from "@dnd-kit/core";
 import {
   SortableContext,
@@ -29,6 +30,7 @@ interface KanbanColumnProps {
 export function KanbanColumn({ column, onCardClick }: KanbanColumnProps) {
   const [showAddCard, setShowAddCard] = useState(false);
   const board = useBoardStore((s) => s.board);
+  const prefersReducedMotion = useReducedMotion();
 
   const width = WIDTH_MAP[column.width];
 
@@ -59,10 +61,13 @@ export function KanbanColumn({ column, onCardClick }: KanbanColumnProps) {
   };
 
   return (
-    <div
+    <motion.div
       ref={setSortableNodeRef}
       style={style}
       className="group/column flex shrink-0 flex-col rounded-lg bg-pylon-column"
+      initial={prefersReducedMotion ? false : { opacity: 0, x: 20 }}
+      animate={{ opacity: 1, x: 0 }}
+      transition={{ type: "spring", stiffness: 300, damping: 25 }}
       {...attributes}
     >
       {/* The column header is the drag handle for column reordering */}
@@ -113,6 +118,6 @@ export function KanbanColumn({ column, onCardClick }: KanbanColumnProps) {
           </Button>
         </div>
       )}
-    </div>
+    </motion.div>
   );
 }

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>

src/components/card-detail/ChecklistSection.tsx

@@ -134,10 +134,10 @@ function ChecklistRow({ item, onToggle, onUpdate, onDelete }: ChecklistRowProps)
             setDraft(item.text);
             setEditing(true);
           }}
-          className={`flex-1 cursor-pointer text-sm ${
+          className={`flex-1 cursor-pointer text-sm transition-all duration-200 ${
             item.checked
-              ? "line-through text-pylon-text-secondary"
-              : "text-pylon-text"
+              ? "line-through text-pylon-text-secondary opacity-60"
+              : "text-pylon-text opacity-100"
           }`}
         >
           {item.text}