From e9809880933fe8369c0ae56f92bcd23f8a584353 Mon Sep 17 00:00:00 2001
From: Mohamed Eslam <60846785+MohamedEslam04@users.noreply.github.com>
Date: Mon, 5 Jan 2026 16:32:55 +0200
Subject: [PATCH 1/4] feat: add `pauseOnTouch` prop to Marquee component and
 update pnpm manager version.

---
 playgrounds/nuxt/app/pages/components/marquee.vue | 11 ++++-------
 src/runtime/components/Marquee.vue                |  9 ++++++++-
 src/theme/marquee.ts                              |  5 +++++
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/playgrounds/nuxt/app/pages/components/marquee.vue b/playgrounds/nuxt/app/pages/components/marquee.vue
index 763aa4d0e0..d9a43689b7 100644
--- a/playgrounds/nuxt/app/pages/components/marquee.vue
+++ b/playgrounds/nuxt/app/pages/components/marquee.vue
@@ -5,6 +5,7 @@ const orientations = Object.keys(theme.variants.orientation)
 
 const orientation = ref('horizontal' as keyof typeof theme.variants.orientation)
 const pauseOnHover = ref(false)
+const pauseOnTouch = ref(false)
 const reverse = ref(false)
 const overlay = ref(false)
 </script>
@@ -13,17 +14,13 @@ const overlay = ref(false)
   <Navbar>
     <USelect v-model="orientation" :items="orientations" />
     <USwitch v-model="pauseOnHover" label="Pause" />
+    <USwitch v-model="pauseOnTouch" label="Pause on Touch" />
     <USwitch v-model="reverse" label="Reverse" />
     <USwitch v-model="overlay" label="Overlay" />
   </Navbar>
 
-  <UMarquee
-    :orientation="orientation"
-    :pause-on-hover="pauseOnHover"
-    :reverse="reverse"
-    :overlay="overlay"
-    class="data-[orientation=horizontal]:w-lg"
-  >
+  <UMarquee :orientation="orientation" :pause-on-hover="pauseOnHover" :pause-on-touch="pauseOnTouch" :reverse="reverse"
+    :overlay="overlay" class="data-[orientation=horizontal]:w-lg">
     <UIcon name="simple-icons:github" class="size-10 shrink-0" />
     <UIcon name="simple-icons:discord" class="size-10 shrink-0" />
     <UIcon name="simple-icons:x" class="size-10 shrink-0" />
