icons/ollama-icon.tsx (1)

38-41: Add dependency array to useImperativeHandle for consistency.

The useImperativeHandle hook is missing its dependency array. While this works, other icons in this PR (e.g., lmstudio-icon.tsx, xai-icon.tsx) include [start, stop] as dependencies. Adding it ensures the handle updates if the callbacks change and maintains consistency across the codebase.

Suggested fix

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

icons/midjourney-icon.tsx (1)

26-29: Add dependency array to useImperativeHandle for consistency.

Same as noted for OllamaIcon — add [start, stop] as the dependency array to match the pattern used in LmStudioIcon and XaiIcon.

Suggested fix

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

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

10-10: SVG path uses both fill and stroke with identical color.

The path applies both fill={color} and stroke={color} with the same value, creating a heavier visual weight. Most icon libraries use either fill or stroke, not both, unless intentionally creating an outlined effect.

Suggested refinement

If the intent is a simple filled icon:

           fill={color}
-          stroke={color}
-          strokeWidth=\"1.5\"
           strokeLinecap=\"round\"

Or if the intent is a stroked icon:

-          fill={color}
+          fill=\"none\"
           stroke={color}
           strokeWidth=\"1.5\"

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

10-10: Consider adding accessibility attributes to the SVG.

The icon includes a <title> element, which is good, but for better screen reader support, consider adding role="img" and aria-labelledby (or aria-label) attributes to the motion.svg element. This ensures assistive technologies properly announce the icon.

