Implement internal color animations for avatar avatars

- Replace whole-avatar animations with internal color layer animations
- Each work style now affects how colors move, scale, and blend inside the avatar circle
- Philosophy determines colors, work style determines internal animation patterns
- Iterative: Circular color cycling with rotation and scaling
- Detail-oriented: Subtle pulsing and fine position adjustments
- Big-picture: Slow, sweeping color movements
- Collaborative: Gentle, flowing color transitions
- Experimental: Chaotic, unpredictable color movements
- Systematic: Precise, rhythmic color adjustments
- Background color remains static, two color layers animate independently
- Animations use proper TypeScript typing with 'as const' for ease values
- Transform origin set to center for proper rotation scaling

Author: mmaxence

src/components/Avatar.tsx

@@ -24,69 +24,172 @@ const PHILOSOPHY_COLORS = {
   'grit': ["#FF9A9E", "#FECFEF", "#FECFEF"],
 };
 
-// Work style-based animation variants
+// Work style-based internal color animation variants
 const WORK_STYLE_ANIMATIONS = {
   'iterative': {
-    animate: {
-      rotate: [0, 360],
-      scale: [1, 1.1, 1],
+    // Colors cycle through positions in a circular motion
+    color1: {
+      animate: {
+        translateX: [0, 8, -8, 0],
+        translateY: [0, -8, 8, 0],
+        rotate: [0, 90, 180, 270, 360],
+        scale: [1, 1.1, 0.9, 1],
+      },
+      transition: {
+        duration: 4,
+        repeat: Infinity,
+        ease: "linear" as const
+      }
     },
-    transition: {
-      duration: 4,
-      repeat: Infinity,
-      ease: "linear"
+    color2: {
+      animate: {
+        translateX: [0, -6, 6, 0],
+        translateY: [0, 6, -6, 0],
+        rotate: [0, -90, -180, -270, -360],
+        scale: [1, 0.9, 1.1, 1],
+      },
+      transition: {
+        duration: 4,
+        repeat: Infinity,
+        ease: "linear" as const
+      }
     }
   },
   'detail-oriented': {
-    animate: {
-      scale: [1, 1.05, 1],
+    // Subtle pulsing and fine adjustments
+    color1: {
+      animate: {
+        scale: [1, 1.05, 1],
+        translateX: [0, 2, -2, 0],
+        translateY: [0, 1, -1, 0],
+      },
+      transition: {
+        duration: 2,
+        repeat: Infinity,
+        ease: "easeInOut" as const
+      }
     },
-    transition: {
-      duration: 2,
-      repeat: Infinity,
-      ease: "easeInOut"
+    color2: {
+      animate: {
+        scale: [1, 0.98, 1],
+        translateX: [0, -1, 1, 0],
+        translateY: [0, -2, 2, 0],
+      },
+      transition: {
+        duration: 2.2,
+        repeat: Infinity,
+        ease: "easeInOut" as const
+      }
     }
   },
   'big-picture': {
-    animate: {
-      rotate: [0, 180, 360],
+    // Slow, sweeping movements
+    color1: {
+      animate: {
+        rotate: [0, 180, 360],
+        scale: [1, 1.2, 1],
+        translateX: [0, 10, -10, 0],
+      },
+      transition: {
+        duration: 6,
+        repeat: Infinity,
+        ease: "easeInOut" as const
+      }
     },
-    transition: {
-      duration: 6,
-      repeat: Infinity,
-      ease: "easeInOut"
+    color2: {
+      animate: {
+        rotate: [0, -180, -360],
+        scale: [1, 0.8, 1],
+        translateY: [0, -10, 10, 0],
+      },
+      transition: {
+        duration: 6,
+        repeat: Infinity,
+        ease: "easeInOut" as const
+      }
     }
   },
   'collaborative': {
-    animate: {
-      x: [0, 5, -5, 0],
-      y: [0, -5, 5, 0],
+    // Gentle, flowing movements
+    color1: {
+      animate: {
+        x: [0, 6, -6, 0],
+        y: [0, -4, 4, 0],
+        scale: [1, 1.1, 0.9, 1],
+      },
+      transition: {
+        duration: 3,
+        repeat: Infinity,
+        ease: "easeInOut" as const
+      }
     },
-    transition: {
-      duration: 3,
-      repeat: Infinity,
-      ease: "easeInOut"
+    color2: {
+      animate: {
+        x: [0, -4, 4, 0],
+        y: [0, 6, -6, 0],
+        scale: [1, 0.9, 1.1, 1],
+      },
+      transition: {
+        duration: 3.5,
+        repeat: Infinity,
+        ease: "easeInOut" as const
+      }
     }
   },
   'experimental': {
-    animate: {
-      scale: [1, 1.2, 0.8, 1],
-      rotate: [0, 90, 180, 270, 360],
+    // Chaotic, unpredictable movements
+    color1: {
+      animate: {
+        scale: [1, 1.3, 0.7, 1],
+        rotate: [0, 120, 240, 360],
+        translateX: [0, 12, -8, 4, 0],
+        translateY: [0, -8, 12, -4, 0],
+      },
+      transition: {
+        duration: 5,
+        repeat: Infinity,
+        ease: "easeInOut" as const
+      }
     },
-    transition: {
-      duration: 5,
-      repeat: Infinity,
-      ease: "easeInOut"
+    color2: {
+      animate: {
+        scale: [1, 0.8, 1.4, 1],
+        rotate: [0, -150, -300, -450],
+        translateX: [0, -10, 6, -12, 0],
+        translateY: [0, 10, -6, 8, 0],
+      },
+      transition: {
+        duration: 5.5,
+        repeat: Infinity,
+        ease: "easeInOut" as const
+      }
     }
   },
   'systematic': {
-    animate: {
-      scale: [1, 1.02, 1],
+    // Precise, rhythmic movements
+    color1: {
+      animate: {
+        scale: [1, 1.02, 1],
+        translateX: [0, 3, 0],
+        translateY: [0, 2, 0],
+      },
+      transition: {
+        duration: 1.5,
+        repeat: Infinity,
+        ease: "linear" as const
+      }
     },
-    transition: {
-      duration: 1.5,
-      repeat: Infinity,
-      ease: "linear"
+    color2: {
+      animate: {
+        scale: [1, 0.98, 1],
+        translateX: [0, -2, 0],
+        translateY: [0, -3, 0],
+      },
+      transition: {
+        duration: 1.5,
+        repeat: Infinity,
+        ease: "linear" as const
+      }
     }
   },
 };
@@ -119,15 +222,12 @@ function AvatarFallback({
   const filterId = React.useId();
 
   // Get animation props based on working style
-  const animationProps = workingStyle && WORK_STYLE_ANIMATIONS[workingStyle as keyof typeof WORK_STYLE_ANIMATIONS]
+  const animationConfig = workingStyle && WORK_STYLE_ANIMATIONS[workingStyle as keyof typeof WORK_STYLE_ANIMATIONS]
     ? WORK_STYLE_ANIMATIONS[workingStyle as keyof typeof WORK_STYLE_ANIMATIONS]
-    : {};
+    : null;
 
   return (
-    <motion.div 
-      className={`inline-block ${className}`}
-      {...animationProps}
-    >
+    <div className={`inline-block ${className}`}>
       <svg
         viewBox={`0 0 ${size} ${size}`}
         fill="none"
@@ -148,30 +248,47 @@ function AvatarFallback({
           <rect width={size} height={size} rx={size * 2} fill="#FFFFFF" />
         </mask>
         <g mask={`url(#${maskId})`}>
+          {/* Background color - static */}
           <rect width={size} height={size} fill={properties[0].color} />
-          <path
-            filter={`url(#${filterId})`}
-            d="M32.414 59.35L50.376 70.5H72.5v-71H33.728L26.5 13.381l19.057 27.08L32.414 59.35z"
-            fill={properties[1].color}
-            transform={`
-              translate(${properties[1].translateX} ${properties[1].translateY})
-              rotate(${properties[1].rotate} ${size / 2} ${size / 2})
-              scale(${properties[1].scale})
-            `}
-          />
-          <path
-            filter={`url(#${filterId})`}
+          
+          {/* First animated color layer */}
+          <motion.g
+            {...(animationConfig?.color1 || {})}
             style={{
+              transformOrigin: `${size / 2}px ${size / 2}px`,
+            }}
+          >
+            <path
+              filter={`url(#${filterId})`}
+              d="M32.414 59.35L50.376 70.5H72.5v-71H33.728L26.5 13.381l19.057 27.08L32.414 59.35z"
+              fill={properties[1].color}
+              transform={`
+                translate(${properties[1].translateX} ${properties[1].translateY})
+                rotate(${properties[1].rotate} ${size / 2} ${size / 2})
+                scale(${properties[1].scale})
+              `}
+            />
+          </motion.g>
+          
+          {/* Second animated color layer */}
+          <motion.g
+            {...(animationConfig?.color2 || {})}
+            style={{
+              transformOrigin: `${size / 2}px ${size / 2}px`,
               mixBlendMode: "overlay",
             }}
-            d="M22.216 24L0 46.75l14.108 38.129L78 86l-3.081-59.276-22.378 4.005 12.972 20.186-23.35 27.395L22.215 24z"
-            fill={properties[2].color}
-            transform={`
-              translate(${properties[2].translateX} ${properties[2].translateY})
-              rotate(${properties[2].rotate} ${size / 2} ${size / 2})
-              scale(${properties[2].scale})
-            `}
-          />
+          >
+            <path
+              filter={`url(#${filterId})`}
+              d="M22.216 24L0 46.75l14.108 38.129L78 86l-3.081-59.276-22.378 4.005 12.972 20.186-23.35 27.395L22.215 24z"
+              fill={properties[2].color}
+              transform={`
+                translate(${properties[2].translateX} ${properties[2].translateY})
+                rotate(${properties[2].rotate} ${size / 2} ${size / 2})
+                scale(${properties[2].scale})
+              `}
+            />
+          </motion.g>
         </g>
         <defs>
           <filter
@@ -185,7 +302,7 @@ function AvatarFallback({
           </filter>
         </defs>
       </svg>
-    </motion.div>
+    </div>
   );
 }