diff --git a/src/runtime/components/Marquee.vue b/src/runtime/components/Marquee.vue
index 5c6e3690c2..749577677a 100644
--- a/src/runtime/components/Marquee.vue
+++ b/src/runtime/components/Marquee.vue
@@ -16,6 +16,11 @@ export interface MarqueeProps {
    * @defaultValue false
    */
   pauseOnHover?: boolean
+  /**
+   * Pause the marquee on touch.
+   * @defaultValue false
+   */
+  pauseOnTouch?: boolean
   /**
    * Reverse the direction of the marquee.
    * @defaultValue false
@@ -62,6 +67,7 @@ const appConfig = useAppConfig() as Marquee['AppConfig']
 
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.marquee || {}) })({
   pauseOnHover: props.pauseOnHover,
+  pauseOnTouch: props.pauseOnTouch,
   orientation: props.orientation,
   reverse: props.reverse,
   overlay: props.overlay
@@ -69,7 +75,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.marquee || {
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root"
+    :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div v-for="i in repeat" :key="i" data-slot="content" :class="ui.content({ class: [props.ui?.content] })">
       <slot />
     </div>
diff --git a/src/theme/marquee.ts b/src/theme/marquee.ts
index 2b9accee54..462ccf2493 100644
--- a/src/theme/marquee.ts
+++ b/src/theme/marquee.ts
@@ -17,6 +17,11 @@ export default {
         content: 'group-hover:[animation-play-state:paused]'
       }
     },
+    pauseOnTouch: {
+      true: {
+        content: 'group-active:[animation-play-state:paused]'
+      }
+    },
     reverse: {
       true: {
         content: '![animation-direction:reverse]'

From cd1d66381fd252b02ded2ee33ba2ab0fc8dca7a0 Mon Sep 17 00:00:00 2001
From: Mohamed Eslam <60846785+MohamedEslam04@users.noreply.github.com>
Date: Sat, 10 Jan 2026 13:48:43 +0200
Subject: [PATCH 2/4] feat: enhance Marquee component with new props for
 duration and pause on click functionality

---
 .../nuxt/app/pages/components/marquee.vue     | 20 +++++-
 src/runtime/components/Marquee.vue            | 67 +++++++++++++++++--
 src/theme/marquee.ts                          |  5 +-
 3 files changed, 83 insertions(+), 9 deletions(-)

diff --git a/playgrounds/nuxt/app/pages/components/marquee.vue b/playgrounds/nuxt/app/pages/components/marquee.vue
index d9a43689b7..5cc66ff87b 100644
--- a/playgrounds/nuxt/app/pages/components/marquee.vue
+++ b/playgrounds/nuxt/app/pages/components/marquee.vue
@@ -8,6 +8,9 @@ const pauseOnHover = ref(false)
 const pauseOnTouch = ref(false)
 const reverse = ref(false)
 const overlay = ref(false)
+const repeat = ref(3)
+const duration = ref(20)
+const pauseOnClick = ref(false)
 </script>
 
 <template>
@@ -15,17 +18,30 @@ const overlay = ref(false)
     <USelect v-model="orientation" :items="orientations" />
     <USwitch v-model="pauseOnHover" label="Pause" />
     <USwitch v-model="pauseOnTouch" label="Pause on Touch" />
+    <USwitch v-model="pauseOnClick" label="Pause on Click" />
     <USwitch v-model="reverse" label="Reverse" />
     <USwitch v-model="overlay" label="Overlay" />
+    <UInputNumber v-model="repeat" :min="1" :max="10" />
+    <UInputNumber v-model="duration" :min="1" :max="100" />
   </Navbar>
 
-  <UMarquee :orientation="orientation" :pause-on-hover="pauseOnHover" :pause-on-touch="pauseOnTouch" :reverse="reverse"
-    :overlay="overlay" class="data-[orientation=horizontal]:w-lg">
+  <UMarquee
+    :orientation="orientation"
+    :pause-on-hover="pauseOnHover"
+    :pause-on-touch="pauseOnTouch"
+    :pause-on-click="pauseOnClick"
+    :reverse="reverse"
+    :overlay="overlay"
+    :repeat="repeat"
+    :duration="duration"
+    class="data-[orientation=horizontal]:w-lg"
+  >
     <UIcon name="simple-icons:github" class="size-10 shrink-0" />
     <UIcon name="simple-icons:discord" class="size-10 shrink-0" />
     <UIcon name="simple-icons:x" class="size-10 shrink-0" />
     <UIcon name="simple-icons:instagram" class="size-10 shrink-0" />
     <UIcon name="simple-icons:linkedin" class="size-10 shrink-0" />
     <UIcon name="simple-icons:facebook" class="size-10 shrink-0" />
+    <UButton label="Click Me" color="neutral" variant="subtle" size="xs" @click="console.log('Button clicked!')" />
   </UMarquee>
 </template>
diff --git a/src/runtime/components/Marquee.vue b/src/runtime/components/Marquee.vue
index 749577677a..e56916866b 100644
--- a/src/runtime/components/Marquee.vue
+++ b/src/runtime/components/Marquee.vue
@@ -41,6 +41,20 @@ export interface MarqueeProps {
    * @defaultValue true
    */
   overlay?: boolean
+  /**
+   * The duration of the marquee animation in seconds.
+   * @defaultValue 20
+   */
+  /**
+   * The duration of the marquee animation in seconds.
+   * @defaultValue 20
+   */
+  duration?: number
+  /**
+   * Pause the marquee when clicking on it.
+   * @defaultValue false
+   */
+  pauseOnClick?: boolean
   class?: any
   ui?: Marquee['slots']
 }