♿ Suggested accessibility improvements

     return (
       <motion.svg
         ref={scope}
         width={size}
         height={size}
         viewBox="0 0 24 24"
         fill={color}
         className={className}
         xmlns="http://www.w3.org/2000/svg"
+        role="img"
+        aria-label="Google AI Studio"
         onHoverStart={start}
         onHoverEnd={stop}
       >
-        <title>Google AI Studio</title>
+        <title id="aistudio-title">Google AI Studio</title>

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

10-10: Consider adding accessibility attributes to the SVG.

Similar to other icons in this PR, the Ollama icon should include role="img" and proper ARIA attributes for better screen reader support.

icons/anthropic-icon.tsx (1)

40-78: Consider adding accessibility attributes.

For consistency with accessibility best practices, add role="img" and aria-label to the SVG element, similar to the recommendation for other icons in this PR.

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

10-10: Consider adding accessibility attributes.

For consistency with other icons, add role="img" and proper ARIA attributes to the SVG element for better screen reader support.

Configuration used: defaults

Review profile: CHILL

Plan: Pro

lib/icons.ts (1)

694-717: Consider inserting new brand icons in alphabetical order.

The existing icons in the ICONS array follow alphabetical ordering. The new brand icons are appended at the end rather than inserted near the existing brand-google and brand-nextjs entries (around lines 134-141). Consider placing them alphabetically for consistency and easier maintenance.

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

33-54: Consider cleaning up the setTimeout to avoid stale callbacks.

The setTimeout inside start is not cleared if the component unmounts or if start is called again rapidly. For a short hover animation this is unlikely to cause visible issues, but for robustness you could store the timeout ID in a ref and clear it in stop or on unmount.

Optional cleanup pattern

+    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
     const start = useCallback(() => {
+      // Clear any pending merge animation
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+
       // Explode: all 4 parts move outward...
       ...
 
       // Then merge back
-      setTimeout(() => {
+      timeoutRef.current = setTimeout(() => {
         ...
       }, 250);
     }, [animate]);
 
     const stop = useCallback(() => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
       ...
     }, [animate]);

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

55-67: Consider dropping strokeWidth (or add stroke) to avoid a misleading prop.

This icon is fill={color} and doesn’t set stroke, so strokeWidth is likely a no-op. Either remove it from props for this icon, or add stroke={color} and set fill="none" if you intended strokes.

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

1-20: Add deps to useImperativeHandle for consistency with other icons.

This file uses useImperativeHandle(ref, () => ({ ... })) without the deps array; consider adding [start, stop] to match the pattern used elsewhere and avoid stale-handle surprises if callbacks ever change.

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

1-20: Keep embedded TSX content in lockstep with icons/brand-lmstudio-icon.tsx (avoid drift).

Since the registry item embeds the TSX as a string, it’s easy for it to diverge from the real file unless it’s always generated from source. If this is generated, consider adding a CI check that fails on diffs after running npm run registry:build.

public/r/brand-xai-icon.json (2)

7-13: Avoid setTimeout-queued animations that can stack / fire after hover end (or unmount).
start() schedules a merge-back via setTimeout, but stop() doesn’t cancel it—rapid hover in/out can cause delayed “merge” to run after you’ve already reset, and repeated hovers can stack timers. Consider tracking/clearing the timer (and ideally sequencing via Motion’s animation primitives if available).

Proposed change (in icons/brand-xai-icon.tsx)

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

 const BrandXaiIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
   ({ size = 24, color = "currentColor", className = "" }, ref) => {
     const [scope, animate] = useAnimate();
+    const mergeTimeoutRef = useRef<number | null>(null);
+
+    useEffect(() => {
+      return () => {
+        if (mergeTimeoutRef.current != null) window.clearTimeout(mergeTimeoutRef.current);
+      };
+    }, []);

     const start = useCallback(() => {
+      if (mergeTimeoutRef.current != null) window.clearTimeout(mergeTimeoutRef.current);
       // Explode...
       animate(".xai-part-1", { x: -4, y: -2 }, { duration: 0.25, ease: "easeOut" });
       animate(".xai-part-2", { x: -3, y: 3 }, { duration: 0.25, ease: "easeOut" });
       animate(".xai-part-3", { x: 4, y: -3 }, { duration: 0.25, ease: "easeOut" });
       animate(".xai-part-4", { x: 3, y: 2 }, { duration: 0.25, ease: "easeOut" });

       // Then merge back
-      setTimeout(() => {
+      mergeTimeoutRef.current = window.setTimeout(() => {
         animate(".xai-part-1", { x: 0, y: 0 }, { duration: 0.3, ease: "easeInOut" });
         animate(".xai-part-2", { x: 0, y: 0 }, { duration: 0.3, ease: "easeInOut" });
         animate(".xai-part-3", { x: 0, y: 0 }, { duration: 0.3, ease: "easeInOut" });
         animate(".xai-part-4", { x: 0, y: 0 }, { duration: 0.3, ease: "easeInOut" });
       }, 250);
     }, [animate]);

     const stop = useCallback(() => {
+      if (mergeTimeoutRef.current != null) window.clearTimeout(mergeTimeoutRef.current);
       animate(".xai-part-1", { x: 0, y: 0 }, { duration: 0.2 });
       animate(".xai-part-2", { x: 0, y: 0 }, { duration: 0.2 });
       animate(".xai-part-3", { x: 0, y: 0 }, { duration: 0.2 });
       animate(".xai-part-4", { x: 0, y: 0 }, { duration: 0.2 });
     }, [animate]);

---

13-18: icons/types.ts duplication across registry items can drift or overwrite.
Since multiple brand registry items appear to embed the same icons/types.ts, ensure it’s identical everywhere (or better: ship it once via a shared registry dependency and reference it).

public/r/brand-anthropic-icon.json (3)

7-13: Verify SVG rotateX/3D transforms behave consistently (or prefer 2D transforms).
rotateX on an SVG <g> can be spotty depending on how Motion applies transforms to SVG elements; consider switching to a 2D transform (rotate/scale/skew) unless you’ve verified this across your target browsers.

---

7-13: Optional: align Anthropic hover interaction with the “AI” (\ → I) suggestion.
Current hover is a nice pulse, but it doesn’t match the requested “\ becomes I” interaction. If that feedback is still desired, consider implementing it (path swap/morph, or a subtle translate/scale that visually reads as “I”).

---

13-18: Same icons/types.ts registry duplication concern here.
If this is intentional, keep the file content 100% identical across items (or extract into a shared registry dependency).

Configuration used: defaults

Review profile: CHILL

Plan: Pro

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

21-45: Infinite animations stack on rapid hover cycles—store and cancel animation controls.

The start() function schedules repeat: Infinity animations without storing the returned controls. The stop() function only animates properties back to defaults but doesn't cancel the running infinite loops. Rapid hover triggers will stack animations, causing CPU overhead and visual glitches.

🔧 Recommended fix

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

 // ... inside component:
+    const controlsRef = useRef<Array<{ stop?: () => void }> | null>(null);

     const start = useCallback(() => {
+      // Prevent stacking if already running
+      if (controlsRef.current) return;
+      const controls: Array<{ stop?: () => void }> = [];
       lines.forEach((line, i) => {
         const strength = 1 + i * 0.06;
-        animate(
+        const c = animate(
           line,
           { scaleX: [1, strength, 0.9, strength * 0.95, 1] },
           { duration: 1.4, delay: i * 0.08, ease: "easeInOut", repeat: Infinity },
         );
+        controls.push(c);
       });
+      controlsRef.current = controls;
     }, [animate]);

     const stop = useCallback(() => {
+      controlsRef.current?.forEach((c) => c.stop?.());
+      controlsRef.current = null;
       animate(
         lines.join(", "),
         { scaleX: 1 },
         { duration: 0.2, ease: "easeOut" },
       );
     }, [animate]);

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

8-12: Embedded component has the same infinite animation stacking issue.

The embedded BrandOllamaIcon code in this registry file has the same problem as brand-lmstudio-icon.tsx: start() launches repeat: Infinity animations without storing controls, and stop() doesn't cancel running loops. Apply the same fix pattern—store animation controls in a ref and call .stop() on them before resetting.

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

8-12: Embedded component code mirrors the source file issues.

The embedded BrandLmStudioIcon code has the same infinite animation stacking issue flagged in icons/brand-lmstudio-icon.tsx. Once the source file is fixed, regenerate this registry JSON to keep them in sync.

icons/index.ts (1)

1545-1549: Inaccurate keywords for brand-midjourney-icon.

MidJourney is an image generation AI, not a chatbot. The keywords "chatbot" and "conversation" are misleading for this icon.

Suggested fix

   {
     name: "brand-midjourney-icon",
     icon: BrandMidJourneyIcon,
-    keywords: ["midjourney", "ai", "chatbot", "conversation", "brand"],
+    keywords: ["midjourney", "ai", "image", "generation", "art", "brand"],
   },

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

12-19: Hoist lines array outside the component to stabilize references.

The lines array is recreated on every render. Since it's a constant, move it outside the component to avoid unnecessary allocations and to satisfy the ESLint hook dependency warning.

♻️ Proposed fix

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

+const lines = [
+  ".lm-line-1",
+  ".lm-line-2",
+  ".lm-line-3",
+  ".lm-line-4",
+  ".lm-line-5",
+  ".lm-line-6",
+];
+
 const BrandLmStudioIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
   (
     { size = 24, color = "currentColor", strokeWidth = 1, className = "" },
     ref,
   ) => {
     const [scope, animate] = useAnimate();

-    const lines = [
-      ".lm-line-1",
-      ".lm-line-2",
-      ".lm-line-3",
-      ".lm-line-4",
-      ".lm-line-5",
-      ".lm-line-6",
-    ];
-
     const start = useCallback(() => {

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

9-10: Misleading comment in the embedded component code.

The comment says "Simple scale pulse on the slash" but the animation applies rotateX, skewX, and scaleY transforms, which create a 3D perspective effect rather than a pulse. Consider updating the comment to accurately describe the transform effect.

Configuration used: defaults

Review profile: CHILL

Plan: Pro

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}