feat: gesture-reactive drag overlay with tilt based on pointer velocity

src/components/board/BoardView.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect, useCallback } from "react";
 import { Plus } from "lucide-react";
-import { motion } from "framer-motion";
+import { AnimatePresence, motion } from "framer-motion";
 import { staggerContainer } from "@/lib/motion";
 import {
   DndContext,
@@ -387,12 +387,14 @@ export function BoardView() {
       </SortableContext>
 
       {/* Drag overlay - renders a styled copy of the dragged item */}
-      <DragOverlay>
+      <DragOverlay dropAnimation={null}>
+        <AnimatePresence>
           {activeCard ? (
-          <CardOverlay card={activeCard} boardLabels={board.labels} />
+            <CardOverlay key="card-overlay" card={activeCard} boardLabels={board.labels} />
           ) : activeColumn ? (
-          <ColumnOverlay column={activeColumn} />
+            <ColumnOverlay key="column-overlay" column={activeColumn} />
           ) : null}
+        </AnimatePresence>
       </DragOverlay>
     </DndContext>
 

src/components/board/DragOverlayContent.tsx

@@ -1,7 +1,10 @@
+import { useRef } from "react";
+import { motion, useMotionValue, animate } from "framer-motion";
 import type { Card, Column, Label } from "@/types/board";
 import { LabelDots } from "@/components/board/LabelDots";
 import { ChecklistBar } from "@/components/board/ChecklistBar";
 import { format, isPast, isToday } from "date-fns";
+import { springs } from "@/lib/motion";
 
 interface CardOverlayProps {
   card: Card;
@@ -13,8 +16,32 @@ export function CardOverlay({ card, boardLabels }: CardOverlayProps) {
   const dueDate = hasDueDate ? new Date(card.dueDate!) : null;
   const overdue = dueDate != null && isPast(dueDate) && !isToday(dueDate);
 
+  const rotate = useMotionValue(0);
+  const lastX = useRef(0);
+
   return (
-    <div className="w-[260px] rotate-2 scale-[1.03] rounded-lg bg-pylon-surface p-3 opacity-90 shadow-xl">
+    <motion.div
+      className="w-[260px] cursor-grabbing rounded-lg bg-pylon-surface p-3 shadow-xl"
+      style={{ rotate }}
+      initial={{ scale: 1, rotate: 0 }}
+      animate={{ scale: 1.05, boxShadow: "0 20px 40px oklch(0% 0 0 / 20%)" }}
+      exit={{ scale: 1, rotate: 0 }}
+      transition={springs.bouncy}
+      onPointerMove={(e) => {
+        const deltaX = e.clientX - lastX.current;
+        lastX.current = e.clientX;
+        const tilt = Math.max(-5, Math.min(5, deltaX * 0.3));
+        animate(rotate, tilt, { type: "spring", stiffness: 300, damping: 20 });
+      }}
+    >
+      {/* Cover color bar */}
+      {card.coverColor && (
+        <div
+          className="mb-2 -mx-3 -mt-3 h-1 rounded-t-lg"
+          style={{ backgroundColor: `oklch(55% 0.12 ${card.coverColor})` }}
+        />
+      )}
+
       {/* Label dots */}
       {card.labels.length > 0 && (
         <div className="mb-2">
@@ -25,7 +52,7 @@ export function CardOverlay({ card, boardLabels }: CardOverlayProps) {
       {/* Card title */}
       <p className="text-sm font-medium text-pylon-text">{card.title}</p>
 
-      {/* Footer row: due date + checklist */}
+      {/* Footer row */}
       {(hasDueDate || card.checklist.length > 0) && (
         <div className="mt-2 flex items-center gap-3">
           {dueDate && (
@@ -44,7 +71,7 @@ export function CardOverlay({ card, boardLabels }: CardOverlayProps) {
           )}
         </div>
       )}
-    </div>
+    </motion.div>
   );
 }
 
@@ -54,7 +81,13 @@ interface ColumnOverlayProps {
 
 export function ColumnOverlay({ column }: ColumnOverlayProps) {
   return (
-    <div className="w-[280px] rotate-1 scale-[1.02] rounded-lg bg-pylon-column p-3 opacity-90 shadow-xl">
+    <motion.div
+      className="w-[280px] cursor-grabbing rounded-lg bg-pylon-column p-3 shadow-xl"
+      initial={{ scale: 1, rotate: 0 }}
+      animate={{ scale: 1.03, rotate: 1, boxShadow: "0 20px 40px oklch(0% 0 0 / 20%)" }}
+      exit={{ scale: 1, rotate: 0 }}
+      transition={springs.bouncy}
+    >
       <div className="flex items-center gap-2 border-b border-border pb-2">
         <span className="truncate font-mono text-xs font-semibold uppercase tracking-widest text-pylon-text-secondary">
           {column.title}
@@ -65,10 +98,7 @@ export function ColumnOverlay({ column }: ColumnOverlayProps) {
       </div>
       <div className="mt-2 space-y-1">
         {column.cardIds.slice(0, 3).map((_, i) => (
-          <div
-            key={i}
-            className="h-6 rounded bg-pylon-surface/50"
-          />
+          <div key={i} className="h-6 rounded bg-pylon-surface/50" />
         ))}
         {column.cardIds.length > 3 && (
           <p className="text-center font-mono text-xs text-pylon-text-secondary">
@@ -76,6 +106,6 @@ export function ColumnOverlay({ column }: ColumnOverlayProps) {
           </p>
         )}
       </div>
-    </div>
+    </motion.div>
   );
 }