Reverse carousel slide direction on prev arrow

src/components/home/FeaturedMarket.tsx

@@ -122,6 +122,7 @@ export default function FeaturedMarket({
   totalItems: number;
 }) {
   const trendingIndex = useStore((s) => s.trendingIndex);
+  const trendingDirection = useStore((s) => s.trendingDirection);
   const { data: rawPriceHistory } = usePriceHistory(market.marketId);
   const priceHistory =
     rawPriceHistory && rawPriceHistory.length > 0
@@ -138,13 +139,15 @@ export default function FeaturedMarket({
   const handlePrev = useCallback(() => {
     useStore.setState({
       trendingIndex: (trendingIndex - 1 + totalItems) % totalItems,
+      trendingDirection: "prev",
       trendingAutoAdvancePausedUntil: Date.now() + MANUAL_ADVANCE_PAUSE_MS,
     });
   }, [trendingIndex, totalItems]);
 
   const handleNext = useCallback(() => {
     useStore.setState({
       trendingIndex: (trendingIndex + 1) % totalItems,
+      trendingDirection: "next",
       trendingAutoAdvancePausedUntil: Date.now() + MANUAL_ADVANCE_PAUSE_MS,
     });
   }, [trendingIndex, totalItems]);
@@ -198,7 +201,7 @@ export default function FeaturedMarket({
           place so the nav arrows never jump. */}
       <div
         key={market.marketId}
-        className="animate-carousel-slide flex min-h-0 flex-1 flex-col"
+        className={`${trendingDirection === "prev" ? "animate-carousel-slide-reverse" : "animate-carousel-slide"} flex min-h-0 flex-1 flex-col`}
       >
         <button
           type="button"
@@ -256,6 +259,7 @@ export function FeaturedGroupCard({
   totalItems: number;
 }) {
   const trendingIndex = useStore((s) => s.trendingIndex);
+  const trendingDirection = useStore((s) => s.trendingDirection);
 
   const blocksLeft = group.expiryHeight - group.currentHeight;
   const timeLeft = blocksLeft > 0 ? formatTimeRemaining(blocksLeft) : "Expired";
@@ -267,13 +271,15 @@ export function FeaturedGroupCard({
   const handlePrev = useCallback(() => {
     useStore.setState({
       trendingIndex: (trendingIndex - 1 + totalItems) % totalItems,
+      trendingDirection: "prev",
       trendingAutoAdvancePausedUntil: Date.now() + MANUAL_ADVANCE_PAUSE_MS,
     });
   }, [trendingIndex, totalItems]);
 
   const handleNext = useCallback(() => {
     useStore.setState({
       trendingIndex: (trendingIndex + 1) % totalItems,
+      trendingDirection: "next",
       trendingAutoAdvancePausedUntil: Date.now() + MANUAL_ADVANCE_PAUSE_MS,
     });
   }, [trendingIndex, totalItems]);
@@ -309,7 +315,7 @@ export function FeaturedGroupCard({
       {/* Sliding body — see FeaturedMarket for the same pattern. */}
       <div
         key={group.id}
-        className="animate-carousel-slide flex min-h-0 flex-1 flex-col"
+        className={`${trendingDirection === "prev" ? "animate-carousel-slide-reverse" : "animate-carousel-slide"} flex min-h-0 flex-1 flex-col`}
       >
         {/* Title */}
         <button

src/components/home/HomePage.tsx

@@ -1050,6 +1050,7 @@ function TrendingHomeView({ markets }: { markets: Market[] }) {
     const id = window.setTimeout(() => {
       useStore.setState((s) => ({
         trendingIndex: (s.trendingIndex + 1) % total,
+        trendingDirection: "next",
       }));
     }, delay);
     return () => clearTimeout(id);

src/store/index.ts

@@ -49,6 +49,11 @@ export interface NavigationSlice {
   categoryFilter: "all" | "live" | "ending-soon";
   search: string;
   trendingIndex: number;
+  /** Direction of the most recent trending-carousel advance. Drives
+   *  the slide animation: "next" enters from the right, "prev" from
+   *  the left. Auto-advance and the right arrow set "next"; the
+   *  left arrow sets "prev". */
+  trendingDirection: "next" | "prev";
   /** Unix ms. While `Date.now()` is below this value the trending-
    *  carousel auto-advance skips its tick. Set whenever the user
    *  clicks the prev/next arrows so manual browsing isn't yanked
@@ -332,6 +337,7 @@ export const useStore = create<StoreState>()(() => ({
   categoryFilter: "all",
   search: "",
   trendingIndex: 0,
+  trendingDirection: "next",
   trendingAutoAdvancePausedUntil: 0,
   userMenuOpen: false,
   searchOpen: false,

src/style.css

@@ -653,11 +653,26 @@ button:focus-visible,
     opacity: 1;
   }
 }
+@keyframes deadcat-carousel-slide-reverse {
+  0% {
+    transform: translateX(-80%);
+    opacity: 0.3;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
 .animate-carousel-slide {
   animation: deadcat-carousel-slide 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
 }
+.animate-carousel-slide-reverse {
+  animation: deadcat-carousel-slide-reverse 360ms cubic-bezier(0.16, 1, 0.3, 1)
+    both;
+}
 @media (prefers-reduced-motion: reduce) {
-  .animate-carousel-slide {
+  .animate-carousel-slide,
+  .animate-carousel-slide-reverse {
     animation: none;
   }
 }