improve jiggle animation

src/components/animations/JiggleAnimation.tsx

@@ -21,10 +21,18 @@ export function JiggleAnimation({ children, amplitude = 2, duration = 125, enabl
   const rotation = useSharedValue(0);
   const internalEnabled = useSharedValue(typeof enabled === 'boolean' ? enabled : false);
 
-  // slightly randomize duration to avoid sync with other jiggles
-  const instanceDuration = duration * (1 + (Math.random() - 0.5) * 0.2); // 10% variance
-  // randomize initial rotation direction to avoid sync with other jiggles
-  const initialRotation = Math.random() * amplitude;
+  // Randomize some initial values to avoid sync with other jiggles
+  // Randomize duration (5% variance)
+  const instanceDuration = duration * (1 + (Math.random() - 0.5) * 0.1);
+
+  // Randomize initial rotation that's at least 50% of the amplitude
+  const minInitialRotation = amplitude * 0.5;
+  const rotationRange = amplitude - minInitialRotation;
+  const initialRotation = minInitialRotation + Math.random() * rotationRange;
+
+  // Randomize initial direction
+  const initialDirection = Math.random() < 0.5 ? -1 : 1;
+  const firstRotation = initialRotation * initialDirection;
 
   useEffect(() => {
     if (typeof enabled === 'boolean') {
@@ -39,8 +47,8 @@ export function JiggleAnimation({ children, amplitude = 2, duration = 125, enabl
     enabled => {
       if (enabled) {
         rotation.value = withSequence(
-          withTiming(initialRotation, { duration: instanceDuration / 2 }),
-          withRepeat(withTiming(-amplitude, { duration: instanceDuration }), -1, true)
+          withTiming(firstRotation, { duration: instanceDuration / 2 }),
+          withRepeat(withTiming(-amplitude * initialDirection, { duration: instanceDuration }), -1, true)
         );
       } else {
         cancelAnimation(rotation);