marquee changes

Author: tannerlinsley

src/components/DocsLayout.tsx

@@ -33,32 +33,38 @@ function MobilePartnersStrip({
 }) {
   const innerRef = React.useRef<HTMLDivElement>(null)
   const [isHovered, setIsHovered] = React.useState(false)
+  const scrollPositionRef = React.useRef(0)
+  const hasStartedRef = React.useRef(false)
 
   React.useEffect(() => {
     const inner = innerRef.current
     if (!inner) return
 
     let animationId: number
     let timeoutId: ReturnType<typeof setTimeout>
-    let scrollPosition = 0
-    const scrollSpeed = 0.08 // pixels per frame - very slow
-    const startDelay = 4000 // wait 4 seconds before starting
+    const scrollSpeed = 0.15 // pixels per frame
+    const startDelay = 4000 // wait 4 seconds before starting (first time only)
 
     const animate = () => {
       if (!isHovered && inner) {
-        scrollPosition += scrollSpeed
+        scrollPositionRef.current += scrollSpeed
         // Reset when we've scrolled past the first set
-        if (scrollPosition >= inner.scrollWidth / 2) {
-          scrollPosition = 0
+        if (scrollPositionRef.current >= inner.scrollWidth / 2) {
+          scrollPositionRef.current = 0
         }
-        inner.style.transform = `translateX(${-scrollPosition}px)`
+        inner.style.transform = `translateX(${-scrollPositionRef.current}px)`
       }
       animationId = requestAnimationFrame(animate)
     }
 
-    timeoutId = setTimeout(() => {
+    if (!hasStartedRef.current) {
+      timeoutId = setTimeout(() => {
+        hasStartedRef.current = true
+        animationId = requestAnimationFrame(animate)
+      }, startDelay)
+    } else {
       animationId = requestAnimationFrame(animate)
-    }, startDelay)
+    }
 
     return () => {
       clearTimeout(timeoutId)

src/components/TrustedByMarquee.tsx

@@ -25,23 +25,23 @@ type TrustedByMarqueeProps = {
 
 export function TrustedByMarquee({
   brands,
-  speed = 40,
+  speed = 150,
   className,
 }: TrustedByMarqueeProps) {
   const animationDuration = `${(brands.length * 200) / speed}s`
 
   return (
-    <div className={twMerge('overflow-hidden w-full', className)}>
+    <div className={twMerge('overflow-hidden w-full group', className)}>
       <div className="uppercase tracking-wider text-sm font-semibold text-center text-gray-400 mb-6">
         Trusted in Production by
       </div>
       <div className="relative w-full">
         {/* Left fade */}
-        <div className="absolute left-0 top-0 bottom-0 w-16 bg-gradient-to-r from-white dark:from-black to-transparent z-10 pointer-events-none" />
+        <div className="absolute left-0 top-0 bottom-0 w-16 bg-gradient-to-r from-[#fdfdfd] dark:from-[#0a0a0a] to-transparent z-10 pointer-events-none" />
         {/* Right fade */}
-        <div className="absolute right-0 top-0 bottom-0 w-16 bg-gradient-to-l from-white dark:from-black to-transparent z-10 pointer-events-none" />
+        <div className="absolute right-0 top-0 bottom-0 w-16 bg-gradient-to-l from-[#fdfdfd] dark:from-[#0a0a0a] to-transparent z-10 pointer-events-none" />
         <div
-          className="flex gap-8 items-center whitespace-nowrap will-change-transform animate-[marquee_linear_infinite]"
+          className="flex gap-8 items-center whitespace-nowrap will-change-transform animate-[marquee_linear_infinite] group-hover:[animation-play-state:paused]"
           style={{
             animationDuration,
           }}