From b4ff605c88056f092174df9ace1f6884e367b74b Mon Sep 17 00:00:00 2001
From: Alfarish Fizikri <alfarish@evermos.com>
Date: Wed, 23 Jul 2025 07:33:44 +0700
Subject: [PATCH 1/4] Create <RollingGallery /> component

---
 src/constants/Categories.ts                   |   3 +-
 src/constants/Components.ts                   |   1 +
 .../code/Components/rollingGalleryCode.ts     |  26 ++
 .../RollingGallery/RollingGallery.vue         | 392 ++++++++++++++++++
 src/demo/Components/RollingGalleryDemo.vue    |  94 +++++
 5 files changed, 515 insertions(+), 1 deletion(-)
 create mode 100644 src/constants/code/Components/rollingGalleryCode.ts
 create mode 100644 src/content/Components/RollingGallery/RollingGallery.vue
 create mode 100644 src/demo/Components/RollingGalleryDemo.vue

diff --git a/src/constants/Categories.ts b/src/constants/Categories.ts
index ac41eb1..9d04b2b 100644
--- a/src/constants/Categories.ts
+++ b/src/constants/Categories.ts
@@ -80,7 +80,8 @@ export const CATEGORIES = [
       'Flowing Menu',
       'Elastic Slider',
       'Stack',
-      'Chroma Grid'
+      'Chroma Grid',
+      'Rolling Gallery'
     ]
   },
   {
diff --git a/src/constants/Components.ts b/src/constants/Components.ts
index d543dc2..32129c0 100644
--- a/src/constants/Components.ts
+++ b/src/constants/Components.ts
@@ -69,6 +69,7 @@ const components = {
   'tilted-card': () => import('../demo/Components/TiltedCardDemo.vue'),
   'stack': () => import('../demo/Components/StackDemo.vue'),
   'chroma-grid': () => import('../demo/Components/ChromaGridDemo.vue'),
+  'rolling-gallery': () => import('../demo/Components/RollingGalleryDemo.vue'),
 };
 
 const backgrounds = {
diff --git a/src/constants/code/Components/rollingGalleryCode.ts b/src/constants/code/Components/rollingGalleryCode.ts
new file mode 100644
index 0000000..19b8085
--- /dev/null
+++ b/src/constants/code/Components/rollingGalleryCode.ts
@@ -0,0 +1,26 @@
+import code from '@content/Components/RollingGallery/RollingGallery.vue?raw';
+import { createCodeObject } from '@/types/code.ts';
+
+export const rollingGallery = createCodeObject(code, 'Components/RollingGallery', {
+  installation: `npm install motion-v`,
+  usage: `<template>
+  <RollingGallery
+    :autoplay="true"
+    :pause-on-hover="true"
+    :images="customImages"
+  />
+</template>
+
+<script setup lang="ts">
+  import RollingGallery from "./RollingGallery.vue";
+
+  const customImages = [
+    "https://images.unsplash.com/photo-1528181304800-259b08848526?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    "https://images.unsplash.com/photo-1506665531195-3566af2b4dfa?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    "https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?q=80&w=3456&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    "https://images.unsplash.com/photo-1495103033382-fe343886b671?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    "https://images.unsplash.com/photo-1506781961370-37a89d6b3095?q=80&w=3264&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    // Add more images as needed
+  ];
+</script>`
+});
diff --git a/src/content/Components/RollingGallery/RollingGallery.vue b/src/content/Components/RollingGallery/RollingGallery.vue
new file mode 100644
index 0000000..33fef45
--- /dev/null
+++ b/src/content/Components/RollingGallery/RollingGallery.vue
@@ -0,0 +1,392 @@
+<template>
+  <div class="gallery-container">
+    <div class="gallery-gradient gallery-gradient-left"></div>
+    <div class="gallery-gradient gallery-gradient-right"></div>
+    <div class="gallery-content">
+      <Motion
+        tag="div"
+        class="gallery-track"
+        :style="trackStyle"
+        :animate="animateProps"
+        :transition="springTransition"
+        @mouseenter="handleMouseEnter"
+        @mouseleave="handleMouseLeave"
+        @mousedown="handleMouseDown"
+      >
+        <div v-for="(url, i) in displayImages" :key="`gallery-${i}`" class="gallery-item" :style="getItemStyle(i)">
+          <img :src="url" alt="gallery" class="gallery-img" loading="lazy" decoding="async" />
+        </div>
+      </Motion>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue';
+import { Motion } from 'motion-v';
+
+interface RollingGalleryProps {
+  autoplay?: boolean;
+  pauseOnHover?: boolean;
+  images?: string[];
+}
+
+const props = withDefaults(defineProps<RollingGalleryProps>(), {
+  autoplay: false,
+  pauseOnHover: false,
+  images: () => []
+});
+
+const DEFAULT_IMAGES = shallowRef([
+  'https://images.unsplash.com/photo-1528181304800-259b08848526?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  'https://images.unsplash.com/photo-1506665531195-3566af2b4dfa?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+]);
+
+const isScreenSizeSm = ref(false);
+const rotateYValue = ref(0);
+const autoplayInterval = ref<number | null>(null);
+const autoplayTimeout = ref<number | null>(null);
+const isDragging = ref(false);
+const isHovered = ref(false);
+const dragStartX = ref(0);
+const dragStartRotation = ref(0);
+
+const displayImages = computed(() => {
+  const sourceImages = props.images.length > 0 ? props.images : DEFAULT_IMAGES.value;
+  const maxImages = REFERENCE_FACE_COUNT_SPACING;
+
+  if (sourceImages.length >= maxImages) {
+    return sourceImages;
+  }
+
+  const repeatedImages = [];
+  const repetitions = Math.ceil(maxImages / sourceImages.length);
+
+  for (let i = 0; i < repetitions; i++) {
+    repeatedImages.push(...sourceImages);
+  }
+
+  return repeatedImages.slice(0, maxImages);
+});
+
+const cylinderWidth = computed(() => (isScreenSizeSm.value ? 1100 : 1800));
+const faceWidth = computed(() => {
+  return (cylinderWidth.value / REFERENCE_FACE_COUNT_SIZING) * 1.5;
+});
+const radius = computed(() => cylinderWidth.value / (2 * Math.PI));
+
+const DRAG_FACTOR = Object.freeze(0.15);
+const MOMENTUM_FACTOR = Object.freeze(0.05);
+const AUTOPLAY_INTERVAL = Object.freeze(2000);
+const DRAG_RESTART_DELAY = Object.freeze(1500);
+const HOVER_RESTART_DELAY = Object.freeze(100);
+const HOVER_DEBOUNCE_DELAY = Object.freeze(50);
+const REFERENCE_FACE_COUNT_SPACING = Object.freeze(10);
+const REFERENCE_FACE_COUNT_SIZING = Object.freeze(10);
+
+const trackStyle = computed(() => ({
+  width: `${cylinderWidth.value}px`,
+  transformStyle: 'preserve-3d' as const
+}));
+
+const animateProps = computed(() => ({
+  rotateY: rotateYValue.value
+}));
+
+const springTransition = computed(() => {
+  if (isDragging.value) {
+    return { duration: 0 };
+  } else {
+    return {
+      duration: 0.8,
+      ease: 'easeOut' as const
+    };
+  }
+});
+
+const styleCache = new Map<string, { width: string; transform: string }>();
+
+const getItemStyle = (index: number) => {
+  // Create a cache key based on current values
+  const cacheKey = `${index}-${faceWidth.value}-${radius.value}`;
+
+  // Return a cached result if available
+  if (styleCache.has(cacheKey)) {
+    return styleCache.get(cacheKey)!;
+  }
+
+  // Calculate and cache new style
+  const style = {
+    width: `${faceWidth.value}px`,
+    transform: `rotateY(${index * (360 / REFERENCE_FACE_COUNT_SPACING)}deg) translateZ(${radius.value}px)`
+  };
+
+  // Limit cache size to prevent memory leaks
+  if (styleCache.size > 50) {
+    styleCache.clear();
+  }
+
+  styleCache.set(cacheKey, style);
+  return style;
+};
+
+let resizeTimeout: number | null = null;
+let hoverTimeout: number | null = null;
+
+function checkScreenSize() {
+  isScreenSizeSm.value = window.innerWidth <= 640;
+}
+
+function throttledResize() {
+  if (resizeTimeout) return;
+  resizeTimeout = setTimeout(() => {
+    checkScreenSize();
+    resizeTimeout = null;
+  }, 100);
+}
+
+function handleMouseDown(event: MouseEvent) {
+  isDragging.value = true;
+  dragStartX.value = event.clientX;
+  dragStartRotation.value = rotateYValue.value;
+
+  stopAutoplay();
+
+  document.addEventListener('mousemove', handleMouseMove, { passive: true });
+  document.addEventListener('mouseup', handleMouseUp, { passive: true });
+  event.preventDefault();
+}
+
+function handleMouseMove(event: MouseEvent) {
+  if (!isDragging.value) return;
+
+  const deltaX = event.clientX - dragStartX.value;
+  const rotationDelta = deltaX * DRAG_FACTOR;
+  rotateYValue.value = dragStartRotation.value + rotationDelta;
+}
+
+function handleMouseUp(event: MouseEvent) {
+  if (!isDragging.value) return;
+
+  isDragging.value = false;
+
+  const deltaX = event.clientX - dragStartX.value;
+  const velocity = deltaX * MOMENTUM_FACTOR;
+  rotateYValue.value += velocity;
+
+  document.removeEventListener('mousemove', handleMouseMove);
+  document.removeEventListener('mouseup', handleMouseUp);
+
+  stopAutoplay();
+
+  if (props.autoplay) {
+    if (props.pauseOnHover && isHovered.value) {
+      return;
+    } else {
+      autoplayTimeout.value = setTimeout(() => {
+        if (!isDragging.value && (!props.pauseOnHover || !isHovered.value)) {
+          startAutoplay();
+        }
+      }, DRAG_RESTART_DELAY);
+    }
+  }
+}
+
+function startAutoplay() {
+  if (!props.autoplay || isDragging.value || (props.pauseOnHover && isHovered.value)) return;
+
+  stopAutoplay();
+
+  autoplayInterval.value = setInterval(() => {
+    if (!isDragging.value && (!props.pauseOnHover || !isHovered.value)) {
+      rotateYValue.value -= 360 / REFERENCE_FACE_COUNT_SPACING;
+    }
+  }, AUTOPLAY_INTERVAL);
+}
+
+function stopAutoplay() {
+  if (autoplayInterval.value) {
+    clearInterval(autoplayInterval.value);
+    autoplayInterval.value = null;
+  }
+  if (autoplayTimeout.value) {
+    clearTimeout(autoplayTimeout.value);
+    autoplayTimeout.value = null;
+  }
+}
+
+function handleMouseEnter() {
+  if (hoverTimeout) {
+    clearTimeout(hoverTimeout);
+    hoverTimeout = null;
+  }
+
+  hoverTimeout = setTimeout(() => {
+    isHovered.value = true;
+
+    if (props.autoplay && props.pauseOnHover && !isDragging.value) {
+      stopAutoplay();
+    }
+  }, HOVER_DEBOUNCE_DELAY);
+}
+
+function handleMouseLeave() {
+  if (hoverTimeout) {
+    clearTimeout(hoverTimeout);
+    hoverTimeout = null;
+  }
+
+  hoverTimeout = setTimeout(() => {
+    isHovered.value = false;
+
+    if (props.autoplay && props.pauseOnHover && !isDragging.value) {
+      stopAutoplay();
+      autoplayTimeout.value = setTimeout(() => {
+        if (props.autoplay && !isDragging.value && !isHovered.value) {
+          startAutoplay();
+        }
+      }, HOVER_RESTART_DELAY);
+    }
+  }, HOVER_DEBOUNCE_DELAY);
+}
+
+onMounted(() => {
+  checkScreenSize();
+  window.addEventListener('resize', throttledResize, { passive: true });
+
+  if (props.autoplay) {
+    startAutoplay();
+  }
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', throttledResize);
+  document.removeEventListener('mousemove', handleMouseMove);
+  document.removeEventListener('mouseup', handleMouseUp);
+  stopAutoplay();
+  if (resizeTimeout) {
+    clearTimeout(resizeTimeout);
+  }
+  if (hoverTimeout) {
+    clearTimeout(hoverTimeout);
+    hoverTimeout = null;
+  }
+});
+
+watch(
+  () => props.autoplay,
+  newVal => {
+    stopAutoplay();
+    if (newVal && !isDragging.value && (!props.pauseOnHover || !isHovered.value)) {
+      autoplayTimeout.value = setTimeout(() => {
+        if (!isDragging.value && (!props.pauseOnHover || !isHovered.value)) {
+          startAutoplay();
+        }
+      }, HOVER_RESTART_DELAY);
+    }
+  }
+);
+
+watch(
+  () => props.pauseOnHover,
+  () => {
+    if (props.autoplay) {
+      stopAutoplay();
+      if (!isDragging.value && (!props.pauseOnHover || !isHovered.value)) {
+        startAutoplay();
+      }
+    }
+  }
+);
+</script>
+
+<style scoped>
+.gallery-container {
+  position: relative;
+  height: 500px;
+  width: 100%;
+  overflow: hidden;
+}
+
+.gallery-gradient {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 48px;
+  z-index: 10;
+}
+
+.gallery-gradient-left {
+  left: 0;
+  background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, #060010 100%);
+}
+
+.gallery-gradient-right {
+  right: 0;
+  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #060010 100%);
+}
+
+.gallery-content {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  perspective: 1000px;
+  transform-style: preserve-3d;
+}
+
+.gallery-track {
+  display: flex;
+  height: auto;
+  min-height: 200px;
+  justify-content: center;
+  align-items: center;
+  cursor: grab;
+  transform-style: preserve-3d;
+  width: 100%;
+  user-select: none;
+  will-change: transform;
+  pointer-events: auto;
+}
+
+.gallery-track:active {
+  cursor: grabbing;
+}
+
+.gallery-item {
+  position: absolute;
+  display: flex;
+  height: fit-content;
+  align-items: center;
+  justify-content: center;
+  padding: 8%;
+  backface-visibility: hidden;
+  will-change: transform;
+  pointer-events: none;
+}
+
+.gallery-img {
+  pointer-events: auto;
+  height: 120px;
+  width: 300px;
+  border-radius: 15px;
+  border: 3px solid #fff;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+  will-change: transform;
+}
+
+.gallery-item:hover .gallery-img {
+  transform: scale(1.05);
+}
+
+@media (max-width: 768px) {
+  .gallery-item {
+    padding: 6%;
+  }
+  .gallery-img {
+    height: 100px;
+    width: 220px;
+  }
+}
+</style>
diff --git a/src/demo/Components/RollingGalleryDemo.vue b/src/demo/Components/RollingGalleryDemo.vue
new file mode 100644
index 0000000..60a27d1
--- /dev/null
+++ b/src/demo/Components/RollingGalleryDemo.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="rolling-gallery-demo">
+    <TabbedLayout>
+      <template #preview>
+        <div class="demo-container" style="background: #060010; overflow: hidden; position: relative; min-height: 500px;">
+          <div class="flex h-full max-w-[600px] items-center justify-center flex-col">
+            <h2 class="mt-6 text-center absolute font-black top-4 md:top-4 whitespace-nowrap text-2xl md:text-5xl text-white">
+              Your trip to Thailand.
+            </h2>
+            <RollingGallery
+              :autoplay="autoplay"
+              :pause-on-hover="pauseOnHover"
+              :images="customImages.length > 0 ? customImages : undefined"
+            />
+          </div>
+        </div>
+
+        <Customize>
+          <PreviewSwitch
+            title="Autoplay"
+            v-model="autoplay"
+          />
+
+          <PreviewSwitch
+            title="Pause on Hover"
+            v-model="pauseOnHover"
+          />
+        </Customize>
+
+        <PropTable :data="propData" />
+        <Dependencies :dependency-list="['motion-v']" />
+      </template>
+
+      <template #code>
+        <CodeExample :code-object="rollingGallery" />
+      </template>
+
+      <template #cli>
+        <CliInstallation :command="rollingGallery.cli" />
+      </template>
+    </TabbedLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import TabbedLayout from '@/components/common/TabbedLayout.vue'
+import PropTable from '@/components/common/PropTable.vue'
+import Dependencies from '@/components/code/Dependencies.vue'
+import CliInstallation from '@/components/code/CliInstallation.vue'
+import CodeExample from '@/components/code/CodeExample.vue'
+import Customize from '@/components/common/Customize.vue'
+import PreviewSwitch from '@/components/common/PreviewSwitch.vue'
+import RollingGallery from '@/content/Components/RollingGallery/RollingGallery.vue'
+import { rollingGallery } from '@/constants/code/Components/rollingGalleryCode'
+
+const autoplay = ref(true)
+const pauseOnHover = ref(true)
+const customImages = ref<string[]>([])
+
+const propData = [
+  {
+    name: 'autoplay',
+    type: 'boolean',
+    default: 'false',
+    description: 'Controls the autoplay toggle of the carousel. When turned on, it rotates and loops infinitely.',
+  },
+  {
+    name: 'pauseOnHover',
+    type: 'boolean',
+    default: 'false',
+    description: 'Allows the carousel to be paused on hover when autoplay is turned on.',
+  },
+  {
+    name: 'images',
+    type: 'string[]',
+    default: '[]',
+    description: 'Array of image URLs to display in the gallery.',
+  },
+]
+</script>
+
+<style scoped>
+.rolling-gallery-demo {
+  width: 100%;
+}
+
+.demo-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+</style>

From 39c9820182b40d054ef15f197de28e3f8a89240f Mon Sep 17 00:00:00 2001
From: Alfarish Fizikri <alfarish@evermos.com>
Date: Thu, 24 Jul 2025 05:07:27 +0700
Subject: [PATCH 2/4] refactor(style): utilize tailwind instead of CSS

---
 .../RollingGallery/RollingGallery.vue         | 117 +++---------------
 src/demo/Components/RollingGalleryDemo.vue    |  83 ++++++-------
 2 files changed, 54 insertions(+), 146 deletions(-)

diff --git a/src/content/Components/RollingGallery/RollingGallery.vue b/src/content/Components/RollingGallery/RollingGallery.vue
index 33fef45..b19d145 100644
--- a/src/content/Components/RollingGallery/RollingGallery.vue
+++ b/src/content/Components/RollingGallery/RollingGallery.vue
@@ -1,11 +1,12 @@
 <template>
-  <div class="gallery-container">
-    <div class="gallery-gradient gallery-gradient-left"></div>
-    <div class="gallery-gradient gallery-gradient-right"></div>
-    <div class="gallery-content">
+  <div class="relative h-[500px] w-full overflow-hidden">
+    <div class="absolute top-0 left-0 h-full w-12 z-10 bg-gradient-to-l from-transparent to-[#0b0b0b]" />
+    <div class="absolute top-0 right-0 h-full w-12 z-10 bg-gradient-to-r from-transparent to-[#0b0b0b]" />
+
+    <div class="flex h-full items-center justify-center [perspective:1000px] [transform-style:preserve-3d]">
       <Motion
         tag="div"
-        class="gallery-track"
+        class="flex min-h-[200px] items-center justify-center w-full cursor-grab select-none will-change-transform [transform-style:preserve-3d] active:cursor-grabbing"
         :style="trackStyle"
         :animate="animateProps"
         :transition="springTransition"
@@ -13,8 +14,19 @@
         @mouseleave="handleMouseLeave"
         @mousedown="handleMouseDown"
       >
-        <div v-for="(url, i) in displayImages" :key="`gallery-${i}`" class="gallery-item" :style="getItemStyle(i)">
-          <img :src="url" alt="gallery" class="gallery-img" loading="lazy" decoding="async" />
+        <div
+          v-for="(url, i) in displayImages"
+          :key="`gallery-${i}`"
+          :style="getItemStyle(i)"
+          class="absolute flex items-center justify-center px-[8%] [backface-visibility:hidden] will-change-transform pointer-events-none"
+        >
+          <img
+            :src="url"
+            alt="gallery"
+            loading="lazy"
+            decoding="async"
+            class="pointer-events-auto h-[120px] w-[300px] rounded-[15px] border-[3px] border-white object-cover transition-transform duration-300 ease-in-out will-change-transform hover:scale-105"
+          />
         </div>
       </Motion>
     </div>
@@ -299,94 +311,3 @@ watch(
   }
 );
 </script>
-
-<style scoped>
-.gallery-container {
-  position: relative;
-  height: 500px;
-  width: 100%;
-  overflow: hidden;
-}
-
-.gallery-gradient {
-  position: absolute;
-  top: 0;
-  height: 100%;
-  width: 48px;
-  z-index: 10;
-}
-
-.gallery-gradient-left {
-  left: 0;
-  background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, #060010 100%);
-}
-
-.gallery-gradient-right {
-  right: 0;
-  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #060010 100%);
-}
-
-.gallery-content {
-  display: flex;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-  perspective: 1000px;
-  transform-style: preserve-3d;
-}
-
-.gallery-track {
-  display: flex;
-  height: auto;
-  min-height: 200px;
-  justify-content: center;
-  align-items: center;
-  cursor: grab;
-  transform-style: preserve-3d;
-  width: 100%;
-  user-select: none;
-  will-change: transform;
-  pointer-events: auto;
-}
-
-.gallery-track:active {
-  cursor: grabbing;
-}
-
-.gallery-item {
-  position: absolute;
-  display: flex;
-  height: fit-content;
-  align-items: center;
-  justify-content: center;
-  padding: 8%;
-  backface-visibility: hidden;
-  will-change: transform;
-  pointer-events: none;
-}
-
-.gallery-img {
-  pointer-events: auto;
-  height: 120px;
-  width: 300px;
-  border-radius: 15px;
-  border: 3px solid #fff;
-  object-fit: cover;
-  transition: transform 0.3s ease;
-  will-change: transform;
-}
-
-.gallery-item:hover .gallery-img {
-  transform: scale(1.05);
-}
-
-@media (max-width: 768px) {
-  .gallery-item {
-    padding: 6%;
-  }
-  .gallery-img {
-    height: 100px;
-    width: 220px;
-  }
-}
-</style>
diff --git a/src/demo/Components/RollingGalleryDemo.vue b/src/demo/Components/RollingGalleryDemo.vue
index 60a27d1..93e2d11 100644
--- a/src/demo/Components/RollingGalleryDemo.vue
+++ b/src/demo/Components/RollingGalleryDemo.vue
@@ -1,45 +1,45 @@
 <template>
-  <div class="rolling-gallery-demo">
-    <TabbedLayout>
-      <template #preview>
-        <div class="demo-container" style="background: #060010; overflow: hidden; position: relative; min-height: 500px;">
-          <div class="flex h-full max-w-[600px] items-center justify-center flex-col">
-            <h2 class="mt-6 text-center absolute font-black top-4 md:top-4 whitespace-nowrap text-2xl md:text-5xl text-white">
-              Your trip to Thailand.
-            </h2>
-            <RollingGallery
-              :autoplay="autoplay"
-              :pause-on-hover="pauseOnHover"
-              :images="customImages.length > 0 ? customImages : undefined"
-            />
-          </div>
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container relative min-h-[500px] overflow-hidden">
+        <div class="flex h-full max-w-[600px] flex-col items-center justify-center">
+          <h2
+            class="absolute top-4 mt-6 whitespace-nowrap text-center font-black text-2xl text-white md:top-4 md:text-5xl"
+          >
+            Your trip to Thailand.
+          </h2>
+          <RollingGallery
+            :autoplay="autoplay"
+            :pause-on-hover="pauseOnHover"
+            :images="customImages.length > 0 ? customImages : undefined"
+          />
         </div>
+      </div>
 
-        <Customize>
-          <PreviewSwitch
-            title="Autoplay"
-            v-model="autoplay"
-          />
+      <Customize>
+        <PreviewSwitch
+          title="Autoplay"
+          v-model="autoplay"
+        />
 
-          <PreviewSwitch
-            title="Pause on Hover"
-            v-model="pauseOnHover"
-          />
-        </Customize>
+        <PreviewSwitch
+          title="Pause on Hover"
+          v-model="pauseOnHover"
+        />
+      </Customize>
 
-        <PropTable :data="propData" />
-        <Dependencies :dependency-list="['motion-v']" />
-      </template>
+      <PropTable :data="propData" />
+      <Dependencies :dependency-list="['motion-v']" />
+    </template>
 
-      <template #code>
-        <CodeExample :code-object="rollingGallery" />
-      </template>
+    <template #code>
+      <CodeExample :code-object="rollingGallery" />
+    </template>
 
-      <template #cli>
-        <CliInstallation :command="rollingGallery.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
+    <template #cli>
+      <CliInstallation :command="rollingGallery.cli" />
+    </template>
+  </TabbedLayout>
 </template>
 
 <script setup lang="ts">
@@ -79,16 +79,3 @@ const propData = [
   },
 ]
 </script>
-
-<style scoped>
-.rolling-gallery-demo {
-  width: 100%;
-}
-
-.demo-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-}
-</style>

From a83423a5e272c275247c1853b9909e807b1a8dfb Mon Sep 17 00:00:00 2001
From: Alfarish Fizikri <alfarish@evermos.com>
Date: Thu, 24 Jul 2025 05:08:13 +0700
Subject: [PATCH 3/4] fix: set default images back to 10

---
 .../Components/RollingGallery/RollingGallery.vue   | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/content/Components/RollingGallery/RollingGallery.vue b/src/content/Components/RollingGallery/RollingGallery.vue
index b19d145..64fc2eb 100644
--- a/src/content/Components/RollingGallery/RollingGallery.vue
+++ b/src/content/Components/RollingGallery/RollingGallery.vue
@@ -50,9 +50,17 @@ const props = withDefaults(defineProps<RollingGalleryProps>(), {
 });
 
 const DEFAULT_IMAGES = shallowRef([
-  'https://images.unsplash.com/photo-1528181304800-259b08848526?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-  'https://images.unsplash.com/photo-1506665531195-3566af2b4dfa?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-]);
+  "https://images.unsplash.com/photo-1528181304800-259b08848526?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1506665531195-3566af2b4dfa?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?q=80&w=3456&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1495103033382-fe343886b671?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1506781961370-37a89d6b3095?q=80&w=3264&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1599576838688-8a6c11263108?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1494094892896-7f14a4433b7a?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://plus.unsplash.com/premium_photo-1664910706524-e783eed89e71?q=80&w=3869&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1503788311183-fa3bf9c4bc32?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  "https://images.unsplash.com/photo-1585970480901-90d6bb2a48b5?q=80&w=3774&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+])
 
 const isScreenSizeSm = ref(false);
 const rotateYValue = ref(0);

From 00de9ae7b74f7ea8104c460adaa15c385628a13b Mon Sep 17 00:00:00 2001
From: Alfarish Fizikri <alfarish@evermos.com>
Date: Thu, 24 Jul 2025 05:09:17 +0700
Subject: [PATCH 4/4] chore: clean comment

---
 src/content/Components/RollingGallery/RollingGallery.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/content/Components/RollingGallery/RollingGallery.vue b/src/content/Components/RollingGallery/RollingGallery.vue
index 64fc2eb..ab020f7 100644
--- a/src/content/Components/RollingGallery/RollingGallery.vue
+++ b/src/content/Components/RollingGallery/RollingGallery.vue
@@ -127,21 +127,17 @@ const springTransition = computed(() => {
 const styleCache = new Map<string, { width: string; transform: string }>();
 
 const getItemStyle = (index: number) => {
-  // Create a cache key based on current values
   const cacheKey = `${index}-${faceWidth.value}-${radius.value}`;
 
-  // Return a cached result if available
   if (styleCache.has(cacheKey)) {
     return styleCache.get(cacheKey)!;
   }
 
-  // Calculate and cache new style
   const style = {
     width: `${faceWidth.value}px`,
     transform: `rotateY(${index * (360 / REFERENCE_FACE_COUNT_SPACING)}deg) translateZ(${radius.value}px)`
   };
 
-  // Limit cache size to prevent memory leaks
   if (styleCache.size > 50) {
     styleCache.clear();
   }