refactor(carousel): improvements to carousel animations and usability

JadenJSJ · JadenJSJ · commit 8cfdd55dad23 · 2026-02-13T08:57:34.000+08:00
diff --git a/components/features/ScholarshipCarousel.tsx b/components/features/ScholarshipCarousel.tsx
@@ -37,7 +37,7 @@ export function ScholarshipCarousel({ scholarships }: ScholarshipCarouselProps)
 
     return (
       <div
-        className={`bg-white/85 backdrop-blur-md border border-white/70 rounded-[1.4rem] p-4 transition-all duration-300 ${
+        className={`glass rounded-[1.4rem] p-4 transition-all duration-300 ${
           isActive
             ? "shadow-[0_20px_35px_-28px_rgba(15,23,42,0.55)] ring-1 ring-primary/10"
             : "shadow-[0_14px_30px_-28px_rgba(15,23,42,0.45)]"
diff --git a/components/ui/MobilePeekDeck.tsx b/components/ui/MobilePeekDeck.tsx
@@ -127,7 +127,8 @@ export function MobilePeekDeck<T>({
               slideRefs.current[index] = node;
             }}
             className={cn(
-              "snap-start shrink-0 w-[min(22rem,calc(100%-3.75rem))] scroll-ml-6 pb-4 md:scroll-ml-0 md:pb-0",
+              "snap-start snap-always shrink-0 w-[min(22rem,calc(100%-3.75rem))] scroll-ml-6 pb-4 md:scroll-ml-0 md:pb-0 transform-gpu transition duration-60 ease-out will-change-transform",
+              index === normalizedActiveIndex ? "scale-100 opacity-100" : "scale-[0.995] opacity-98",
               slideClassName
             )}
           >
@@ -143,7 +144,7 @@ export function MobilePeekDeck<T>({
               key={index}
               type="button"
               className={cn(
-                "h-2 rounded-full transition-all duration-300",
+                "h-2 rounded-full transition-all duration-60 ease-out",
                 normalizedActiveIndex === index ? "w-5 bg-primary" : "w-2 bg-primary/30"
               )}
               aria-label={getIndicatorAriaLabel?.(index + 1) ?? `Go to card ${index + 1}`}
