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 */