Changes

src/components/FerrersRogersRamanujan.tsx

@@ -58,49 +58,31 @@ const FerrersRogersRamanujan = () => {
     setIsAnimating(true);
   };
 
-  // Animation effect
+  // Animation effect - traverse main diagonal only
   useEffect(() => {
     if (!isAnimating || committedPartition.length === 0) return;
 
     const partition = committedPartition;
     
-    // Find the hook at current animation step
+    // Main diagonal: positions (0,0), (1,1), (2,2), ... while box exists
-    let found = false;
+    const row = animationStep;
-    let hookCount = 0;
+    const col = animationStep;
-    let targetRow = 0, targetCol = 0;
     
-    const maxRow = partition.length;
+    // Check if this diagonal position has a box
-    const maxCol = partition[0] || 0;
+    if (row >= partition.length || col >= partition[row]) {
-
+      // Animation complete - no more diagonal boxes
-    for (let d = 0; d < maxRow + maxCol && !found; d++) {
-      for (let r = 0; r <= d; r++) {
-        const c = d - r;
-        if (r < partition.length && c < partition[r]) {
-          if (hookCount === animationStep) {
-            targetRow = r;
-            targetCol = c;
-            found = true;
-            break;
-          }
-          hookCount++;
-        }
-      }
-    }
-
-    if (!found) {
-      // Animation complete
       setIsAnimating(false);
       setAnimatingHook(null);
       return;
     }
 
-    setAnimatingHook({ row: targetRow, col: targetCol });
+    setAnimatingHook({ row, col });
 
-    // Calculate hook size
+    // Calculate hook size: boxes to the right + boxes below + 1 (the box itself)
-    const boxesRight = partition[targetRow] - targetCol - 1;
+    const boxesRight = partition[row] - col - 1;
     let boxesBelow = 0;
-    for (let r = targetRow + 1; r < partition.length; r++) {
+    for (let r = row + 1; r < partition.length; r++) {
-      if (partition[r] > targetCol) {
+      if (partition[r] > col) {
         boxesBelow++;
       } else {
         break;