make 2 directions

src/components/magicui/infinite-moving-cards.tsx

@@ -62,12 +62,9 @@ export const InfiniteMovingCards = ({
         ref={scrollerRef}
         className={cn(
           "flex min-w-full shrink-0 gap-16 py-4 w-max flex-nowrap",
-          start && "animate-scroll",
-          pauseOnHover && "hover:[animation-play-state:paused]",
+          start && (direction === "left" ? "animate-scroll-left" : "animate-scroll-right"),
+          pauseOnHover && "hover:[animation-play-state:paused]"
         )}
-        style={{
-          "--animation-direction": direction === "left" ? "forwards" : "reverse",
-        } as React.CSSProperties}
       >
         {items.map((item, idx) => (
           <li className="relative flex-shrink-0" key={idx}>

src/pages/agents/AgentLogos.tsx

@@ -36,7 +36,7 @@ export const AgentLogos = () => {
   const rows = splitLogoRows();
 
   return (
-    <section className="relative isolate overflow-hidden bg-black py-4">
+    <section className="relative isolate overflow-hidden bg-[#121212] py-4">
       <div className="pointer-events-none absolute inset-y-0 left-0 w-32 bg-gradient-to-r from-black to-transparent" />
       <div className="pointer-events-none absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-black to-transparent" />
       <div className="flex w-full flex-col gap-1 px-0">
@@ -53,7 +53,7 @@ export const AgentLogos = () => {
               </div>
             ))}
             direction={idx % 2 === 0 ? "left" : "right"}
-            speed={idx % 2 === 0 ? "fast" : "normal"}
+            speed="slow"
             pauseOnHover={true}
             className="w-full"
           />

src/styles/tailwind.css

@@ -4,11 +4,24 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme {
-  --animate-scroll: scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite;
+  --animate-scroll-left: scroll-left var(--animation-duration, 40s) linear infinite;
+  --animate-scroll-right: scroll-right var(--animation-duration, 40s) linear infinite;
 
-  @keyframes scroll {
+  @keyframes scroll-left {
+    from {
+      transform: translateX(0);
+    }
     to {
-      transform: translate(calc(-50% - 0.5rem));
+      transform: translateX(calc(-50% - 0.5rem));
+    }
+  }
+
+  @keyframes scroll-right {
+    from {
+      transform: translateX(calc(-50% - 0.5rem));
+    }
+    to {
+      transform: translateX(0);
     }
   }