@@ -51,15 +65,18 @@ export interface MarqueeSlots {
 </script>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { Primitive } from 'reka-ui'
+import { onClickOutside } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { tv } from '../utils/tv'
 
 const props = withDefaults(defineProps<MarqueeProps>(), {
   orientation: 'horizontal',
   repeat: 4,
-  overlay: true
+  overlay: true,
+  duration: 20,
+  pauseOnClick: false
 })
 defineSlots<MarqueeSlots>()
 
@@ -72,13 +89,53 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.marquee || {
   reverse: props.reverse,
   overlay: props.overlay
 }))
+
+const container = ref<HTMLElement | null>(null)
+const paused = ref(false)
+
+onClickOutside(container, () => {
+  if (props.pauseOnClick) {
+    paused.value = false
+  }
+})
+
+function togglePause(e: MouseEvent) {
+  if (!props.pauseOnClick) {
+    return
+  }
+
+  const target = e.target as HTMLElement
+  if (target.closest('button, a, input, textarea, select')) {
+    return
+  }
+
+  paused.value = !paused.value
+}
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" data-slot="root"
-    :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div v-for="i in repeat" :key="i" data-slot="content" :class="ui.content({ class: [props.ui?.content] })">
+  <Primitive
+    ref="container"
+    :as="as"
+    :data-orientation="orientation"
+    data-slot="root"
+    :class="ui.root({ class: [props.ui?.root, props.class, pauseOnClick && !paused && 'cursor-pointer'] })"
+    :style="{ '--duration': `${props.duration}s` }"
+    @click="togglePause"
+  >
+    <div
+      v-for="i in repeat"
+      :key="i"
+      :aria-hidden="i > 1 ? 'true' : undefined"
+      data-slot="content"
+      :class="ui.content({ class: [props.ui?.content] })"
+      :style="paused ? { animationPlayState: 'paused' } : undefined"
+    >
       <slot />
     </div>
+    <div
+      v-if="pauseOnClick && !paused"
+      :class="ui.overlay({ class: [props.ui?.overlay] })"
+    />
   </Primitive>
 </template>
