From dc9fbc395e39344354cdb586b4fb0653fa11009b Mon Sep 17 00:00:00 2001
From: Danny Ricciotti <dan.ricciotti@gmail.com>
Date: Thu, 11 Dec 2025 16:20:39 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20glitchy=20kangaroo=20bounc?=
 =?UTF-8?q?e=20animation=20on=20welcome=20screen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The kangaroo logo on the welcome screen had a visual glitch where it would instantly jump to the top position when hovering, instead of smoothly starting the bounce from its resting position.

Changes:
- Added custom smooth-bounce keyframe animation in index.css that explicitly starts from translateY(0)
- Updated RooHero component to use hover state tracking with the new animation
- Removed Tailwind's animate-bounce class which was causing the glitch

The animation now smoothly bounces from the resting position without any jarring visual jumps.
---
 webview-ui/src/components/welcome/RooHero.tsx |  9 ++++++--
 webview-ui/src/index.css                      | 23 +++++++++++++++++++
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/webview-ui/src/components/welcome/RooHero.tsx b/webview-ui/src/components/welcome/RooHero.tsx
index 4a8fd179584..5e6ef9899a0 100644
--- a/webview-ui/src/components/welcome/RooHero.tsx
+++ b/webview-ui/src/components/welcome/RooHero.tsx
@@ -5,9 +5,13 @@ const RooHero = () => {
 		const w = window as any
 		return w.IMAGES_BASE_URI || ""
 	})
+	const [isHovered, setIsHovered] = useState(false)
 
 	return (
-		<div className="mb-4 relative forced-color-adjust-none group flex flex-col items-center w-30 pt-4 overflow-clip">
+		<div
+			className="mb-4 relative forced-color-adjust-none group flex flex-col items-center w-30 pt-4 overflow-clip"
+			onMouseEnter={() => setIsHovered(true)}
+			onMouseLeave={() => setIsHovered(false)}>
 			<div
 				style={{
 					backgroundColor: "var(--vscode-foreground)",
@@ -17,8 +21,9 @@ const RooHero = () => {
 					maskImage: `url('${imagesBaseUri}/roo-logo.svg')`,
 					maskRepeat: "no-repeat",
 					maskSize: "contain",
+					animation: isHovered ? "smooth-bounce 1s ease-in-out infinite" : "none",
 				}}
-				className="z-5 mr-auto group-hover:animate-bounce translate-y-0 transition-transform duration-500">
+					className="z-5 mr-auto translate-y-0 transition-transform duration-500">
 				<img src={imagesBaseUri + "/roo-logo.svg"} alt="Roo logo" className="h-8 opacity-0" />
 			</div>
 			<div
diff --git a/webview-ui/src/index.css b/webview-ui/src/index.css
index 7521c473ea1..b696261f91f 100644
--- a/webview-ui/src/index.css
+++ b/webview-ui/src/index.css
@@ -205,6 +205,29 @@
 	.history-item-highlight {
 		@apply underline;
 	}
+
+	/* Custom smooth bounce animation for Roo hero */
+	@keyframes smooth-bounce {
+		0% {
+			transform: translateY(0);
+		}
+		25% {
+			transform: translateY(-25%);
+		}
+		50% {
+			transform: translateY(0);
+		}
+		75% {
+			transform: translateY(-12.5%);
+		}
+		100% {
+			transform: translateY(0);
+		}
+	}
+
+	.animate-smooth-bounce {
+		animation: smooth-bounce 1s ease-in-out infinite;
+	}
 }
 
 /* Form Element Focus States */