From 782e9f66b9a02500da3d382726c3d98cd5b48267 Mon Sep 17 00:00:00 2001
From: Adithya Krishna <aadithya794@gmail.com>
Date: Sun, 8 Mar 2026 15:02:27 +0530
Subject: [PATCH 1/3] feat: smoother animation for icons

---
 .../app/(landing)/components/hero/hero.tsx    | 78 ++++++++++++++++---
 1 file changed, 68 insertions(+), 10 deletions(-)

diff --git a/apps/sim/app/(landing)/components/hero/hero.tsx b/apps/sim/app/(landing)/components/hero/hero.tsx
index 546dc47627f..21c3feba22b 100644
--- a/apps/sim/app/(landing)/components/hero/hero.tsx
+++ b/apps/sim/app/(landing)/components/hero/hero.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import React from 'react'
+import { motion } from 'framer-motion'
 import { ArrowUp, CodeIcon } from 'lucide-react'
 import { useRouter } from 'next/navigation'
 import { type Edge, type Node, Position } from 'reactflow'
@@ -152,6 +153,16 @@ export default function Hero() {
   const [lastHoveredIndex, setLastHoveredIndex] = React.useState<number | null>(null)
   const intervalRef = React.useRef<NodeJS.Timeout | null>(null)
 
+  const iconRowRef = React.useRef<HTMLDivElement | null>(null)
+  const buttonRefs = React.useRef<(HTMLDivElement | null)[]>([])
+  const [pillLayout, setPillLayout] = React.useState<{
+    left: number
+    top: number
+    width: number
+    height: number
+  } | null>(null)
+  const [layoutVersion, setLayoutVersion] = React.useState(0)
+
   /**
    * Handle service icon click to populate textarea with template
    */
@@ -246,6 +257,29 @@ export default function Hero() {
     }
   }
 
+  const activeIconIndex =
+    isUserHovering && lastHoveredIndex !== null ? lastHoveredIndex : autoHoverIndex
+
+  React.useLayoutEffect(() => {
+    const container = iconRowRef.current
+    const target = buttonRefs.current[activeIconIndex]
+    if (!container || !target) return
+    const cr = container.getBoundingClientRect()
+    const tr = target.getBoundingClientRect()
+    setPillLayout({
+      left: tr.left - cr.left,
+      top: tr.top - cr.top,
+      width: tr.width,
+      height: tr.height,
+    })
+  }, [activeIconIndex, layoutVersion, visibleIconCount])
+
+  React.useEffect(() => {
+    const onResize = () => setLayoutVersion((v) => v + 1)
+    window.addEventListener('resize', onResize)
+    return () => window.removeEventListener('resize', onResize)
+  }, [])
+
   /**
    * Handle form submission
    */
