From ad1ad690f014257b5a3c3f599e794205a11d286f Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Tue, 21 Oct 2025 10:30:58 -0500
Subject: [PATCH] feat(flashcards): enable unbounded drag and position
 persistence
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Made interactive flashcards a fun easter egg by:
- Changed overflow from 'hidden' to 'visible' to allow cards to be
  thrown anywhere on the page, not just within container bounds
- Fixed position persistence: cards now stay exactly where dropped
  instead of snapping back to pickup location
- Updated currentPositionRef immediately on drop before applying
  momentum physics

Cards can now be dragged and tossed freely around the entire page
and will maintain their position after being dropped.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/src/components/InteractiveFlashcards.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/InteractiveFlashcards.tsx b/apps/web/src/components/InteractiveFlashcards.tsx
index 1a357f25..6b79db7c 100644
--- a/apps/web/src/components/InteractiveFlashcards.tsx
+++ b/apps/web/src/components/InteractiveFlashcards.tsx
@@ -77,7 +77,7 @@ export function InteractiveFlashcards() {
         maxW: '1200px',
         mx: 'auto',
         height: { base: '400px', md: '500px' },
-        overflow: 'hidden',
+        overflow: 'visible',
         bg: 'rgba(0, 0, 0, 0.3)',
         rounded: 'xl',
         border: '1px solid rgba(255, 255, 255, 0.1)',
@@ -196,6 +196,10 @@ function DraggableCard({ card }: DraggableCardProps) {
         // On release, reset transform origin to center
         setTransformOrigin('center center')
 
+        // Update current position to where the card was dropped
+        currentPositionRef.current.x = currentPositionRef.current.x + mx
+        currentPositionRef.current.y = currentPositionRef.current.y + my
+
         // On release, apply momentum with decay physics
         const throwVelocityX = lastVelocityRef.current.vx * 1000
         const throwVelocityY = lastVelocityRef.current.vy * 1000
@@ -205,12 +209,12 @@ function DraggableCard({ card }: DraggableCardProps) {
 
         api.start({
           x: {
-            from: currentPositionRef.current.x + mx,
+            from: currentPositionRef.current.x,
             velocity: throwVelocityX,
             decay: true,
           },
           y: {
-            from: currentPositionRef.current.y + my,
+            from: currentPositionRef.current.y,
             velocity: throwVelocityY,
             decay: true,
           },
@@ -218,7 +222,7 @@ function DraggableCard({ card }: DraggableCardProps) {
           rotation: throwAngle + 90, // Card aligns with throw direction
           config: config.wobbly,
           onChange: (result) => {
-            // Update current position as card settles
+            // Continue updating position as card settles with momentum
             if (result.value.x !== undefined) {
               currentPositionRef.current.x = result.value.x
             }