From abb69b938f38c49d61f41fbd4868310476a501bb Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Sat, 29 Nov 2025 02:24:25 +0000
Subject: [PATCH 1/2] feat(web): add progress bar with auto-cycling and
 scroll-into-view for showcase sections

- Add useAutoProgress hook for auto-cycling through items every 5 seconds
- Add ProgressBar component with visual progress fill animation
- Implement progress bar for FloatingPanelSection in ai-notetaking.tsx (mobile, tablet, desktop)
- Implement progress bar for MainFeaturesSection in index.tsx (mobile carousel)
- Implement progress bar for DetailsSection in index.tsx (mobile, tablet, desktop)
- Add scroll-into-view functionality when showcasing elements
- Add pause on hover/touch and resume on mouse leave/touch end

Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
---
 apps/web/src/routes/_view/index.tsx           | 456 ++++++++++++++----
 .../routes/_view/product/ai-notetaking.tsx    | 297 ++++++++++--
 2 files changed, 611 insertions(+), 142 deletions(-)

diff --git a/apps/web/src/routes/_view/index.tsx b/apps/web/src/routes/_view/index.tsx
index 904dc9a2e5..6ae0163920 100644
--- a/apps/web/src/routes/_view/index.tsx
+++ b/apps/web/src/routes/_view/index.tsx
@@ -25,6 +25,113 @@ import { useHeroContext } from "./route";
 
 const MUX_PLAYBACK_ID = "bpcBHf4Qv5FbhwWD02zyFDb24EBuEuTPHKFUrZEktULQ";
 
