From b825c6b3d8aabe5b191d2b25297ac2c158216af8 Mon Sep 17 00:00:00 2001
From: Naiyuan Qing <145280634+NevilleQingNY@users.noreply.github.com>
Date: Wed, 11 Feb 2026 17:47:35 +0800
Subject: [PATCH] feat(ui): improve MulticaIcon animation behavior

- Separate entrance animation from hover animation
- Use state to track entrance completion
- Hover spin only activates after entrance is done
- Shorten entrance animation to 0.6s

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 packages/ui/src/components/multica-icon.tsx | 16 +++++++++++++---
 packages/ui/src/styles/globals.css          | 10 +++++-----
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/packages/ui/src/components/multica-icon.tsx b/packages/ui/src/components/multica-icon.tsx
index c5d87e30..7c376175 100644
--- a/packages/ui/src/components/multica-icon.tsx
+++ b/packages/ui/src/components/multica-icon.tsx
@@ -1,8 +1,9 @@
+import { useState, useEffect } from "react";
 import { cn } from "@multica/ui/lib/utils";
 
 interface MulticaIconProps extends React.ComponentProps<"span"> {
   /**
-   * If true, play a one-time entrance spin animation (2 seconds).
+   * If true, play a one-time entrance spin animation.
    */
   animate?: boolean;
 }
@@ -17,11 +18,20 @@ export function MulticaIcon({
   animate = false,
   ...props
 }: MulticaIconProps) {
+  const [entranceDone, setEntranceDone] = useState(!animate);
+
+  useEffect(() => {
+    if (!animate) return;
+    const timer = setTimeout(() => setEntranceDone(true), 600);
+    return () => clearTimeout(timer);
+  }, [animate]);
+
   return (
     <span
       className={cn(
-        "inline-block size-[1em] hover:animate-spin",
-        animate && "animate-welcome-spin",
+        "inline-block size-[1em]",
+        !entranceDone && "animate-entrance-spin",
+        entranceDone && "hover:animate-spin",
         className
       )}
       aria-hidden="true"
diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css
index 98081a60..87ca6fc2 100644
--- a/packages/ui/src/styles/globals.css
+++ b/packages/ui/src/styles/globals.css
@@ -297,13 +297,13 @@
   50% { box-shadow: 0 0 0 3px oklch(0.6 0.2 250 / 0); }
 }
 
-/* Welcome page: one-time spin animation for icon */
-@keyframes welcome-spin {
+/* Multica icon: entrance spin */
+@keyframes entrance-spin {
   0% { transform: rotate(0deg); opacity: 0; }
-  30% { opacity: 1; }
+  50% { opacity: 1; }
   100% { transform: rotate(360deg); opacity: 1; }
 }
 
-.animate-welcome-spin {
-  animation: welcome-spin 2s ease-out forwards;
+.animate-entrance-spin {
+  animation: entrance-spin 0.6s ease-out forwards;
 }