@@ -377,24 +411,48 @@ export default function Hero() {
         Build and deploy AI agent workflows
       </p>
       <div
-        className='flex items-center justify-center gap-[2px] pt-[18px] sm:pt-[32px]'
+        ref={iconRowRef}
+        className='relative flex items-center justify-center gap-[2px] pt-[18px] sm:pt-[32px]'
         onMouseEnter={handleIconContainerMouseEnter}
         onMouseLeave={handleIconContainerMouseLeave}
       >
-        {/* Service integration buttons */}
+        {pillLayout !== null && (
+          <motion.div
+            className='pointer-events-none absolute rounded-xl border border-[#E5E5E5] shadow-[0_2px_4px_0_rgba(0,0,0,0.08)]'
+            initial={false}
+            animate={{
+              left: pillLayout.left,
+              top: pillLayout.top,
+              width: pillLayout.width,
+              height: pillLayout.height,
+            }}
+            transition={{
+              type: 'spring',
+              stiffness: 325,
+              damping: 33,
+              mass: 1.12,
+            }}
+          />
+        )}
         {serviceIcons.slice(0, visibleIconCount).map((service, index) => {
           const Icon = service.icon
           return (
-            <IconButton
+            <div
               key={service.key}
-              aria-label={service.label}
-              onClick={() => handleServiceClick(service.key as keyof typeof SERVICE_TEMPLATES)}
-              onMouseEnter={() => setLastHoveredIndex(index)}
-              style={service.style}
-              isAutoHovered={!isUserHovering && index === autoHoverIndex}
+              ref={(el) => {
+                buttonRefs.current[index] = el
+              }}
             >
-              <Icon className='h-5 w-5 sm:h-6 sm:w-6' />
-            </IconButton>
+              <IconButton
+                aria-label={service.label}
+                onClick={() => handleServiceClick(service.key as keyof typeof SERVICE_TEMPLATES)}
+                onMouseEnter={() => setLastHoveredIndex(index)}
+                style={service.style}
+                isAutoHovered={!isUserHovering && index === autoHoverIndex}
+              >
+                <Icon className='h-5 w-5 sm:h-6 sm:w-6' />
+              </IconButton>
+            </div>
           )
         })}
       </div>

From 48782d2bd3bb391a769adcc6500046f4b15504e5 Mon Sep 17 00:00:00 2001
From: Adithya Krishna <aadithya794@gmail.com>
Date: Sun, 8 Mar 2026 15:54:35 +0530
Subject: [PATCH 2/3] chore: fix state lag on hover

---
 .../components/hero/components/icon-button.tsx        | 11 +++++++++--
 apps/sim/app/(landing)/components/hero/hero.tsx       |  2 +-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/apps/sim/app/(landing)/components/hero/components/icon-button.tsx b/apps/sim/app/(landing)/components/hero/components/icon-button.tsx
index c8e523e2f86..254853437f0 100644
--- a/apps/sim/app/(landing)/components/hero/components/icon-button.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/icon-button.tsx
@@ -9,6 +9,7 @@ interface IconButtonProps {
   style?: React.CSSProperties
   'aria-label': string
   isAutoHovered?: boolean
+  highlightFromParent?: boolean
 }
 
 export function IconButton({
@@ -18,7 +19,13 @@ export function IconButton({
   style,
   'aria-label': ariaLabel,
   isAutoHovered = false,
+  highlightFromParent = false,
 }: IconButtonProps) {
+  const showOwnHighlight = !highlightFromParent && isAutoHovered
+  const hoverHighlight = !highlightFromParent
+    ? 'hover:border-[#E5E5E5] hover:shadow-[0_2px_4px_0_rgba(0,0,0,0.08)]'
+    : ''
+
   return (
     <button
       type='button'
@@ -26,9 +33,9 @@ export function IconButton({
       onClick={onClick}
       onMouseEnter={onMouseEnter}
       className={`flex items-center justify-center rounded-xl border p-2 outline-none transition-all duration-300 ${
-        isAutoHovered
+        showOwnHighlight
           ? 'border-[#E5E5E5] shadow-[0_2px_4px_0_rgba(0,0,0,0.08)]'
-          : 'border-transparent hover:border-[#E5E5E5] hover:shadow-[0_2px_4px_0_rgba(0,0,0,0.08)]'
+          : `border-transparent ${hoverHighlight}`
       }`}
       style={style}
     >
diff --git a/apps/sim/app/(landing)/components/hero/hero.tsx b/apps/sim/app/(landing)/components/hero/hero.tsx
index 21c3feba22b..7291a41dbcd 100644
--- a/apps/sim/app/(landing)/components/hero/hero.tsx
+++ b/apps/sim/app/(landing)/components/hero/hero.tsx
@@ -448,7 +448,7 @@ export default function Hero() {
                 onClick={() => handleServiceClick(service.key as keyof typeof SERVICE_TEMPLATES)}
                 onMouseEnter={() => setLastHoveredIndex(index)}
                 style={service.style}
-                isAutoHovered={!isUserHovering && index === autoHoverIndex}
+                highlightFromParent
               >
                 <Icon className='h-5 w-5 sm:h-6 sm:w-6' />
               </IconButton>

From b4b7a86bfdf6041b88d524b7529eee55bf59dcc7 Mon Sep 17 00:00:00 2001
From: Adithya Krishna <aadithya794@gmail.com>
Date: Sun, 8 Mar 2026 16:23:01 +0530
Subject: [PATCH 3/3] chore: made requested changes

---
 .../hero/components/icon-button.tsx           | 15 ++----
 .../app/(landing)/components/hero/hero.tsx    | 50 ++++++++++++++-----
 2 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/apps/sim/app/(landing)/components/hero/components/icon-button.tsx b/apps/sim/app/(landing)/components/hero/components/icon-button.tsx
index 254853437f0..15bb2cb618d 100644
--- a/apps/sim/app/(landing)/components/hero/components/icon-button.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/icon-button.tsx
@@ -8,7 +8,6 @@ interface IconButtonProps {
   onMouseEnter?: () => void
   style?: React.CSSProperties
   'aria-label': string
-  isAutoHovered?: boolean
   highlightFromParent?: boolean
 }
 
@@ -18,13 +17,11 @@ export function IconButton({
   onMouseEnter,
   style,
   'aria-label': ariaLabel,
-  isAutoHovered = false,
   highlightFromParent = false,
 }: IconButtonProps) {
-  const showOwnHighlight = !highlightFromParent && isAutoHovered
-  const hoverHighlight = !highlightFromParent
-    ? 'hover:border-[#E5E5E5] hover:shadow-[0_2px_4px_0_rgba(0,0,0,0.08)]'
-    : ''
+  const hoverHighlight = highlightFromParent
+    ? ''
+    : 'hover:border-[#E5E5E5] hover:shadow-[0_2px_4px_0_rgba(0,0,0,0.08)]'
 
   return (
     <button
@@ -32,11 +29,7 @@ export function IconButton({
       aria-label={ariaLabel}
       onClick={onClick}
       onMouseEnter={onMouseEnter}
-      className={`flex items-center justify-center rounded-xl border p-2 outline-none transition-all duration-300 ${
-        showOwnHighlight
-          ? 'border-[#E5E5E5] shadow-[0_2px_4px_0_rgba(0,0,0,0.08)]'
-          : `border-transparent ${hoverHighlight}`
-      }`}
+      className={`flex items-center justify-center rounded-xl border border-transparent p-2 outline-none transition-all duration-300 ${hoverHighlight}`}
       style={style}
     >
       {children}
diff --git a/apps/sim/app/(landing)/components/hero/hero.tsx b/apps/sim/app/(landing)/components/hero/hero.tsx
index 7291a41dbcd..36c82e2d58b 100644
--- a/apps/sim/app/(landing)/components/hero/hero.tsx
+++ b/apps/sim/app/(landing)/components/hero/hero.tsx
@@ -151,6 +151,7 @@ export default function Hero() {
   const [autoHoverIndex, setAutoHoverIndex] = React.useState(1)
   const [isUserHovering, setIsUserHovering] = React.useState(false)
   const [lastHoveredIndex, setLastHoveredIndex] = React.useState<number | null>(null)
+  const [selectedIconIndex, setSelectedIconIndex] = React.useState<number | null>(null)
   const intervalRef = React.useRef<NodeJS.Timeout | null>(null)
 
   const iconRowRef = React.useRef<HTMLDivElement | null>(null)
@@ -166,7 +167,12 @@ export default function Hero() {
   /**
    * Handle service icon click to populate textarea with template
    */
-  const handleServiceClick = (service: keyof typeof SERVICE_TEMPLATES) => {
+  const handleServiceClick = (index: number, service: keyof typeof SERVICE_TEMPLATES) => {
+    setSelectedIconIndex(index)
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current)
+      intervalRef.current = null
+    }
     setTextValue(SERVICE_TEMPLATES[service])
   }
 
@@ -188,6 +194,21 @@ export default function Hero() {
     return () => window.removeEventListener('resize', updateVisibleIcons)
   }, [])
 
+  React.useEffect(() => {
+    const maxIndex = visibleIconCount - 1
+    setAutoHoverIndex((i) => Math.min(i, maxIndex))
+    setLastHoveredIndex((idx) =>
+      idx !== null ? Math.min(idx, maxIndex) : null
+    )
+    setSelectedIconIndex((idx) =>
+      idx !== null ? Math.min(idx, maxIndex) : null
+    )
+  }, [visibleIconCount])
+
+  React.useEffect(() => {
+    if (textValue.trim().length === 0) setSelectedIconIndex(null)
+  }, [textValue])
+
   /**
    * Service icons array for easier indexing
    */
@@ -216,25 +237,20 @@ export default function Hero() {
    * Auto-hover animation effect
    */
   React.useEffect(() => {
-    // Start the interval when component mounts
     const startInterval = () => {
       intervalRef.current = setInterval(() => {
         setAutoHoverIndex((prev) => (prev + 1) % visibleIconCount)
       }, 2000)
     }
 
-    // Only run interval when user is not hovering
-    if (!isUserHovering) {
-      startInterval()
-    }
+    if (selectedIconIndex === null && !isUserHovering) startInterval()
 
-    // Cleanup on unmount or when hovering state changes
     return () => {
       if (intervalRef.current) {
         clearInterval(intervalRef.current)
       }
     }
-  }, [isUserHovering, visibleIconCount])
+  }, [selectedIconIndex, isUserHovering, visibleIconCount])
 
   /**
    * Handle mouse enter on icon container
@@ -258,11 +274,19 @@ export default function Hero() {
   }
 
   const activeIconIndex =
-    isUserHovering && lastHoveredIndex !== null ? lastHoveredIndex : autoHoverIndex
+    selectedIconIndex !== null
+      ? selectedIconIndex
+      : isUserHovering && lastHoveredIndex !== null
+        ? lastHoveredIndex
+        : autoHoverIndex
+  const pillTargetIndex = Math.max(
+    0,
+    Math.min(activeIconIndex, visibleIconCount - 1)
+  )
 
   React.useLayoutEffect(() => {
     const container = iconRowRef.current
-    const target = buttonRefs.current[activeIconIndex]
+    const target = buttonRefs.current[pillTargetIndex]
     if (!container || !target) return
     const cr = container.getBoundingClientRect()
     const tr = target.getBoundingClientRect()
@@ -272,7 +296,7 @@ export default function Hero() {
       width: tr.width,
       height: tr.height,
     })
-  }, [activeIconIndex, layoutVersion, visibleIconCount])
+  }, [pillTargetIndex, layoutVersion, visibleIconCount])
 
   React.useEffect(() => {
     const onResize = () => setLayoutVersion((v) => v + 1)
@@ -445,7 +469,9 @@ export default function Hero() {
             >
               <IconButton
                 aria-label={service.label}
-                onClick={() => handleServiceClick(service.key as keyof typeof SERVICE_TEMPLATES)}
+                onClick={() =>
+                  handleServiceClick(index, service.key as keyof typeof SERVICE_TEMPLATES)
+                }
                 onMouseEnter={() => setLastHoveredIndex(index)}
                 style={service.style}
                 highlightFromParent