diff --git a/src/theme/marquee.ts b/src/theme/marquee.ts
index 462ccf2493..93cf33a7ea 100644
--- a/src/theme/marquee.ts
+++ b/src/theme/marquee.ts
@@ -1,7 +1,8 @@
 export default {
   slots: {
-    root: 'group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s]',
-    content: 'flex items-center shrink-0 justify-around gap-(--gap) min-w-max'
+    root: 'group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] motion-reduce:animate-none',
+    content: 'flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0',
+    overlay: 'absolute inset-0 z-10 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity'
   },
   variants: {
     orientation: {

From 7cae11595f6cb283ca0b4ea15636586a8ac25c79 Mon Sep 17 00:00:00 2001
From: Mohamed Eslam <60846785+MohamedEslam04@users.noreply.github.com>
Date: Sat, 10 Jan 2026 13:59:25 +0200
Subject: [PATCH 3/4] refactor(Marquee): remove redundant comment for duration
 prop

---
 src/runtime/components/Marquee.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/runtime/components/Marquee.vue b/src/runtime/components/Marquee.vue
index e56916866b..d8f7ccbd7c 100644
--- a/src/runtime/components/Marquee.vue
+++ b/src/runtime/components/Marquee.vue
@@ -41,10 +41,6 @@ export interface MarqueeProps {
    * @defaultValue true
    */
   overlay?: boolean
-  /**
-   * The duration of the marquee animation in seconds.
-   * @defaultValue 20
-   */
   /**
    * The duration of the marquee animation in seconds.
    * @defaultValue 20

From 47bb87171b65935b839d84f67f05bcfcaa24e27b Mon Sep 17 00:00:00 2001
From: Mohamed Eslam <60846785+MohamedEslam04@users.noreply.github.com>
Date: Sat, 10 Jan 2026 14:27:13 +0200
Subject: [PATCH 4/4] feat(Marquee): implement pauseOnClick functionality and
 enhance accessibility with aria attributes

---
 test/components/Marquee.spec.ts               |  56 ++++++++++
 test/components/Slideover.spec.ts             |   1 +
 .../__snapshots__/Marquee-vue.spec.ts.snap    | 103 ++++++++++--------
 .../__snapshots__/Marquee.spec.ts.snap        | 103 ++++++++++--------
 .../__snapshots__/PageLogos-vue.spec.ts.snap  |  11 +-
 .../__snapshots__/PageLogos.spec.ts.snap      |  11 +-
 6 files changed, 181 insertions(+), 104 deletions(-)

diff --git a/test/components/Marquee.spec.ts b/test/components/Marquee.spec.ts
index f9b1e51182..0e6402c882 100644
--- a/test/components/Marquee.spec.ts
+++ b/test/components/Marquee.spec.ts
@@ -1,6 +1,7 @@
 import { describe, it, expect } from 'vitest'
 import { axe } from 'vitest-axe'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { h } from 'vue'
 import Marquee from '../../src/runtime/components/Marquee.vue'
 import type { MarqueeProps, MarqueeSlots } from '../../src/runtime/components/Marquee.vue'
 import ComponentRender from '../component-render'
@@ -23,6 +24,61 @@ describe('Marquee', () => {
     expect(html).toMatchSnapshot()
   })
 
+  it('handles pauseOnClick correctly', async () => {
+    const wrapper = await mountSuspended(Marquee, {
+      props: {
+        pauseOnClick: true,
+        duration: 30
+      },
+      slots: {
+        default: () => 'Content'
+      }
+    })
+
+    // Check duration style
+    expect(wrapper.attributes('style')).toContain('--duration: 30s')
+
+    // Initial state: not paused
+    expect(wrapper.find('[data-slot="content"]').attributes('style')).toBeUndefined()
+
+    // Check overlay exists and is visible (conditionally based on implementation, here check class or existence)
+    const overlay = wrapper.find('.absolute.inset-0.z-10')
+    expect(overlay.exists()).toBe(true)
+
+    // Click wrapper to pause
+    await wrapper.trigger('click')
+
+    // Paused state
+    expect(wrapper.find('[data-slot="content"]').attributes('style')).toContain('animation-play-state: paused')
+
+    // Overlay should be gone when paused
+    expect(wrapper.find('.absolute.inset-0.z-10').exists()).toBe(false)
+
+    // Click wrapper to resume
+    await wrapper.trigger('click')
+    expect(wrapper.find('[data-slot="content"]').attributes('style')).toBeUndefined()
+  })
+
+  it('prevents pause when clicking interactive elements', async () => {
+    const wrapper = await mountSuspended(Marquee, {
+      props: {
+        pauseOnClick: true,
+        // Reduce repeat to 1 to simplify finding
+        repeat: 1
+      },
+      slots: {
+        default: () => h('button', { id: 'btn' }, 'Click me')
+      }
+    })
+
+    const button = wrapper.find('#btn')
+    expect(button.exists()).toBe(true)
+    await button.trigger('click')
+
+    // Should NOT be paused
+    expect(wrapper.find('[data-slot="content"]').attributes('style')).toBeUndefined()
+  })
+
   it('passes accessibility tests', async () => {
     const wrapper = await mountSuspended(Marquee, {
       slots: {
diff --git a/test/components/Slideover.spec.ts b/test/components/Slideover.spec.ts
index 03257818a9..9645b94c79 100644
--- a/test/components/Slideover.spec.ts
+++ b/test/components/Slideover.spec.ts
@@ -49,5 +49,6 @@ describe('Slideover', () => {
     })
 
     expect(await axe(wrapper.element)).toHaveNoViolations()
+    wrapper.unmount()
   })
 })
diff --git a/test/components/__snapshots__/Marquee-vue.spec.ts.snap b/test/components/__snapshots__/Marquee-vue.spec.ts.snap
index e95b8ccb46..c76ac26894 100644
--- a/test/components/__snapshots__/Marquee-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Marquee-vue.spec.ts.snap
@@ -1,84 +1,93 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Marquee > renders with as correctly 1`] = `
-"<section data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+"<section data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] motion-reduce:animate-none before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden" style="--duration: 20s;">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <!--v-if-->
 </section>"
 `;
 
 exports[`Marquee > renders with class correctly 1`] = `
-"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden text-xl">
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] motion-reduce:animate-none before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden text-xl" style="--duration: 20s;">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`Marquee > renders with default slot correctly 1`] = `
-"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden">Default slot</div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden">Default slot</div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden">Default slot</div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden">Default slot</div>
+"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] motion-reduce:animate-none before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden" style="--duration: 20s;">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden">Default slot</div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden">Default slot</div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden">Default slot</div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden">Default slot</div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`Marquee > renders with orientation correctly 1`] = `
-"<div data-orientation="vertical" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-col before:inset-x-0 before:top-0 before:w-full before:h-1/3 before:bg-gradient-to-b after:inset-x-0 after:bottom-0 after:w-full after:h-1/3 after:bg-gradient-to-t backface-hidden">
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"></div>
+"<div data-orientation="vertical" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] motion-reduce:animate-none before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-col before:inset-x-0 before:top-0 before:w-full before:h-1/3 before:bg-gradient-to-b after:inset-x-0 after:bottom-0 after:w-full after:h-1/3 after:bg-gradient-to-t backface-hidden" style="--duration: 20s;">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"></div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`Marquee > renders with overlay off correctly 1`] = `
-"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] flex-row">
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] motion-reduce:animate-none flex-row" style="--duration: 20s;">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`Marquee > renders with pauseOnHover correctly 1`] = `
-"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full group-hover:[animation-play-state:paused] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full group-hover:[animation-play-state:paused] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full group-hover:[animation-play-state:paused] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full group-hover:[animation-play-state:paused] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] motion-reduce:animate-none before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden" style="--duration: 20s;">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full group-hover:[animation-play-state:paused] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full group-hover:[animation-play-state:paused] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full group-hover:[animation-play-state:paused] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full group-hover:[animation-play-state:paused] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`Marquee > renders with repeat correctly 1`] = `
-"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] motion-reduce:animate-none before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden" style="--duration: 20s;">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`Marquee > renders with reverse correctly 1`] = `
-"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full ![animation-direction:reverse] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full ![animation-direction:reverse] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full ![animation-direction:reverse] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full ![animation-direction:reverse] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] motion-reduce:animate-none before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden" style="--duration: 20s;">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full ![animation-direction:reverse] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full ![animation-direction:reverse] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full ![animation-direction:reverse] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full ![animation-direction:reverse] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`Marquee > renders with ui correctly 1`] = `
-"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
-  <div data-slot="content" class="flex items-center shrink-0 justify-around min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden gap-4"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden gap-4"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden gap-4"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden gap-4"></div>
+"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] motion-reduce:animate-none before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden" style="--duration: 20s;">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden gap-4"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden gap-4"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden gap-4"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden gap-4"></div>
+  <!--v-if-->
 </div>"
 `;
diff --git a/test/components/__snapshots__/Marquee.spec.ts.snap b/test/components/__snapshots__/Marquee.spec.ts.snap
index e95b8ccb46..c76ac26894 100644
--- a/test/components/__snapshots__/Marquee.spec.ts.snap
+++ b/test/components/__snapshots__/Marquee.spec.ts.snap
@@ -1,84 +1,93 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Marquee > renders with as correctly 1`] = `
-"<section data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+"<section data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] motion-reduce:animate-none before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden" style="--duration: 20s;">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <!--v-if-->
 </section>"
 `;
 
 exports[`Marquee > renders with class correctly 1`] = `
-"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden text-xl">
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] motion-reduce:animate-none before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden text-xl" style="--duration: 20s;">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`Marquee > renders with default slot correctly 1`] = `
-"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden">Default slot</div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden">Default slot</div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden">Default slot</div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden">Default slot</div>
+"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] motion-reduce:animate-none before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden" style="--duration: 20s;">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden">Default slot</div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden">Default slot</div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden">Default slot</div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden">Default slot</div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`Marquee > renders with orientation correctly 1`] = `
-"<div data-orientation="vertical" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-col before:inset-x-0 before:top-0 before:w-full before:h-1/3 before:bg-gradient-to-b after:inset-x-0 after:bottom-0 after:w-full after:h-1/3 after:bg-gradient-to-t backface-hidden">
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"></div>
+"<div data-orientation="vertical" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] motion-reduce:animate-none before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-col before:inset-x-0 before:top-0 before:w-full before:h-1/3 before:bg-gradient-to-b after:inset-x-0 after:bottom-0 after:w-full after:h-1/3 after:bg-gradient-to-t backface-hidden" style="--duration: 20s;">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"></div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`Marquee > renders with overlay off correctly 1`] = `
-"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] flex-row">
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] motion-reduce:animate-none flex-row" style="--duration: 20s;">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`Marquee > renders with pauseOnHover correctly 1`] = `
-"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full group-hover:[animation-play-state:paused] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full group-hover:[animation-play-state:paused] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full group-hover:[animation-play-state:paused] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full group-hover:[animation-play-state:paused] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] motion-reduce:animate-none before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden" style="--duration: 20s;">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full group-hover:[animation-play-state:paused] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full group-hover:[animation-play-state:paused] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full group-hover:[animation-play-state:paused] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full group-hover:[animation-play-state:paused] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`Marquee > renders with repeat correctly 1`] = `
-"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] motion-reduce:animate-none before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden" style="--duration: 20s;">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`Marquee > renders with reverse correctly 1`] = `
-"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full ![animation-direction:reverse] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full ![animation-direction:reverse] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full ![animation-direction:reverse] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full ![animation-direction:reverse] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] motion-reduce:animate-none before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden" style="--duration: 20s;">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full ![animation-direction:reverse] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full ![animation-direction:reverse] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full ![animation-direction:reverse] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full ![animation-direction:reverse] flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"></div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`Marquee > renders with ui correctly 1`] = `
-"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
-  <div data-slot="content" class="flex items-center shrink-0 justify-around min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden gap-4"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden gap-4"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden gap-4"></div>
-  <div data-slot="content" class="flex items-center shrink-0 justify-around min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden gap-4"></div>
+"<div data-orientation="horizontal" data-slot="root" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] motion-reduce:animate-none before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden" style="--duration: 20s;">
+  <div data-slot="content" class="flex items-center shrink-0 justify-around min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden gap-4"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden gap-4"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden gap-4"></div>
+  <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden gap-4"></div>
+  <!--v-if-->
 </div>"
 `;
diff --git a/test/components/__snapshots__/PageLogos-vue.spec.ts.snap b/test/components/__snapshots__/PageLogos-vue.spec.ts.snap
index 927dc56211..b5d1c13676 100644
--- a/test/components/__snapshots__/PageLogos-vue.spec.ts.snap
+++ b/test/components/__snapshots__/PageLogos-vue.spec.ts.snap
@@ -42,11 +42,12 @@ exports[`PageLogos > renders with items correctly 1`] = `
 exports[`PageLogos > renders with marquee correctly 1`] = `
 "<div data-slot="root" class="relative overflow-hidden">
   <!--v-if-->
-  <div data-orientation="horizontal" data-slot="logos" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden mt-10">
-    <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
-    <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
-    <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
-    <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
+  <div data-orientation="horizontal" data-slot="logos" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] motion-reduce:animate-none before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden mt-10" style="--duration: 20s;">
+    <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
+    <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
+    <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
+    <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
+    <!--v-if-->
   </div>
 </div>"
 `;
diff --git a/test/components/__snapshots__/PageLogos.spec.ts.snap b/test/components/__snapshots__/PageLogos.spec.ts.snap
index 927dc56211..b5d1c13676 100644
--- a/test/components/__snapshots__/PageLogos.spec.ts.snap
+++ b/test/components/__snapshots__/PageLogos.spec.ts.snap
@@ -42,11 +42,12 @@ exports[`PageLogos > renders with items correctly 1`] = `
 exports[`PageLogos > renders with marquee correctly 1`] = `
 "<div data-slot="root" class="relative overflow-hidden">
   <!--v-if-->
-  <div data-orientation="horizontal" data-slot="logos" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden mt-10">
-    <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
-    <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
-    <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
-    <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
+  <div data-orientation="horizontal" data-slot="logos" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] motion-reduce:animate-none before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden mt-10" style="--duration: 20s;">
+    <div data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
+    <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
+    <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
+    <div aria-hidden="true" data-slot="content" class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max relative z-0 w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated text-base size-10 shrink-0"><img src="https://avatars.githubusercontent.com/u/71938701?v=4" alt="Hugo Richard" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
+    <!--v-if-->
   </div>
 </div>"
 `;