From a4a6c95612d338d4be3b8fa3e2d1118c25a15dd8 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Tue, 18 Nov 2025 14:43:53 +0100
Subject: [PATCH] refactor: add bidirectional scrolling support to
 InfiniteMovingCards component

- Added infinite-scroll-right keyframe animation with 50% translateX for right direction
- Updated InfiniteMovingCards to conditionally apply animate-infinite-scroll or animate-infinite-scroll-right based on direction prop
- Added animate-infinite-scroll-right class with linear infinite animation using CSS variable duration
---
 src/components/magicui/infinite-moving-cards.tsx |  5 ++++-
 src/styles/tailwind.css                          | 13 +++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/magicui/infinite-moving-cards.tsx b/src/components/magicui/infinite-moving-cards.tsx
index a07dc3d..cb32586 100644
--- a/src/components/magicui/infinite-moving-cards.tsx
+++ b/src/components/magicui/infinite-moving-cards.tsx
@@ -58,7 +58,10 @@ export const InfiniteMovingCards = ({
         ref={scrollerRef}
         className={cn(
           "flex w-max shrink-0 gap-16 py-4",
-          isReady && "animate-infinite-scroll",
+          isReady &&
+            (direction === "left"
+              ? "animate-infinite-scroll"
+              : "animate-infinite-scroll-right"),
           pauseOnHover && "hover:[animation-play-state:paused]"
         )}
       >
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index e2d9efc..21ec15c 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -238,7 +238,20 @@
   }
 }
 
+@keyframes infinite-scroll-right {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(50%);
+  }
+}
+
 .animate-infinite-scroll {
   animation: infinite-scroll var(--animation-duration, 40s) linear infinite;
   animation-direction: var(--animation-direction, forwards);
 }
+
+.animate-infinite-scroll-right {
+  animation: infinite-scroll-right var(--animation-duration, 40s) linear infinite;
+}