+const PROGRESS_DURATION = 5000;
+
+function useAutoProgress({
+  itemCount,
+  selectedIndex,
+  onSelect,
+  duration = PROGRESS_DURATION,
+}: {
+  itemCount: number;
+  selectedIndex: number;
+  onSelect: (index: number) => void;
+  duration?: number;
+}) {
+  const [progress, setProgress] = useState(0);
+  const [isPaused, setIsPaused] = useState(false);
+  const startTimeRef = useRef<number>(Date.now());
+  const pausedProgressRef = useRef<number>(0);
+
+  const pause = useCallback(() => {
+    pausedProgressRef.current = progress;
+    setIsPaused(true);
+  }, [progress]);
+
+  const resume = useCallback(() => {
+    startTimeRef.current = Date.now() - pausedProgressRef.current * duration;
+    setIsPaused(false);
+  }, [duration]);
+
+  const goToIndex = useCallback(
+    (index: number) => {
+      onSelect(index);
+      setProgress(0);
+      startTimeRef.current = Date.now();
+      pausedProgressRef.current = 0;
+    },
+    [onSelect],
+  );
+
+  useEffect(() => {
+    if (isPaused) return;
+
+    const animate = () => {
+      const elapsed = Date.now() - startTimeRef.current;
+      const newProgress = Math.min(elapsed / duration, 1);
+      setProgress(newProgress);
+
+      if (newProgress >= 1) {
+        const nextIndex = (selectedIndex + 1) % itemCount;
+        onSelect(nextIndex);
+        setProgress(0);
+        startTimeRef.current = Date.now();
+        pausedProgressRef.current = 0;
+      }
+    };
+
+    const intervalId = setInterval(animate, 50);
+    return () => clearInterval(intervalId);
+  }, [isPaused, selectedIndex, itemCount, onSelect, duration]);
+
+  useEffect(() => {
+    setProgress(0);
+    startTimeRef.current = Date.now();
+    pausedProgressRef.current = 0;
+  }, [selectedIndex]);
+
+  return { progress, isPaused, pause, resume, goToIndex };
+}
+
+function ProgressBar({
+  itemCount,
+  selectedIndex,
+  progress,
+  onSelect,
+  className,
+}: {
+  itemCount: number;
+  selectedIndex: number;
+  progress: number;
+  onSelect: (index: number) => void;
+  className?: string;
+}) {
+  return (
+    <div className={cn("flex justify-center gap-2", className)}>
+      {Array.from({ length: itemCount }).map((_, index) => (
+        <button
+          key={index}
+          onClick={() => onSelect(index)}
+          className="h-1 w-8 rounded-full bg-neutral-200 overflow-hidden cursor-pointer"
+          aria-label={`Go to item ${index + 1}`}
+        >
+          <div
+            className="h-full bg-stone-600 transition-all duration-100"
+            style={{
+              width:
+                index < selectedIndex
+                  ? "100%"
+                  : index === selectedIndex
+                    ? `${progress * 100}%`
+                    : "0%",
+            }}
+          />
+        </button>
+      ))}
+    </div>
+  );
+}
+
 const mainFeatures = [
   {
     icon: "mdi:text-box-outline",
@@ -114,23 +221,49 @@ function Component() {
   const featuresScrollRef = useRef<HTMLDivElement>(null);
   const heroInputRef = useRef<HTMLInputElement>(null);
 
-  const scrollToDetail = (index: number) => {
+  const scrollToDetail = useCallback((index: number) => {
     setSelectedDetail(index);
     if (detailsScrollRef.current) {
       const container = detailsScrollRef.current;
       const scrollLeft = container.offsetWidth * index;
       container.scrollTo({ left: scrollLeft, behavior: "smooth" });
     }
-  };
+  }, []);
 
-  const scrollToFeature = (index: number) => {
+  const scrollToFeature = useCallback((index: number) => {
     setSelectedFeature(index);
     if (featuresScrollRef.current) {
       const container = featuresScrollRef.current;
       const scrollLeft = container.offsetWidth * index;
       container.scrollTo({ left: scrollLeft, behavior: "smooth" });
     }
-  };
+  }, []);
+
+  const featuresProgress = useAutoProgress({
+    itemCount: mainFeatures.length,
+    selectedIndex: selectedFeature,
+    onSelect: scrollToFeature,
+  });
+
+  const detailsProgress = useAutoProgress({
+    itemCount: detailsFeatures.length,
+    selectedIndex: selectedDetail,
+    onSelect: scrollToDetail,
+  });
+
+  const handleFeatureSelect = useCallback(
+    (index: number) => {
+      featuresProgress.goToIndex(index);
+    },
+    [featuresProgress.goToIndex],
+  );
+
+  const handleDetailSelect = useCallback(
+    (index: number) => {
+      detailsProgress.goToIndex(index);
+    },
+    [detailsProgress.goToIndex],
+  );
 
   return (
     <main
@@ -154,14 +287,20 @@ function Component() {
           featuresScrollRef={featuresScrollRef}
           selectedFeature={selectedFeature}
           setSelectedFeature={setSelectedFeature}
-          scrollToFeature={scrollToFeature}
+          progress={featuresProgress.progress}
+          onSelect={handleFeatureSelect}
+          onPause={featuresProgress.pause}
+          onResume={featuresProgress.resume}
         />
         <SlashSeparator />
         <DetailsSection
           detailsScrollRef={detailsScrollRef}
           selectedDetail={selectedDetail}
           setSelectedDetail={setSelectedDetail}
-          scrollToDetail={scrollToDetail}
+          progress={detailsProgress.progress}
+          onSelect={handleDetailSelect}
+          onPause={detailsProgress.pause}
+          onResume={detailsProgress.resume}
         />
         <SlashSeparator />
         <GitHubOpenSource />
@@ -1074,12 +1213,18 @@ export function MainFeaturesSection({
   featuresScrollRef,
   selectedFeature,
   setSelectedFeature,
-  scrollToFeature,
+  progress,
+  onSelect,
+  onPause,
+  onResume,
 }: {
   featuresScrollRef: React.RefObject<HTMLDivElement | null>;
   selectedFeature: number;
   setSelectedFeature: (index: number) => void;
-  scrollToFeature: (index: number) => void;
+  progress: number;
+  onSelect: (index: number) => void;
+  onPause: () => void;
+  onResume: () => void;
 }) {
   return (
     <section>
@@ -1106,7 +1251,10 @@ export function MainFeaturesSection({
         featuresScrollRef={featuresScrollRef}
         selectedFeature={selectedFeature}
         setSelectedFeature={setSelectedFeature}
-        scrollToFeature={scrollToFeature}
+        progress={progress}
+        onSelect={onSelect}
+        onPause={onPause}
+        onResume={onResume}
       />
       <FeaturesDesktopGrid />
     </section>
@@ -1117,15 +1265,25 @@ function FeaturesMobileCarousel({
   featuresScrollRef,
   selectedFeature,
   setSelectedFeature,
-  scrollToFeature,
+  progress,
+  onSelect,
+  onPause,
+  onResume,
 }: {
   featuresScrollRef: React.RefObject<HTMLDivElement | null>;
   selectedFeature: number;
   setSelectedFeature: (index: number) => void;
-  scrollToFeature: (index: number) => void;
+  progress: number;
+  onSelect: (index: number) => void;
+  onPause: () => void;
+  onResume: () => void;
 }) {
   return (
-    <div className="max-[800px]:block hidden">
+    <div
+      className="max-[800px]:block hidden"
+      onTouchStart={onPause}
+      onTouchEnd={onResume}
+    >
       <div
         ref={featuresScrollRef}
         className="overflow-x-auto scrollbar-hide snap-x snap-mandatory"
@@ -1171,21 +1329,13 @@ function FeaturesMobileCarousel({
         </div>
       </div>
 
-      <div className="flex justify-center gap-2 py-6">
-        {mainFeatures.map((_, index) => (
-          <button
-            key={index}
-            onClick={() => scrollToFeature(index)}
-            className={cn([
-              "h-1 rounded-full transition-all cursor-pointer",
-              selectedFeature === index
-                ? "w-8 bg-stone-600"
-                : "w-8 bg-neutral-300 hover:bg-neutral-400",
-            ])}
-            aria-label={`Go to feature ${index + 1}`}
-          />
-        ))}
-      </div>
+      <ProgressBar
+        itemCount={mainFeatures.length}
+        selectedIndex={selectedFeature}
+        progress={progress}
+        onSelect={onSelect}
+        className="py-6"
+      />
     </div>
   );
 }
@@ -1285,12 +1435,18 @@ export function DetailsSection({
   detailsScrollRef,
   selectedDetail,
   setSelectedDetail,
-  scrollToDetail,
+  progress,
+  onSelect,
+  onPause,
+  onResume,
 }: {
   detailsScrollRef: React.RefObject<HTMLDivElement | null>;
   selectedDetail: number;
   setSelectedDetail: (index: number) => void;
-  scrollToDetail: (index: number) => void;
+  progress: number;
+  onSelect: (index: number) => void;
+  onPause: () => void;
+  onResume: () => void;
 }) {
   return (
     <div>
@@ -1299,13 +1455,25 @@ export function DetailsSection({
         detailsScrollRef={detailsScrollRef}
         selectedDetail={selectedDetail}
         setSelectedDetail={setSelectedDetail}
-        scrollToDetail={scrollToDetail}
+        progress={progress}
+        onSelect={onSelect}
+        onPause={onPause}
+        onResume={onResume}
       />
       <DetailsTabletView
         selectedDetail={selectedDetail}
-        setSelectedDetail={setSelectedDetail}
+        progress={progress}
+        onSelect={onSelect}
+        onPause={onPause}
+        onResume={onResume}
+      />
+      <DetailsDesktopView
+        selectedDetail={selectedDetail}
+        progress={progress}
+        onSelect={onSelect}
+        onPause={onPause}
+        onResume={onResume}
       />
-      <DetailsDesktopView />
     </div>
   );
 }
@@ -1328,15 +1496,25 @@ function DetailsMobileCarousel({
   detailsScrollRef,
   selectedDetail,
   setSelectedDetail,
-  scrollToDetail,
+  progress,
+  onSelect,
+  onPause,
+  onResume,
 }: {
   detailsScrollRef: React.RefObject<HTMLDivElement | null>;
   selectedDetail: number;
   setSelectedDetail: (index: number) => void;
-  scrollToDetail: (index: number) => void;
+  progress: number;
+  onSelect: (index: number) => void;
+  onPause: () => void;
+  onResume: () => void;
 }) {
   return (
-    <div className="max-[800px]:block hidden">
+    <div
+      className="max-[800px]:block hidden"
+      onTouchStart={onPause}
+      onTouchEnd={onResume}
+    >
       <div
         ref={detailsScrollRef}
         className="overflow-x-auto scrollbar-hide snap-x snap-mandatory"
@@ -1388,41 +1566,64 @@ function DetailsMobileCarousel({
         </div>
       </div>
 
-      <div className="flex justify-center gap-2 py-6">
-        {detailsFeatures.map((_, index) => (
-          <button
-            key={index}
-            onClick={() => scrollToDetail(index)}
-            className={cn([
-              "h-1 rounded-full transition-all cursor-pointer",
-              selectedDetail === index
-                ? "w-8 bg-stone-600"
-                : "w-8 bg-neutral-300 hover:bg-neutral-400",
-            ])}
-            aria-label={`Go to detail ${index + 1}`}
-          />
-        ))}
-      </div>
+      <ProgressBar
+        itemCount={detailsFeatures.length}
+        selectedIndex={selectedDetail}
+        progress={progress}
+        onSelect={onSelect}
+        className="py-6"
+      />
     </div>
   );
 }
 
 function DetailsTabletView({
   selectedDetail,
-  setSelectedDetail,
+  progress,
+  onSelect,
+  onPause,
+  onResume,
 }: {
   selectedDetail: number;
-  setSelectedDetail: (index: number) => void;
+  progress: number;
+  onSelect: (index: number) => void;
+  onPause: () => void;
+  onResume: () => void;
 }) {
+  const tabsContainerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (tabsContainerRef.current) {
+      const container = tabsContainerRef.current;
+      const selectedButton = container.children[0]?.children[
+        selectedDetail
+      ] as HTMLElement;
+      if (selectedButton) {
+        selectedButton.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest",
+          inline: "center",
+        });
+      }
+    }
+  }, [selectedDetail]);
+
   return (
-    <div className="min-[800px]:max-[1200px]:block hidden border-t border-neutral-100">
+    <div
+      className="min-[800px]:max-[1200px]:block hidden border-t border-neutral-100"
+      onMouseEnter={onPause}
+      onMouseLeave={onResume}
+    >
       <div className="flex flex-col">
-        <div className="overflow-x-auto scrollbar-hide border-b border-neutral-100">
+        <div
+          ref={tabsContainerRef}
+          className="overflow-x-auto scrollbar-hide border-b border-neutral-100"
+        >
           <div className="flex">
             {detailsFeatures.map((feature, index) => (
               <button
                 key={index}
-                onClick={() => setSelectedDetail(index)}
+                onClick={() => onSelect(index)}
                 className={cn([
                   "cursor-pointer p-6 border-r border-neutral-100 last:border-r-0 min-w-[280px] text-left transition-colors",
                   selectedDetail === index
@@ -1465,28 +1666,69 @@ function DetailsTabletView({
             />
           )}
         </div>
+
+        <ProgressBar
+          itemCount={detailsFeatures.length}
+          selectedIndex={selectedDetail}
+          progress={progress}
+          onSelect={onSelect}
+          className="py-6"
+        />
       </div>
     </div>
   );
 }
 
-function DetailsDesktopView() {
-  const [selectedDetail, setSelectedDetail] = useState<number>(0);
+function DetailsDesktopView({
+  selectedDetail,
+  progress,
+  onSelect,
+  onPause,
+  onResume,
+}: {
+  selectedDetail: number;
+  progress: number;
+  onSelect: (index: number) => void;
+  onPause: () => void;
+  onResume: () => void;
+}) {
   const [hoveredDetail, setHoveredDetail] = useState<number | null>(null);
+  const tabsContainerRef = useRef<HTMLDivElement>(null);
   const selectedFeature =
     selectedDetail !== null ? detailsFeatures[selectedDetail] : null;
 
+  useEffect(() => {
+    if (tabsContainerRef.current) {
+      const selectedElement = tabsContainerRef.current.children[
+        selectedDetail
+      ] as HTMLElement;
+      if (selectedElement) {
+        selectedElement.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest",
+        });
+      }
+    }
+  }, [selectedDetail]);
+
   return (
-    <div className="min-[1200px]:grid hidden grid-cols-2 border-t border-neutral-100">
+    <div
+      className="min-[1200px]:grid hidden grid-cols-2 border-t border-neutral-100"
+      onMouseEnter={onPause}
+      onMouseLeave={onResume}
+    >
       <div
         className="border-r border-neutral-100 relative overflow-hidden"
         style={{ paddingBottom: "56.25%" }}
       >
-        <div className="absolute inset-0 overflow-y-auto">
+        <div
+          ref={tabsContainerRef}
+          className="absolute inset-0 overflow-y-auto"
+        >
           {detailsFeatures.map((feature, index) => (
             <div
               key={index}
-              onClick={() => setSelectedDetail(index)}
+              onClick={() => onSelect(index)}
               className={cn([
                 "p-6 cursor-pointer transition-colors",
                 index < detailsFeatures.length - 1 &&
@@ -1522,51 +1764,61 @@ function DetailsDesktopView() {
         </div>
       </div>
 
-      <div
-        className="aspect-video overflow-hidden bg-neutral-100 relative group"
-        onMouseEnter={() => setHoveredDetail(selectedDetail)}
-        onMouseLeave={() => setHoveredDetail(null)}
-      >
-        {selectedFeature &&
-          (selectedFeature.image ? (
-            <>
-              <Image
-                src={selectedFeature.image}
-                alt={`${selectedFeature.title} feature`}
-                className="w-full h-full object-contain"
-              />
-              {selectedFeature.link && (
-                <div
-                  className={cn([
-                    "absolute bottom-0 left-0 right-0",
-                    "transition-all duration-300 ease-out",
-                    hoveredDetail === selectedDetail
-                      ? "translate-y-0 opacity-100"
-                      : "translate-y-full opacity-0",
-                  ])}
-                >
-                  <Link
-                    to={selectedFeature.link}
+      <div className="flex flex-col">
+        <div
+          className="aspect-video overflow-hidden bg-neutral-100 relative group"
+          onMouseEnter={() => setHoveredDetail(selectedDetail)}
+          onMouseLeave={() => setHoveredDetail(null)}
+        >
+          {selectedFeature &&
+            (selectedFeature.image ? (
+              <>
+                <Image
+                  src={selectedFeature.image}
+                  alt={`${selectedFeature.title} feature`}
+                  className="w-full h-full object-contain"
+                />
+                {selectedFeature.link && (
+                  <div
                     className={cn([
-                      "w-full py-4 text-xs font-mono cursor-pointer block text-center",
-                      "bg-stone-100/95 text-stone-800",
-                      "hover:bg-stone-200/95 active:bg-stone-400/95",
-                      "transition-all duration-150",
-                      "backdrop-blur-sm",
+                      "absolute bottom-0 left-0 right-0",
+                      "transition-all duration-300 ease-out",
+                      hoveredDetail === selectedDetail
+                        ? "translate-y-0 opacity-100"
+                        : "translate-y-full opacity-0",
                     ])}
                   >
-                    Learn more
-                  </Link>
-                </div>
-              )}
-            </>
-          ) : (
-            <img
-              src="/api/images/hyprnote/static.webp"
-              alt={`${selectedFeature.title} feature`}
-              className="w-full h-full object-contain"
-            />
-          ))}
+                    <Link
+                      to={selectedFeature.link}
+                      className={cn([
+                        "w-full py-4 text-xs font-mono cursor-pointer block text-center",
+                        "bg-stone-100/95 text-stone-800",
+                        "hover:bg-stone-200/95 active:bg-stone-400/95",
+                        "transition-all duration-150",
+                        "backdrop-blur-sm",
+                      ])}
+                    >
+                      Learn more
+                    </Link>
+                  </div>
+                )}
+              </>
+            ) : (
+              <img
+                src="/api/images/hyprnote/static.webp"
+                alt={`${selectedFeature.title} feature`}
+                className="w-full h-full object-contain"
+              />
+            ))}
+        </div>
+
+        <ProgressBar
+          itemCount={detailsFeatures.length}
+          selectedIndex={selectedDetail}
+          progress={progress}
+          onSelect={onSelect}
+          className="py-6"
+        />
       </div>
     </div>
   );
diff --git a/apps/web/src/routes/_view/product/ai-notetaking.tsx b/apps/web/src/routes/_view/product/ai-notetaking.tsx
index a82aa0a4a7..9b20cb9377 100644
--- a/apps/web/src/routes/_view/product/ai-notetaking.tsx
+++ b/apps/web/src/routes/_view/product/ai-notetaking.tsx
@@ -7,7 +7,7 @@ import {
   SearchIcon,
 } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
-import { memo, useEffect, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
 
 import { Typewriter } from "@hypr/ui/components/ui/typewriter";
 import { cn } from "@hypr/utils";
@@ -2094,6 +2094,113 @@ const floatingPanelTabs = [
   },
 ];
 
+const PROGRESS_DURATION = 5000;
+
+function useAutoProgress({
+  itemCount,
+  selectedIndex,
+  onSelect,
+  duration = PROGRESS_DURATION,
+}: {
+  itemCount: number;
+  selectedIndex: number;
+  onSelect: (index: number) => void;
+  duration?: number;
+}) {
+  const [progress, setProgress] = useState(0);
+  const [isPaused, setIsPaused] = useState(false);
+  const startTimeRef = useRef<number>(Date.now());
+  const pausedProgressRef = useRef<number>(0);
+
+  const pause = useCallback(() => {
+    pausedProgressRef.current = progress;
+    setIsPaused(true);
+  }, [progress]);
+
+  const resume = useCallback(() => {
+    startTimeRef.current = Date.now() - pausedProgressRef.current * duration;
+    setIsPaused(false);
+  }, [duration]);
+
+  const goToIndex = useCallback(
+    (index: number) => {
+      onSelect(index);
+      setProgress(0);
+      startTimeRef.current = Date.now();
+      pausedProgressRef.current = 0;
+    },
+    [onSelect],
+  );
+
+  useEffect(() => {
+    if (isPaused) return;
+
+    const animate = () => {
+      const elapsed = Date.now() - startTimeRef.current;
+      const newProgress = Math.min(elapsed / duration, 1);
+      setProgress(newProgress);
+
+      if (newProgress >= 1) {
+        const nextIndex = (selectedIndex + 1) % itemCount;
+        onSelect(nextIndex);
+        setProgress(0);
+        startTimeRef.current = Date.now();
+        pausedProgressRef.current = 0;
+      }
+    };
+
+    const intervalId = setInterval(animate, 50);
+    return () => clearInterval(intervalId);
+  }, [isPaused, selectedIndex, itemCount, onSelect, duration]);
+
+  useEffect(() => {
+    setProgress(0);
+    startTimeRef.current = Date.now();
+    pausedProgressRef.current = 0;
+  }, [selectedIndex]);
+
+  return { progress, isPaused, pause, resume, goToIndex };
+}
+
+function ProgressBar({
+  itemCount,
+  selectedIndex,
+  progress,
+  onSelect,
+  className,
+}: {
+  itemCount: number;
+  selectedIndex: number;
+  progress: number;
+  onSelect: (index: number) => void;
+  className?: string;
+}) {
+  return (
+    <div className={cn("flex justify-center gap-2", className)}>
+      {Array.from({ length: itemCount }).map((_, index) => (
+        <button
+          key={index}
+          onClick={() => onSelect(index)}
+          className="h-1 w-8 rounded-full bg-neutral-200 overflow-hidden cursor-pointer"
+          aria-label={`Go to item ${index + 1}`}
+        >
+          <div
+            className="h-full bg-stone-600 transition-all duration-100"
+            style={{
+              width:
+                index < selectedIndex
+                  ? "100%"
+                  : index === selectedIndex
+                    ? `${progress * 100}%`
+                    : "0%",
+            }}
+          />
+        </button>
+      ))}
+    </div>
+  );
+}
+
 function FloatingPanelSection() {
   return (
     <section className="border-y border-neutral-100 relative">
@@ -2128,14 +2235,27 @@ function FloatingPanelContent() {
   const [selectedTab, setSelectedTab] = useState(0);
   const scrollRef = useRef<HTMLDivElement>(null);
 
-  const scrollToTab = (index: number) => {
+  const scrollToTab = useCallback((index: number) => {
     setSelectedTab(index);
     if (scrollRef.current) {
       const container = scrollRef.current;
       const scrollLeft = container.offsetWidth * index;
       container.scrollTo({ left: scrollLeft, behavior: "smooth" });
     }
-  };
+  }, []);
+
+  const { progress, pause, resume, goToIndex } = useAutoProgress({
+    itemCount: floatingPanelTabs.length,
+    selectedIndex: selectedTab,
+    onSelect: scrollToTab,
+  });
+
+  const handleSelect = useCallback(
+    (index: number) => {
+      goToIndex(index);
+    },
+    [goToIndex],
+  );
 
   return (
     <div className="border-t border-neutral-100">
@@ -2143,33 +2263,76 @@ function FloatingPanelContent() {
         scrollRef={scrollRef}
         selectedTab={selectedTab}
         setSelectedTab={setSelectedTab}
-        scrollToTab={scrollToTab}
+        progress={progress}
+        onSelect={handleSelect}
+        onPause={pause}
+        onResume={resume}
       />
       <FloatingPanelTablet
         selectedTab={selectedTab}
-        setSelectedTab={setSelectedTab}
+        progress={progress}
+        onSelect={handleSelect}
+        onPause={pause}
+        onResume={resume}
+      />
+      <FloatingPanelDesktop
+        selectedTab={selectedTab}
+        progress={progress}
+        onSelect={handleSelect}
+        onPause={pause}
+        onResume={resume}
       />
-      <FloatingPanelDesktop />
     </div>
   );
 }
 
 function FloatingPanelTablet({
   selectedTab,
-  setSelectedTab,
+  progress,
+  onSelect,
+  onPause,
+  onResume,
 }: {
   selectedTab: number;
-  setSelectedTab: (index: number) => void;
+  progress: number;
+  onSelect: (index: number) => void;
+  onPause: () => void;
+  onResume: () => void;
 }) {
+  const tabsContainerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (tabsContainerRef.current) {
+      const container = tabsContainerRef.current;
+      const selectedButton = container.children[0]?.children[
+        selectedTab
+      ] as HTMLElement;
+      if (selectedButton) {
+        selectedButton.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest",
+          inline: "center",
+        });
+      }
+    }
+  }, [selectedTab]);
+
   return (
-    <div className="min-[800px]:max-[1000px]:block hidden border-t border-neutral-100">
+    <div
+      className="min-[800px]:max-[1000px]:block hidden border-t border-neutral-100"
+      onMouseEnter={onPause}
+      onMouseLeave={onResume}
+    >
       <div className="flex flex-col">
-        <div className="overflow-x-auto scrollbar-hide border-b border-neutral-100">
+        <div
+          ref={tabsContainerRef}
+          className="overflow-x-auto scrollbar-hide border-b border-neutral-100"
+        >
           <div className="flex">
             {floatingPanelTabs.map((tab, index) => (
               <button
                 key={index}
-                onClick={() => setSelectedTab(index)}
+                onClick={() => onSelect(index)}
                 className={cn([
                   "flex flex-col items-start cursor-pointer p-6 border-r border-neutral-100 last:border-r-0 min-w-[280px] text-left transition-colors",
                   selectedTab === index ? "bg-stone-50" : "hover:bg-neutral-50",
@@ -2191,28 +2354,70 @@ function FloatingPanelTablet({
             className="w-full h-full object-cover"
           />
         </div>
+
+        <ProgressBar
+          itemCount={floatingPanelTabs.length}
+          selectedIndex={selectedTab}
+          progress={progress}
+          onSelect={onSelect}
+          className="py-6"
+        />
       </div>
     </div>
   );
 }
 
-function FloatingPanelDesktop() {
-  const [selectedTab, setSelectedTab] = useState<number>(0);
+function FloatingPanelDesktop({
+  selectedTab,
+  progress,
+  onSelect,
+  onPause,
+  onResume,
+}: {
+  selectedTab: number;
+  progress: number;
+  onSelect: (index: number) => void;
+  onPause: () => void;
+  onResume: () => void;
+}) {
+  const tabsContainerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (tabsContainerRef.current) {
+      const selectedElement = tabsContainerRef.current.children[
+        selectedTab
+      ] as HTMLElement;
+      if (selectedElement) {
+        selectedElement.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest",
+        });
+      }
+    }
+  }, [selectedTab]);
 
   return (
-    <div className="min-[1000px]:grid hidden grid-cols-2 border-t border-neutral-100">
+    <div
+      className="min-[1000px]:grid hidden grid-cols-2 border-t border-neutral-100"
+      onMouseEnter={onPause}
+      onMouseLeave={onResume}
+    >
       <div
         className="border-r border-neutral-100 relative overflow-hidden"
         style={{ paddingBottom: "56.25%" }}
       >
-        <div className="absolute inset-0 overflow-y-auto">
+        <div
+          ref={tabsContainerRef}
+          className="absolute inset-0 overflow-y-auto"
+        >
           {floatingPanelTabs.map((tab, index) => (
             <div
               key={index}
-              onClick={() => setSelectedTab(index)}
+              onClick={() => onSelect(index)}
               className={cn([
                 "p-6 cursor-pointer transition-colors",
-                index < tabs.length - 1 && "border-b border-neutral-100",
+                index < floatingPanelTabs.length - 1 &&
+                  "border-b border-neutral-100",
                 selectedTab === index ? "bg-stone-50" : "hover:bg-neutral-50",
               ])}
             >
@@ -2227,11 +2432,21 @@ function FloatingPanelDesktop() {
         </div>
       </div>
 
-      <div className="aspect-4/3 overflow-hidden bg-neutral-100 flex items-center justify-center">
-        <img
-          src={floatingPanelTabs[selectedTab].image}
-          alt={`${floatingPanelTabs[selectedTab].title} preview`}
-          className="w-full h-full object-cover"
+      <div className="flex flex-col">
+        <div className="aspect-4/3 overflow-hidden bg-neutral-100 flex items-center justify-center">
+          <img
+            src={floatingPanelTabs[selectedTab].image}
+            alt={`${floatingPanelTabs[selectedTab].title} preview`}
+            className="w-full h-full object-cover"
+          />
+        </div>
+
+        <ProgressBar
+          itemCount={floatingPanelTabs.length}
+          selectedIndex={selectedTab}
+          progress={progress}
+          onSelect={onSelect}
+          className="py-6"
         />
       </div>
     </div>
@@ -2242,15 +2457,25 @@ function FloatingPanelMobile({
   scrollRef,
   selectedTab,
   setSelectedTab,
-  scrollToTab,
+  progress,
+  onSelect,
+  onPause,
+  onResume,
 }: {
   scrollRef: React.RefObject<HTMLDivElement | null>;
   selectedTab: number;
   setSelectedTab: (index: number) => void;
-  scrollToTab: (index: number) => void;
+  progress: number;
+  onSelect: (index: number) => void;
+  onPause: () => void;
+  onResume: () => void;
 }) {
   return (
-    <div className="max-[800px]:block hidden">
+    <div
+      className="max-[800px]:block hidden"
+      onTouchStart={onPause}
+      onTouchEnd={onResume}
+    >
       <div
         ref={scrollRef}
         className="overflow-x-auto scrollbar-hide snap-x snap-mandatory"
@@ -2287,21 +2512,13 @@ function FloatingPanelMobile({
         </div>
       </div>
 
-      <div className="flex justify-center gap-2 py-6">
-        {tabs.map((_, index) => (
-          <button
-            key={index}
-            onClick={() => scrollToTab(index)}
-            className={cn([
-              "h-1 rounded-full transition-all cursor-pointer",
-              selectedTab === index
-                ? "w-8 bg-stone-600"
-                : "w-8 bg-neutral-300 hover:bg-neutral-400",
-            ])}
-            aria-label={`Go to tab ${index + 1}`}
-          />
-        ))}
-      </div>
+      <ProgressBar
+        itemCount={floatingPanelTabs.length}
+        selectedIndex={selectedTab}
+        progress={progress}
+        onSelect={onSelect}
+        className="py-6"
+      />
     </div>
   );
 }

From ee72fd0a2124ac8ecca3f8078db883528beaac70 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Sat, 29 Nov 2025 02:32:20 +0000
Subject: [PATCH 2/2] fix(web): fix TypeScript errors in ai-notetaking.tsx and
 vs/$slug.tsx

Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
---
 .../routes/_view/product/ai-notetaking.tsx    |  33 ------
 apps/web/src/routes/_view/vs/$slug.tsx        | 102 +++++++++++++++++-
 2 files changed, 99 insertions(+), 36 deletions(-)

diff --git a/apps/web/src/routes/_view/product/ai-notetaking.tsx b/apps/web/src/routes/_view/product/ai-notetaking.tsx
index 9b20cb9377..19b6552eaf 100644
--- a/apps/web/src/routes/_view/product/ai-notetaking.tsx
+++ b/apps/web/src/routes/_view/product/ai-notetaking.tsx
@@ -41,39 +41,6 @@ export const Route = createFileRoute("/_view/product/ai-notetaking")({
   }),
 });
 
-const tabs = [
-  {
-    title: "Compact Mode",
-    description:
-      "The default collapsed overlay that indicates the meeting is being listened to. Minimal and unobtrusive, staying out of your way.",
-    image: "/api/images/hyprnote/float-compact.jpg",
-  },
-  {
-    title: "Memos",
-    description:
-      "Take quick notes during the meeting. Jot down important points, ideas, or reminders without losing focus on the conversation.",
-    image: "/api/images/hyprnote/float-memos.jpg",
-  },
-  {
-    title: "Transcript",
-    description:
-      "Watch the live transcript as the conversation unfolds in real-time, so you never miss what was said during the meeting.",
-    image: "/api/images/hyprnote/float-transcript.jpg",
-  },
-  {
-    title: "Live Insights",
-    description:
-      "Get a rolling summary of the past 5 minutes with AI-powered suggestions. For sales calls, receive prompts for qualification questions and next steps.",
-    image: "/api/images/hyprnote/float-insights.jpg",
-  },
-  {
-    title: "Chat",
-    description:
-      "Ask questions and get instant answers during the meeting. Query the transcript, get clarifications, or find specific information on the fly.",
-    image: "/api/images/hyprnote/float-chat.jpg",
-  },
-];
-
 function Component() {
   return (
     <div
diff --git a/apps/web/src/routes/_view/vs/$slug.tsx b/apps/web/src/routes/_view/vs/$slug.tsx
index 32c2ff75b8..234f7dd337 100644
--- a/apps/web/src/routes/_view/vs/$slug.tsx
+++ b/apps/web/src/routes/_view/vs/$slug.tsx
@@ -1,6 +1,6 @@
 import { createFileRoute, notFound } from "@tanstack/react-router";
 import { allVs } from "content-collections";
-import { useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 import { cn } from "@hypr/utils";
 
@@ -14,6 +14,74 @@ import {
   MainFeaturesSection,
 } from "@/routes/_view/index";
 
+const PROGRESS_DURATION = 5000;
+
+function useAutoProgress({
+  itemCount,
+  selectedIndex,
+  onSelect,
+  duration = PROGRESS_DURATION,
+}: {
+  itemCount: number;
+  selectedIndex: number;
+  onSelect: (index: number) => void;
+  duration?: number;
+}) {
+  const [progress, setProgress] = useState(0);
+  const [isPaused, setIsPaused] = useState(false);
+  const startTimeRef = useRef<number>(Date.now());
+  const pausedProgressRef = useRef<number>(0);
+
+  const pause = useCallback(() => {
+    pausedProgressRef.current = progress;
+    setIsPaused(true);
+  }, [progress]);
+
+  const resume = useCallback(() => {
+    startTimeRef.current = Date.now() - pausedProgressRef.current * duration;
+    setIsPaused(false);
+  }, [duration]);
+
+  const goToIndex = useCallback(
+    (index: number) => {
+      onSelect(index);
+      setProgress(0);
+      startTimeRef.current = Date.now();
+      pausedProgressRef.current = 0;
+    },
+    [onSelect],
+  );
+
+  useEffect(() => {
+    if (isPaused) return;
+
+    const animate = () => {
+      const elapsed = Date.now() - startTimeRef.current;
+      const newProgress = Math.min(elapsed / duration, 1);
+      setProgress(newProgress);
+
+      if (newProgress >= 1) {
+        const nextIndex = (selectedIndex + 1) % itemCount;
+        onSelect(nextIndex);
+        setProgress(0);
+        startTimeRef.current = Date.now();
+        pausedProgressRef.current = 0;
+      }
+    };
+
+    const intervalId = setInterval(animate, 50);
+    return () => clearInterval(intervalId);
+  }, [isPaused, selectedIndex, itemCount, onSelect, duration]);
+
+  useEffect(() => {
+    setProgress(0);
+    startTimeRef.current = Date.now();
+    pausedProgressRef.current = 0;
+  }, [selectedIndex]);
+
+  return { progress, isPaused, pause, resume, goToIndex };
+}
+
 export const Route = createFileRoute("/_view/vs/$slug")({
   component: Component,
   loader: async ({ params }) => {
@@ -70,6 +138,28 @@ function Component() {
     }
   };
 
+  const featuresProgress = useAutoProgress({
+    itemCount: 5,
+    selectedIndex: selectedFeature,
+    onSelect: scrollToFeature,
+  });
+
+  const detailsProgress = useAutoProgress({
+    itemCount: 5,
+    selectedIndex: selectedDetail,
+    onSelect: scrollToDetail,
+  });
+
+  const handleFeatureSelect = (index: number) => {
+    featuresProgress.goToIndex(index);
+    scrollToFeature(index);
+  };
+
+  const handleDetailSelect = (index: number) => {
+    detailsProgress.goToIndex(index);
+    scrollToDetail(index);
+  };
+
   return (
     <div
       className="bg-linear-to-b from-white via-stone-50/20 to-white min-h-screen"
@@ -91,14 +181,20 @@ function Component() {
           featuresScrollRef={featuresScrollRef}
           selectedFeature={selectedFeature}
           setSelectedFeature={setSelectedFeature}
-          scrollToFeature={scrollToFeature}
+          progress={featuresProgress.progress}
+          onSelect={handleFeatureSelect}
+          onPause={featuresProgress.pause}
+          onResume={featuresProgress.resume}
         />
         <SlashSeparator />
         <DetailsSection
           detailsScrollRef={detailsScrollRef}
           selectedDetail={selectedDetail}
           setSelectedDetail={setSelectedDetail}
-          scrollToDetail={scrollToDetail}
+          progress={detailsProgress.progress}
+          onSelect={handleDetailSelect}
+          onPause={detailsProgress.pause}
+          onResume={detailsProgress.resume}
         />
         <SlashSeparator />
         <GitHubOpenSource />