icons/brand-threads-icon.tsx (1)

49-55: Consider removing unnecessary wrapper functions.

The handleHoverStart and handleHoverEnd functions simply forward calls to start() and stop(). You can pass these directly to the motion.svg props.

♻️ Optional simplification

-    const handleHoverStart = () => {
-      start();
-    };
-
-    const handleHoverEnd = () => {
-      stop();
-    };
-
     return (
       <motion.svg
         ref={scope}
-        onHoverStart={handleHoverStart}
-        onHoverEnd={handleHoverEnd}
+        onHoverStart={start}
+        onHoverEnd={stop}

icons/brand-react-native-icon.tsx (1)

63-73: Stop function doesn't need to be async.

The stop() function is declared async but only awaits one animation. The subsequent animations (lines 70, 72) run after the await completes, which may not be intentional. If you want all animations to reset simultaneously, remove the async/await.

This will be resolved by the fix suggested in the previous comment, which makes stop() synchronous.

icons/brand-cursor-icon.tsx (1)

45-45: Inconsistent className with component rename.

The component was renamed to BrandCursorIcon, but the className still uses cursor-ide-icon. Other brand icons use their brand name in the className (e.g., qwen-icon, notion-icon, gemini-icon). Consider updating for consistency.

Suggested fix

-        className={`cursor-ide-icon cursor-pointer ${className}`}
+        className={`cursor-icon cursor-pointer ${className}`}

icons/brand-paypal-icon.tsx (4)

1-1: Missing useCallback import.

This component should use useCallback for the start and stop functions to match the pattern used in other brand icons and prevent unnecessary re-renders.

Suggested fix

-import { forwardRef, useImperativeHandle } from "react";
+import { forwardRef, useImperativeHandle, useCallback } from "react";

---

12-26: Wrap animation functions in useCallback.

The start and stop functions are recreated on every render. Other brand icons (e.g., BrandQwenIcon, BrandNotionIcon) wrap these in useCallback for consistency and to avoid unnecessary re-renders.

Suggested fix

-    const start = async () => {
+    const start = useCallback(async () => {
       animate(".p-back", { x: 2, y: -2 }, { duration: 0.3, ease: "easeOut" });
       await animate(
         ".p-front",
         { x: -2, y: 2 },
         { duration: 0.3, ease: "easeOut" },
       );
       animate(".p-back", { x: 0, y: 0 }, { duration: 0.3, ease: "easeIn" });
       animate(".p-front", { x: 0, y: 0 }, { duration: 0.3, ease: "easeIn" });
-    };
+    }, [animate]);

-    const stop = () => {
+    const stop = useCallback(() => {
       animate(".p-back", { x: 0, y: 0 }, { duration: 0.2 });
       animate(".p-front", { x: 0, y: 0 }, { duration: 0.2 });
-    };
+    }, [animate]);

---

28-33: Add dependency array to useImperativeHandle.

The useImperativeHandle hook is missing its dependency array, causing the handle object to be recreated on every render. This is inconsistent with other brand icons.

Suggested fix

-    useImperativeHandle(ref, () => {
-      return {
-        startAnimation: start,
-        stopAnimation: stop,
-      };
-    });
+    useImperativeHandle(
+      ref,
+      () => ({
+        startAnimation: start,
+        stopAnimation: stop,
+      }),
+      [start, stop],
+    );

---

35-41: Remove redundant wrapper functions.

handleHoverStart and handleHoverEnd simply call start and stop. Pass them directly to reduce indirection, matching the pattern in other brand icons.

Suggested fix

-    const handleHoverStart = () => {
-      start();
-    };
-
-    const handleHoverEnd = () => {
-      stop();
-    };
-
     return (
       <motion.svg
         ref={scope}
-        onHoverStart={handleHoverStart}
-        onHoverEnd={handleHoverEnd}
+        onHoverStart={start}
+        onHoverEnd={stop}

icons/brand-telegram-icon.tsx (4)

1-1: Missing useCallback import.

Same pattern issue as brand-paypal-icon.tsx. Add useCallback to wrap the animation functions for consistency with other brand icons.

Suggested fix

-import { forwardRef, useImperativeHandle } from "react";
+import { forwardRef, useImperativeHandle, useCallback } from "react";

---

12-22: Wrap animation functions in useCallback.

The start and stop functions should be wrapped in useCallback to prevent recreation on every render.

Suggested fix

-    const start = async () => {
+    const start = useCallback(async () => {
       animate(
         ".plane",
         { x: [0, 10, -10, 0], y: [0, -10, 10, 0], opacity: [1, 0, 0, 1] },
         { duration: 1, times: [0, 0.4, 0.5, 1], ease: "easeInOut" },
       );
-    };
+    }, [animate]);

-    const stop = () => {
+    const stop = useCallback(() => {
       animate(".plane", { x: 0, y: 0, opacity: 1 });
-    };
+    }, [animate]);

---

24-29: Add dependency array to useImperativeHandle.

Missing dependency array causes unnecessary re-creation of the handle object.

Suggested fix

-    useImperativeHandle(ref, () => {
-      return {
-        startAnimation: start,
-        stopAnimation: stop,
-      };
-    });
+    useImperativeHandle(
+      ref,
+      () => ({
+        startAnimation: start,
+        stopAnimation: stop,
+      }),
+      [start, stop],
+    );

---

31-37: Remove redundant wrapper functions.

Pass start and stop directly to hover handlers.

Suggested fix

-    const handleHoverStart = () => {
-      start();
-    };
-
-    const handleHoverEnd = () => {
-      stop();
-    };
-
     return (
       <motion.svg
         ref={scope}
-        onHoverStart={handleHoverStart}
-        onHoverEnd={handleHoverEnd}
+        onHoverStart={start}
+        onHoverEnd={stop}

public/r/brand-aws-icon.json (1)

1-20: Empty stop function creates inconsistent hover behavior.

The embedded BrandAwsIcon component has an empty stop function (const stop = () => {};), which means onHoverEnd and stopAnimation do nothing. This differs from other brand icons (e.g., BrandOpenaiIcon, BrandVercelIcon) that reset animations on stop.

Consider adding reset logic to maintain consistent behavior across all brand icons.

icons/brand-aws-icon.tsx (2)

39-39: Empty stop function - animation cannot be interrupted.

The stop function is a no-op, meaning rapid hover interactions can stack multiple animation sequences. Consider resetting the animated elements to their initial state, similar to BrandOpenaiIcon:

Proposed fix

-    const stop = () => {};
+    const stop = () => {
+      animate(".smile", { pathOffset: 0, opacity: 1, pathLength: 1 }, { duration: 0.2 });
+      animate(".arrowhead", { scale: 1, opacity: 1 }, { duration: 0.2 });
+    };

---

12-37: Consider wrapping start with useCallback for consistency.

BrandVercelIcon wraps its animation functions with useCallback, but BrandAwsIcon does not. For consistency across brand icons and to prevent unnecessary re-creation on re-renders:

Proposed fix

+import { forwardRef, useImperativeHandle, useCallback } from "react";
-import { forwardRef, useImperativeHandle } from "react";
...
-    const start = async () => {
+    const start = useCallback(async () => {
       // animation logic...
-    };
+    }, [animate]);

icons/brand-vercel-icon.tsx (1)

47-47: Minor: Missing select-none class.

Other brand icons include select-none in their className to prevent text selection during interaction. Consider adding it for consistency:

-        className={`cursor-pointer ${className}`}
+        className={`cursor-pointer select-none ${className}`}

icons/brand-openai-icon.tsx (1)

12-30: Optional: Wrap animation functions with useCallback for consistency.

For consistency with BrandVercelIcon, consider wrapping start and stop with useCallback. This is a minor optimization since the functions are recreated on each render.

icons/brand-windows-icon.tsx (2)

131-136: Missing dependency array in useImperativeHandle.

Unlike other icons in this PR (e.g., BrandQwenIcon, BrandGeminiIcon), this component omits the dependency array for useImperativeHandle. This causes the handle object to be recreated on every render. For consistency and to prevent unnecessary re-creations, add a dependency array.

Proposed fix

-    useImperativeHandle(ref, () => {
-      return {
-        startAnimation: start,
-        stopAnimation: stop,
-      };
-    });
+    useImperativeHandle(ref, () => ({
+      startAnimation: start,
+      stopAnimation: stop,
+    }), [start, stop]);

Note: You may also want to wrap start and stop in useCallback to ensure stable references, similar to the pattern used in BrandQwenIcon and BrandGeminiIcon.

---

138-144: Redundant hover handler wrappers.

handleHoverStart and handleHoverEnd simply delegate to start and stop. You can pass start and stop directly to onHoverStart and onHoverEnd.

Proposed simplification

-    const handleHoverStart = () => {
-      start();
-    };
-
-    const handleHoverEnd = () => {
-      stop();
-    };
-
     return (
       <motion.svg
         ref={scope}
-        onHoverStart={handleHoverStart}
-        onHoverEnd={handleHoverEnd}
+        onHoverStart={start}
+        onHoverEnd={stop}
         ...
       >

icons/brand-zoom-icon.tsx (1)

93-98: Missing dependency array in useImperativeHandle.

For consistency with other icons in this PR, add a dependency array to prevent unnecessary handle recreation on every render.

Proposed fix

-    useImperativeHandle(ref, () => {
-      return {
-        startAnimation: start,
-        stopAnimation: stop,
-      };
-    });
+    useImperativeHandle(ref, () => ({
+      startAnimation: start,
+      stopAnimation: stop,
+    }), [start, stop]);

public/r/brand-railway-icon.json (1)

8-11: useCallback is imported but not used; start/stop should be memoized.

The component imports useCallback but doesn't use it. The start and stop async functions are recreated on every render, which defeats the purpose of the [start, stop] dependency array in useImperativeHandle.

Proposed fix

Either remove the unused useCallback import if memoization is not intended:

-import { forwardRef, useImperativeHandle, useCallback } from "react";
+import { forwardRef, useImperativeHandle } from "react";

Or wrap the functions with useCallback for proper memoization (recommended):

-    const start = async () => {
+    const start = useCallback(async () => {
       await animate(
         ".railway-inner",
         { opacity: 0 },
         { duration: 0.6, ease: "linear" },
       );
       await animate(
         ".railway-lower",
         { x: [0, -3, 3, 0] },
         { duration: 0.6, ease: "easeInOut" },
       );
-    };
+    }, [animate]);

-    const stop = async () => {
+    const stop = useCallback(async () => {
       await animate(
         ".railway-inner",
         { opacity: 1 },
         { duration: 0.2, ease: "linear" },
       );
-    };
+    }, [animate]);

icons/brand-react-icon.tsx (1)

77-82: Stabilize imperative handle to avoid churn across renders.
Line 77-Line 82 currently recreates the handle on each render; after memoizing start/stop (see above), pass them as deps to useImperativeHandle.

icons/brand-railway-icon.tsx (1)

1-3: Wrap start/stop in useCallback (fixes hook dependency churn + matches static analysis).
Line 30-Line 37 includes [start, stop], but Line 9 and Line 22 redefine those functions every render, so the deps always change.

Proposed fix

 import { forwardRef, useImperativeHandle, useCallback } from "react";
 import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
 import { motion, useAnimate } from "motion/react";

 const BrandRailwayIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
   ({ size = 24, color = "currentColor", className = "" }, ref) => {
     const [scope, animate] = useAnimate();

-    const start = async () => {
+    const start = useCallback(async () => {
       await animate(
         ".railway-inner",
         { opacity: 0 },
         { duration: 0.6, ease: "linear" },
       );
       await animate(
         ".railway-lower",
         { x: [0, -3, 3, 0] },
         { duration: 0.6, ease: "easeInOut" },
       );
-    };
+    }, [animate]);

-    const stop = async () => {
+    const stop = useCallback(async () => {
       await animate(
         ".railway-inner",
         { opacity: 1 },
         { duration: 0.2, ease: "linear" },
       );
-    };
+    }, [animate]);

Also applies to: 5-37

public/r/brand-react-native-icon.json (1)

14-17: Consider AnimatedIconHandle return types as void | Promise<void> to match async icons.
Line 15 defines startAnimation: () => void / stopAnimation: () => void, but many icons in this PR use async start/stop (e.g., embedded at Line 10). Aligning the type makes it clearer for consumers (and allows await ref.current?.startAnimation() patterns).

public/r/brand-windows-icon.json (1)

1-20: Inconsistent hook patterns compared to BrandCursorIcon.

The embedded BrandWindowsIcon component doesn't wrap start and stop functions in useCallback and lacks a dependency array in useImperativeHandle. In contrast, BrandCursorIcon (in public/r/brand-cursor-icon.json) properly uses useCallback with dependencies and includes [start, stop] in useImperativeHandle.

For consistency and to avoid potential stale closure issues, consider aligning both implementations:

// In BrandWindowsIcon, wrap functions and add deps:
const start = useCallback(async () => { /* ... */ }, [animate, scope]);
const stop = useCallback(() => { /* ... */ }, [animate, scope]);

useImperativeHandle(ref, () => ({
  startAnimation: start,
  stopAnimation: stop,
}), [start, stop]);

Configuration used: defaults

Review profile: CHILL

Plan: Pro

public/r/docker-icon.json (2)

10-10: Add dependency array to useImperativeHandle.

The useImperativeHandle hook is missing its dependency array (third argument). Without it, the imperative handle object is recreated on every render, which is inefficient. Since animate from useAnimate() and animationControls (a ref) have stable references, an empty dependency array is appropriate.

♻️ Suggested fix

In the embedded component code, update the useImperativeHandle call:

-    useImperativeHandle(ref, () => ({
-      startAnimation: start,
-      stopAnimation: stop,
-    }));
+    useImperativeHandle(ref, () => ({
+      startAnimation: start,
+      stopAnimation: stop,
+    }), []);

---

10-10: Remove unnecessary async keyword from start function.

The start function is declared as async but doesn't use await. The animate() calls return animation controls synchronously; the function doesn't need to be async.

♻️ Suggested fix

-    const start = async () => {
+    const start = () => {

icons/mouse-pointer-2-icon.tsx (1)

33-38: Consider tracking the reset animation to avoid potential visual glitch.

The reset animation on line 37 isn't tracked in animationControls. If start() is called immediately after stop() (within 0.3s), both animations will briefly compete for the same x/y properties, potentially causing a minor visual flicker.

♻️ Suggested improvement

 const stop = () => {
   animationControls.current.forEach((control) => control.stop());
   animationControls.current = [];

-  animate(".pointer", { x: 0, y: 0 }, { duration: 0.3 });
+  animationControls.current.push(
+    animate(".pointer", { x: 0, y: 0 }, { duration: 0.3 })
+  );
 };

This ensures the reset animation is cancelled if start() is triggered before it completes.

public/r/ambulance-icon.json (1)

10-10: AI summary inconsistency: .plus animation handle is not stored.

The AI summary states that the plus animation handle is "stored as well," but the actual code only stores the .ambulance animation handle:

animationControls.current.push(
  animate(".ambulance", ...),  // stored
);
animate(".plus", ...);  // NOT stored

This is acceptable since the .plus animation is finite (no repeat: Infinity), but the summary is misleading.

Additionally, the start function is marked async but contains no await expressions—the keyword can be removed.

Optional: Remove unnecessary `async`

In the embedded component code, change:

-    const start = async () => {
+    const start = () => {

icons/spotify-icon.tsx (2)

13-43: Remove unnecessary async keyword.

The start function is marked async but contains no await expressions. The animate calls return synchronously (the animation handle, not a promise that resolves when complete).

♻️ Suggested fix

-    const start = async () => {
+    const start = () => {

---

55-58: Consider adding a dependency array to useImperativeHandle.

Without a dependency array, the handle object is recreated on every render. Since start and stop are stable (they only reference animate and animationControls.current which don't change identity), an empty dependency array would prevent unnecessary handle updates.

♻️ Suggested fix

     useImperativeHandle(ref, () => ({
       startAnimation: start,
       stopAnimation: stop,
-    }));
+    }), []);

Alternatively, wrap start and stop with useCallback if their dependencies change across renders.

public/r/qrcode-icon.json (2)

10-10: Add cleanup for animations on component unmount.

The component tracks infinite animations in animationControls.current but doesn't clean them up when unmounting. While motion/framer-motion typically handles cleanup automatically, it's best practice to explicitly stop tracked animations in a useEffect cleanup function to prevent potential memory leaks or errors if the component unmounts mid-animation.

♻️ Suggested cleanup implementation

Add this cleanup effect after the useImperativeHandle call in the component:

useEffect(() => {
  return () => {
    animationControls.current.forEach((control) => control.stop());
    animationControls.current = [];
  };
}, []);

---

10-10: The animation control refactor looks solid.

The new pattern using animationControls.current to track animation handles is a good improvement for managing multiple animations, especially the infinite qr-scan loop. The implementation correctly:

• Stops existing animations before starting new ones
• Sequences animations with appropriate awaits
• Exposes a clean imperative API via useImperativeHandle
• Integrates well with hover interactions

The stop() function applies a uniform property reset ({ opacity: 1, pathLength: 1, scale: 1, y: 0 }) to all animated elements, even though not all elements use all properties. This is harmless (motion ignores irrelevant properties) and keeps the code simple.

Note: For pedantic precision, you could reset only the properties each element class actually animates, but the current approach prioritizes simplicity.

public/r/brand-vercel-icon.json (1)

10-10: Consider adding animation control tracking for consistency and to handle rapid hover.

Unlike other icons in this PR, BrandVercelIcon doesn't use the animationControls ref pattern. Rapid hover in/out could trigger overlapping animations since start/stop don't cancel in-progress animations.

Additionally, rotateY without a CSS perspective property on the parent may not produce a visible 3D flip effect—the rotation will appear as a horizontal scale rather than a flip.

🔧 Suggested improvement for consistency

-import { forwardRef, useImperativeHandle } from "react";
+import { forwardRef, useImperativeHandle, useRef } from "react";
 import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
 import { motion, useAnimate } from "motion/react";

 const BrandVercelIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
   (
     { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
     ref,
   ) => {
     const [scope, animate] = useAnimate();
+    const animationControls = useRef<Array<ReturnType<typeof animate>>>([]);

     const start = async () => {
+      animationControls.current.forEach((control) => control.stop());
+      animationControls.current = [];
+
       await animate(
         ".triangle",
         { rotateY: 180 },
         { duration: 0.6, ease: "easeInOut" },
       );
     };

     const stop = async () => {
+      animationControls.current.forEach((control) => control.stop());
+      animationControls.current = [];
+
       await animate(
         ".triangle",
         { rotateY: -180 },
-        { duration: 0.6, ease: "easeInOut" },
+        { duration: 0.6, ease: "easeInOut" },
       );
     };

icons/vinyl-icon.tsx (1)

99-109: Minor: Consider adding transformOrigin for the center-dot element.

The vinyl-disc path has explicit transformOrigin: "50% 50%", but the center-dot path lacks it. While scale animations typically default to center, adding explicit transformOrigin would ensure consistent behavior across browsers.

Suggested addition

         {/* Center dot */}
         <motion.path
           className="center-dot"
           d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"
+          style={{ transformOrigin: "12px 12px" }}
         />

icons/brand-threads-icon.tsx (1)

49-55: Consider removing the wrapper functions.

The handleHoverStart and handleHoverEnd functions simply delegate to start and stop without any additional logic. You can pass start and stop directly to the hover props.

♻️ Suggested simplification

-    const handleHoverStart = () => {
-      start();
-    };
-
-    const handleHoverEnd = () => {
-      stop();
-    };
-
     return (
       <motion.svg
         ref={scope}
-        onHoverStart={handleHoverStart}
-        onHoverEnd={handleHoverEnd}
+        onHoverStart={start}
+        onHoverEnd={stop}
         xmlns="http://www.w3.org/2000/svg"

lib/icons.ts (1)

139-181: Inconsistent naming convention in icon entries.

The new brand icon entries use hyphenated names (e.g., "brand-nextjs-icon"), while existing entries use space-separated names (e.g., "brand google icon" on line 135). Consider using a consistent format across all entries for maintainability.

If the name field is intended for display, consider using spaces consistently:

-    name: "brand-nextjs-icon",
+    name: "brand nextjs icon",

Or if hyphens are preferred, update the existing entries to match.

icons/brand-react-icon.tsx (1)

12-49: Consider tracking parallel animations for proper cleanup.

The start() function launches multiple animations without awaiting them (lines 19-21, 24-48), creating a fire-and-forget pattern for parallel execution. While this achieves the desired simultaneous animation effect, these animations are not tracked and cannot be stopped if stop() is called before they complete.

Additionally, start() is async but AnimatedIconHandle declares startAnimation: () => void, creating a type mismatch.

♻️ Proposed refactor

Track animation controls similar to the washing-machine-icon pattern:

+const animationControls = useRef<Array<ReturnType<typeof animate>>>([]);
+
 const start = async () => {
+  // Stop any existing animations
+  animationControls.current.forEach((control) => control.stop());
+  animationControls.current = [];
+
   await animate(
     ".center-dot",
     { scale: [1, 1.4, 1.2] },
     { duration: 0.4, ease: [0.34, 1.56, 0.64, 1] },
   );

-  animate(".orbit-1", { rotate: 360 }, { duration: 1, ease: "linear" });
-  animate(".orbit-2", { rotate: -360 }, { duration: 2, ease: "linear" });
-  animate(".orbit-3", { rotate: 360 }, { duration: 4, ease: "linear" });
+  animationControls.current.push(
+    animate(".orbit-1", { rotate: 360 }, { duration: 1, ease: "linear" }),
+  );
+  animationControls.current.push(
+    animate(".orbit-2", { rotate: -360 }, { duration: 2, ease: "linear" }),
+  );
+  animationControls.current.push(
+    animate(".orbit-3", { rotate: 360 }, { duration: 4, ease: "linear" }),
+  );

   // Track remaining animations similarly...
 };

 const stop = async () => {
+  animationControls.current.forEach((control) => control.stop());
+  animationControls.current = [];
+
   // Then proceed with reset animations...
 };

Also consider updating AnimatedIconHandle to reflect async signatures:

export interface AnimatedIconHandle {
  startAnimation: () => void | Promise<void>;
  stopAnimation: () => void | Promise<void>;
}

icons/alarm-clock-plus-icon.tsx (1)

52-58: Consider awaiting or tracking reset animations for cleaner state management.

The reset animations on lines 56-57 are not tracked or awaited. If stop() is called followed immediately by start(), these reset animations might still be running when new animations begin, potentially causing brief conflicts.

🛡️ Optional defensive improvement

 const stop = () => {
   animationControls.current.forEach((control) => control.stop());
   animationControls.current = [];

-  animate(".clock", { y: 0, x: 0 }, { duration: 0.2 });
-  animate(".bells", { y: 0, x: 0 }, { duration: 0.2 });
+  animate(".clock", { y: 0, x: 0 }, { duration: 0 });
+  animate(".bells", { y: 0, x: 0 }, { duration: 0 });
 };

Setting duration: 0 ensures instant reset, eliminating potential overlap with subsequent start() calls.

icons/docker-icon.tsx (2)

13-36: start is async but never awaits; also the .dot animation isn’t tracked/stoppable.
Make it sync unless you intentionally need a Promise, and consider tracking .dot too to avoid overlapping “pulse” animations on rapid re-hover.

Suggested diff

- const start = async () => {
-   animationControls.current.forEach((control) => control.stop());
-   animationControls.current = [];
+ const start = () => {
+   animationControls.current.forEach((control) => control.stop());
+   animationControls.current = [];

    animationControls.current.push(
      animate(
        ".whale",
        { x: [0, 2, 0] },
        { duration: 1.2, ease: "easeInOut", repeat: Infinity },
      ),
    );

    animationControls.current.push(
      animate(
        ".containers",
        { y: [0, -1, 0] },
        { duration: 0.8, ease: "easeInOut", repeat: Infinity },
      ),
    );

-   animate(
+   animationControls.current.push(
+     animate(
        ".dot",
        { scale: [1, 1.3, 1] },
        { duration: 0.5, ease: "easeInOut" },
-   );
+     ),
+   );
  };

---

38-45: Consider unmount cleanup to prevent “orphaned” infinite animations.
If the icon unmounts while hovered (route change, conditional render), the repeating animations may keep running unless you stop them in an effect cleanup.

Suggested diff (adds cleanup)

-import { forwardRef, useImperativeHandle, useRef } from "react";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";

  const stop = () => {
    animationControls.current.forEach((control) => control.stop());
    animationControls.current = [];

    animate(".whale", { x: 0 }, { duration: 0.3 });
    animate(".containers", { y: 0 }, { duration: 0.3 });
    animate(".dot", { scale: 1 }, { duration: 0.3 });
  };

+ useEffect(() => () => stop(), []);

icons/ambulance-icon.tsx (1)

11-16: Use AnimationPlaybackControls from "motion/react" instead of ReturnType<typeof animate> for better type clarity and safety.

The animate function in motion v12.23.26 returns AnimationPlaybackControls (or AnimationPlaybackControlsWithThen), which is exported from "motion/react". Using the concrete type directly—rather than inferring it via ReturnType—avoids potential type widening from overloads and makes the intent clearer:

import type { AnimationPlaybackControls } from "motion/react";

const animationControls = useRef<AnimationPlaybackControls[]>([]);

public/r/alarm-clock-plus-icon.json (2)

9-10: “only when NOT controlled” comment doesn’t match behavior—add an explicit guard/prop.
onHoverStart/onHoverEnd always fire; if a parent is also driving startAnimation/stopAnimation, the two can fight. Consider a prop like hoverEnabled?: boolean (default true) and gate the handlers.

---

9-10: Add unmount cleanup for infinite animations (bells/clock repeat forever).
If the component unmounts while repeating, stopping controls in an effect cleanup avoids orphaned animations.

Configuration used: defaults

Review profile: CHILL

Plan: Pro