# Marquee (SOLID)



## Anatomy

{/*  */}

```tsx
<Marquee.Root>
  <Marquee.Edge />
  <Marquee.Viewport>
    <Marquee.Content>
      <Marquee.Item />
    </Marquee.Content>
  </Marquee.Viewport>
</Marquee.Root>
```

## Examples

**Example: basic**

#### React

```tsx
import { Marquee } from '@ark-ui/react/marquee'
import styles from 'styles/marquee.module.css'

const items = [
  { name: 'Apple', logo: '🍎' },
  { name: 'Banana', logo: '🍌' },
  { name: 'Cherry', logo: '🍒' },
  { name: 'Grape', logo: '🍇' },
  { name: 'Watermelon', logo: '🍉' },
  { name: 'Strawberry', logo: '🍓' },
]

export const Basic = () => (
  <Marquee.Root className={styles.Root}>
    <Marquee.Viewport className={styles.Viewport}>
      <Marquee.Content className={styles.Content}>
        {items.map((item, i) => (
          <Marquee.Item key={i} className={styles.Item}>
            <span className={styles.ItemLogo}>{item.logo}</span>
            <span className={styles.ItemName}>{item.name}</span>
          </Marquee.Item>
        ))}
      </Marquee.Content>
    </Marquee.Viewport>
  </Marquee.Root>
)

```

#### Solid

```tsx
import { For } from 'solid-js'
import { Marquee } from '@ark-ui/solid/marquee'
import styles from 'styles/marquee.module.css'

const items = [
  { name: 'Apple', logo: '🍎' },
  { name: 'Banana', logo: '🍌' },
  { name: 'Cherry', logo: '🍒' },
  { name: 'Grape', logo: '🍇' },
  { name: 'Watermelon', logo: '🍉' },
  { name: 'Strawberry', logo: '🍓' },
]

export const Basic = () => (
  <Marquee.Root class={styles.Root}>
    <Marquee.Viewport class={styles.Viewport}>
      <Marquee.Content class={styles.Content}>
        <For each={items}>
          {(item) => (
            <Marquee.Item class={styles.Item}>
              <span class={styles.ItemLogo}>{item.logo}</span>
              <span class={styles.ItemName}>{item.name}</span>
            </Marquee.Item>
          )}
        </For>
      </Marquee.Content>
    </Marquee.Viewport>
  </Marquee.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Marquee } from '@ark-ui/vue/marquee'
import styles from 'styles/marquee.module.css'

const items = [
  { name: 'Apple', logo: '🍎' },
  { name: 'Banana', logo: '🍌' },
  { name: 'Cherry', logo: '🍒' },
  { name: 'Grape', logo: '🍇' },
  { name: 'Watermelon', logo: '🍉' },
  { name: 'Strawberry', logo: '🍓' },
]
</script>

<template>
  <Marquee.Root :class="styles.Root">
    <Marquee.Viewport :class="styles.Viewport">
      <Marquee.Content :class="styles.Content">
        <Marquee.Item v-for="item in items" :key="item.name" :class="styles.Item">
          <span :class="styles.ItemLogo">{{ item.logo }}</span>
          <span :class="styles.ItemName">{{ item.name }}</span>
        </Marquee.Item>
      </Marquee.Content>
    </Marquee.Viewport>
  </Marquee.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Marquee } from '@ark-ui/svelte/marquee'
  import styles from 'styles/marquee.module.css'

  const items = [
    { name: 'Apple', logo: '🍎' },
    { name: 'Banana', logo: '🍌' },
    { name: 'Cherry', logo: '🍒' },
    { name: 'Grape', logo: '🍇' },
    { name: 'Watermelon', logo: '🍉' },
    { name: 'Strawberry', logo: '🍓' },
  ]
</script>

<Marquee.Root class={styles.Root}>
  <Marquee.Viewport class={styles.Viewport}>
    <Marquee.Content class={styles.Content}>
      {#each items as item}
        <Marquee.Item class={styles.Item}>
          <span class={styles.ItemLogo}>{item.logo}</span>
          <span class={styles.ItemName}>{item.name}</span>
        </Marquee.Item>
      {/each}
    </Marquee.Content>
  </Marquee.Viewport>
</Marquee.Root>

```

### Auto Fill

Use the `autoFill` prop to automatically duplicate content to fill the viewport. The `spacing` prop controls the gap
between duplicated content instances:

**Example: auto-fill**

#### React

```tsx
import { Marquee } from '@ark-ui/react/marquee'
import styles from 'styles/marquee.module.css'

const items = [
  { name: 'Apple', logo: '🍎' },
  { name: 'Banana', logo: '🍌' },
  { name: 'Cherry', logo: '🍒' },
]

export const AutoFill = () => (
  <Marquee.Root autoFill spacing="2rem" className={styles.Root}>
    <Marquee.Viewport className={styles.Viewport}>
      <Marquee.Content className={styles.Content}>
        {items.map((item, i) => (
          <Marquee.Item key={i} className={styles.Item}>
            <span className={styles.ItemLogo}>{item.logo}</span>
            <span className={styles.ItemName}>{item.name}</span>
          </Marquee.Item>
        ))}
      </Marquee.Content>
    </Marquee.Viewport>
  </Marquee.Root>
)

```

#### Solid

```tsx
import { For } from 'solid-js'
import { Marquee } from '@ark-ui/solid/marquee'
import styles from 'styles/marquee.module.css'

const items = [
  { name: 'Apple', logo: '🍎' },
  { name: 'Banana', logo: '🍌' },
  { name: 'Cherry', logo: '🍒' },
]

export const AutoFill = () => (
  <Marquee.Root autoFill spacing="2rem" class={styles.Root}>
    <Marquee.Viewport class={styles.Viewport}>
      <Marquee.Content class={styles.Content}>
        <For each={items}>
          {(item) => (
            <Marquee.Item class={styles.Item}>
              <span class={styles.ItemLogo}>{item.logo}</span>
              <span class={styles.ItemName}>{item.name}</span>
            </Marquee.Item>
          )}
        </For>
      </Marquee.Content>
    </Marquee.Viewport>
  </Marquee.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Marquee } from '@ark-ui/vue/marquee'
import styles from 'styles/marquee.module.css'

const items = [
  { name: 'Apple', logo: '🍎' },
  { name: 'Banana', logo: '🍌' },
  { name: 'Cherry', logo: '🍒' },
]
</script>

<template>
  <Marquee.Root auto-fill spacing="2rem" :class="styles.Root">
    <Marquee.Viewport :class="styles.Viewport">
      <Marquee.Content :class="styles.Content">
        <Marquee.Item v-for="item in items" :key="item.name" :class="styles.Item">
          <span :class="styles.ItemLogo">{{ item.logo }}</span>
          <span :class="styles.ItemName">{{ item.name }}</span>
        </Marquee.Item>
      </Marquee.Content>
    </Marquee.Viewport>
  </Marquee.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Marquee } from '@ark-ui/svelte/marquee'
  import styles from 'styles/marquee.module.css'

  const items = [
    { name: 'Apple', logo: '🍎' },
    { name: 'Banana', logo: '🍌' },
    { name: 'Cherry', logo: '🍒' },
  ]
</script>

<Marquee.Root autoFill spacing="2rem" class={styles.Root}>
  <Marquee.Viewport class={styles.Viewport}>
    <Marquee.Content class={styles.Content}>
      {#each items as item}
        <Marquee.Item class={styles.Item}>
          <span class={styles.ItemLogo}>{item.logo}</span>
          <span class={styles.ItemName}>{item.name}</span>
        </Marquee.Item>
      {/each}
    </Marquee.Content>
  </Marquee.Viewport>
</Marquee.Root>

```

### Reverse

Set the `reverse` prop to reverse the scroll direction:

**Example: reverse**

#### React

```tsx
import { Marquee } from '@ark-ui/react/marquee'
import styles from 'styles/marquee.module.css'

const items = [
  { name: 'Apple', logo: '🍎' },
  { name: 'Banana', logo: '🍌' },
  { name: 'Cherry', logo: '🍒' },
  { name: 'Grape', logo: '🍇' },
  { name: 'Watermelon', logo: '🍉' },
  { name: 'Strawberry', logo: '🍓' },
]

export const Reverse = () => (
  <Marquee.Root reverse className={styles.Root}>
    <Marquee.Viewport className={styles.Viewport}>
      <Marquee.Content className={styles.Content}>
        {items.map((item, i) => (
          <Marquee.Item key={i} className={styles.Item}>
            <span className={styles.ItemLogo}>{item.logo}</span>
            <span className={styles.ItemName}>{item.name}</span>
          </Marquee.Item>
        ))}
      </Marquee.Content>
    </Marquee.Viewport>
  </Marquee.Root>
)

```

#### Solid

```tsx
import { For } from 'solid-js'
import { Marquee } from '@ark-ui/solid/marquee'
import styles from 'styles/marquee.module.css'

const items = [
  { name: 'Apple', logo: '🍎' },
  { name: 'Banana', logo: '🍌' },
  { name: 'Cherry', logo: '🍒' },
  { name: 'Grape', logo: '🍇' },
  { name: 'Watermelon', logo: '🍉' },
  { name: 'Strawberry', logo: '🍓' },
]

export const Reverse = () => (
  <Marquee.Root reverse class={styles.Root}>
    <Marquee.Viewport class={styles.Viewport}>
      <Marquee.Content class={styles.Content}>
        <For each={items}>
          {(item) => (
            <Marquee.Item class={styles.Item}>
              <span class={styles.ItemLogo}>{item.logo}</span>
              <span class={styles.ItemName}>{item.name}</span>
            </Marquee.Item>
          )}
        </For>
      </Marquee.Content>
    </Marquee.Viewport>
  </Marquee.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Marquee } from '@ark-ui/vue/marquee'
import styles from 'styles/marquee.module.css'

const items = [
  { name: 'Apple', logo: '🍎' },
  { name: 'Banana', logo: '🍌' },
  { name: 'Cherry', logo: '🍒' },
  { name: 'Grape', logo: '🍇' },
  { name: 'Watermelon', logo: '🍉' },
  { name: 'Strawberry', logo: '🍓' },
]
</script>

<template>
  <Marquee.Root reverse :class="styles.Root">
    <Marquee.Viewport :class="styles.Viewport">
      <Marquee.Content :class="styles.Content">
        <Marquee.Item v-for="item in items" :key="item.name" :class="styles.Item">
          <span :class="styles.ItemLogo">{{ item.logo }}</span>
          <span :class="styles.ItemName">{{ item.name }}</span>
        </Marquee.Item>
      </Marquee.Content>
    </Marquee.Viewport>
  </Marquee.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Marquee } from '@ark-ui/svelte/marquee'
  import styles from 'styles/marquee.module.css'

  const items = [
    { name: 'Apple', logo: '🍎' },
    { name: 'Banana', logo: '🍌' },
    { name: 'Cherry', logo: '🍒' },
    { name: 'Grape', logo: '🍇' },
    { name: 'Watermelon', logo: '🍉' },
    { name: 'Strawberry', logo: '🍓' },
  ]
</script>

<Marquee.Root reverse class={styles.Root}>
  <Marquee.Viewport class={styles.Viewport}>
    <Marquee.Content class={styles.Content}>
      {#each items as item}
        <Marquee.Item class={styles.Item}>
          <span class={styles.ItemLogo}>{item.logo}</span>
          <span class={styles.ItemName}>{item.name}</span>
        </Marquee.Item>
      {/each}
    </Marquee.Content>
  </Marquee.Viewport>
</Marquee.Root>

```

### Vertical

Set `side="bottom"` (or `side="top"`) to create a vertical marquee:

**Example: vertical**

#### React

```tsx
import { Marquee } from '@ark-ui/react/marquee'
import styles from 'styles/marquee.module.css'

const items = [
  { name: 'Apple', logo: '🍎' },
  { name: 'Banana', logo: '🍌' },
  { name: 'Cherry', logo: '🍒' },
  { name: 'Grape', logo: '🍇' },
  { name: 'Watermelon', logo: '🍉' },
  { name: 'Strawberry', logo: '🍓' },
]

export const Vertical = () => (
  <Marquee.Root side="bottom" className={styles.Root}>
    <Marquee.Viewport className={styles.Viewport}>
      <Marquee.Content className={styles.Content}>
        {items.map((item, i) => (
          <Marquee.Item key={i} className={styles.Item}>
            <span className={styles.ItemLogo}>{item.logo}</span>
            <span className={styles.ItemName}>{item.name}</span>
          </Marquee.Item>
        ))}
      </Marquee.Content>
    </Marquee.Viewport>
  </Marquee.Root>
)

```

#### Solid

```tsx
import { For } from 'solid-js'
import { Marquee } from '@ark-ui/solid/marquee'
import styles from 'styles/marquee.module.css'

const items = [
  { name: 'Apple', logo: '🍎' },
  { name: 'Banana', logo: '🍌' },
  { name: 'Cherry', logo: '🍒' },
  { name: 'Grape', logo: '🍇' },
  { name: 'Watermelon', logo: '🍉' },
  { name: 'Strawberry', logo: '🍓' },
]

export const Vertical = () => (
  <Marquee.Root side="bottom" class={styles.Root}>
    <Marquee.Viewport class={styles.Viewport}>
      <Marquee.Content class={styles.Content}>
        <For each={items}>
          {(item) => (
            <Marquee.Item class={styles.Item}>
              <span class={styles.ItemLogo}>{item.logo}</span>
              <span class={styles.ItemName}>{item.name}</span>
            </Marquee.Item>
          )}
        </For>
      </Marquee.Content>
    </Marquee.Viewport>
  </Marquee.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Marquee } from '@ark-ui/vue/marquee'
import styles from 'styles/marquee.module.css'

const items = [
  { name: 'Apple', logo: '🍎' },
  { name: 'Banana', logo: '🍌' },
  { name: 'Cherry', logo: '🍒' },
  { name: 'Grape', logo: '🍇' },
  { name: 'Watermelon', logo: '🍉' },
  { name: 'Strawberry', logo: '🍓' },
]
</script>

<template>
  <Marquee.Root side="bottom" :class="styles.Root">
    <Marquee.Viewport :class="styles.Viewport">
      <Marquee.Content :class="styles.Content">
        <Marquee.Item v-for="item in items" :key="item.name" :class="styles.Item">
          <span :class="styles.ItemLogo">{{ item.logo }}</span>
          <span :class="styles.ItemName">{{ item.name }}</span>
        </Marquee.Item>
      </Marquee.Content>
    </Marquee.Viewport>
  </Marquee.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Marquee } from '@ark-ui/svelte/marquee'
  import styles from 'styles/marquee.module.css'

  const items = [
    { name: 'Apple', logo: '🍎' },
    { name: 'Banana', logo: '🍌' },
    { name: 'Cherry', logo: '🍒' },
    { name: 'Grape', logo: '🍇' },
    { name: 'Watermelon', logo: '🍉' },
    { name: 'Strawberry', logo: '🍓' },
  ]
</script>

<Marquee.Root side="bottom" class={styles.Root}>
  <Marquee.Viewport class={styles.Viewport}>
    <Marquee.Content class={styles.Content}>
      {#each items as item}
        <Marquee.Item class={styles.Item}>
          <span class={styles.ItemLogo}>{item.logo}</span>
          <span class={styles.ItemName}>{item.name}</span>
        </Marquee.Item>
      {/each}
    </Marquee.Content>
  </Marquee.Viewport>
</Marquee.Root>

```

### Speed

Control the animation speed using the `speed` prop, which accepts values in pixels per second:

**Example: speed**

#### React

```tsx
import { Marquee } from '@ark-ui/react/marquee'
import styles from 'styles/marquee.module.css'

const items = [
  { name: 'Apple', logo: '🍎' },
  { name: 'Banana', logo: '🍌' },
  { name: 'Cherry', logo: '🍒' },
  { name: 'Grape', logo: '🍇' },
  { name: 'Watermelon', logo: '🍉' },
  { name: 'Strawberry', logo: '🍓' },
]

export const Speed = () => (
  <div className="stack">
    <div>
      <h3>Slow (25px/s)</h3>
      <Marquee.Root speed={25} className={styles.Root}>
        <Marquee.Viewport className={styles.Viewport}>
          <Marquee.Content className={styles.Content}>
            {items.map((item, i) => (
              <Marquee.Item key={i} className={styles.Item}>
                <span className={styles.ItemLogo}>{item.logo}</span>
                <span className={styles.ItemName}>{item.name}</span>
              </Marquee.Item>
            ))}
          </Marquee.Content>
        </Marquee.Viewport>
      </Marquee.Root>
    </div>

    <div>
      <h3>Normal (50px/s)</h3>
      <Marquee.Root speed={50} className={styles.Root}>
        <Marquee.Viewport className={styles.Viewport}>
          <Marquee.Content className={styles.Content}>
            {items.map((item, i) => (
              <Marquee.Item key={i} className={styles.Item}>
                <span className={styles.ItemLogo}>{item.logo}</span>
                <span className={styles.ItemName}>{item.name}</span>
              </Marquee.Item>
            ))}
          </Marquee.Content>
        </Marquee.Viewport>
      </Marquee.Root>
    </div>

    <div>
      <h3>Fast (100px/s)</h3>
      <Marquee.Root speed={100} className={styles.Root}>
        <Marquee.Viewport className={styles.Viewport}>
          <Marquee.Content className={styles.Content}>
            {items.map((item, i) => (
              <Marquee.Item key={i} className={styles.Item}>
                <span className={styles.ItemLogo}>{item.logo}</span>
                <span className={styles.ItemName}>{item.name}</span>
              </Marquee.Item>
            ))}
          </Marquee.Content>
        </Marquee.Viewport>
      </Marquee.Root>
    </div>
  </div>
)

```

#### Solid

```tsx
import { For } from 'solid-js'
import { Marquee } from '@ark-ui/solid/marquee'
import styles from 'styles/marquee.module.css'

const items = [
  { name: 'Apple', logo: '🍎' },
  { name: 'Banana', logo: '🍌' },
  { name: 'Cherry', logo: '🍒' },
  { name: 'Grape', logo: '🍇' },
  { name: 'Watermelon', logo: '🍉' },
  { name: 'Strawberry', logo: '🍓' },
]

export const Speed = () => (
  <div class="stack">
    <div>
      <h3>Slow (25px/s)</h3>
      <Marquee.Root speed={25} class={styles.Root}>
        <Marquee.Viewport class={styles.Viewport}>
          <Marquee.Content class={styles.Content}>
            <For each={items}>
              {(item) => (
                <Marquee.Item class={styles.Item}>
                  <span class={styles.ItemLogo}>{item.logo}</span>
                  <span class={styles.ItemName}>{item.name}</span>
                </Marquee.Item>
              )}
            </For>
          </Marquee.Content>
        </Marquee.Viewport>
      </Marquee.Root>
    </div>

    <div>
      <h3>Normal (50px/s)</h3>
      <Marquee.Root speed={50} class={styles.Root}>
        <Marquee.Viewport class={styles.Viewport}>
          <Marquee.Content class={styles.Content}>
            <For each={items}>
              {(item) => (
                <Marquee.Item class={styles.Item}>
                  <span class={styles.ItemLogo}>{item.logo}</span>
                  <span class={styles.ItemName}>{item.name}</span>
                </Marquee.Item>
              )}
            </For>
          </Marquee.Content>
        </Marquee.Viewport>
      </Marquee.Root>
    </div>

    <div>
      <h3>Fast (100px/s)</h3>
      <Marquee.Root speed={100} class={styles.Root}>
        <Marquee.Viewport class={styles.Viewport}>
          <Marquee.Content class={styles.Content}>
            <For each={items}>
              {(item) => (
                <Marquee.Item class={styles.Item}>
                  <span class={styles.ItemLogo}>{item.logo}</span>
                  <span class={styles.ItemName}>{item.name}</span>
                </Marquee.Item>
              )}
            </For>
          </Marquee.Content>
        </Marquee.Viewport>
      </Marquee.Root>
    </div>
  </div>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Marquee } from '@ark-ui/vue/marquee'
import styles from 'styles/marquee.module.css'

const items = [
  { name: 'Apple', logo: '🍎' },
  { name: 'Banana', logo: '🍌' },
  { name: 'Cherry', logo: '🍒' },
  { name: 'Grape', logo: '🍇' },
  { name: 'Watermelon', logo: '🍉' },
  { name: 'Strawberry', logo: '🍓' },
]
</script>

<template>
  <div class="stack">
    <div>
      <h3>Slow (25px/s)</h3>
      <Marquee.Root :speed="25" :class="styles.Root">
        <Marquee.Viewport :class="styles.Viewport">
          <Marquee.Content :class="styles.Content">
            <Marquee.Item v-for="item in items" :key="item.name" :class="styles.Item">
              <span :class="styles.ItemLogo">{{ item.logo }}</span>
              <span :class="styles.ItemName">{{ item.name }}</span>
            </Marquee.Item>
          </Marquee.Content>
        </Marquee.Viewport>
      </Marquee.Root>
    </div>

    <div>
      <h3>Normal (50px/s)</h3>
      <Marquee.Root :speed="50" :class="styles.Root">
        <Marquee.Viewport :class="styles.Viewport">
          <Marquee.Content :class="styles.Content">
            <Marquee.Item v-for="item in items" :key="item.name" :class="styles.Item">
              <span :class="styles.ItemLogo">{{ item.logo }}</span>
              <span :class="styles.ItemName">{{ item.name }}</span>
            </Marquee.Item>
          </Marquee.Content>
        </Marquee.Viewport>
      </Marquee.Root>
    </div>

    <div>
      <h3>Fast (100px/s)</h3>
      <Marquee.Root :speed="100" :class="styles.Root">
        <Marquee.Viewport :class="styles.Viewport">
          <Marquee.Content :class="styles.Content">
            <Marquee.Item v-for="item in items" :key="item.name" :class="styles.Item">
              <span :class="styles.ItemLogo">{{ item.logo }}</span>
              <span :class="styles.ItemName">{{ item.name }}</span>
            </Marquee.Item>
          </Marquee.Content>
        </Marquee.Viewport>
      </Marquee.Root>
    </div>
  </div>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Marquee } from '@ark-ui/svelte/marquee'
  import styles from 'styles/marquee.module.css'

  const items = [
    { name: 'Apple', logo: '🍎' },
    { name: 'Banana', logo: '🍌' },
    { name: 'Cherry', logo: '🍒' },
    { name: 'Grape', logo: '🍇' },
    { name: 'Watermelon', logo: '🍉' },
    { name: 'Strawberry', logo: '🍓' },
  ]
</script>

<div class="stack">
  <div>
    <h3>Slow (25px/s)</h3>
    <Marquee.Root speed={25} class={styles.Root}>
      <Marquee.Viewport class={styles.Viewport}>
        <Marquee.Content class={styles.Content}>
          {#each items as item}
            <Marquee.Item class={styles.Item}>
              <span class={styles.ItemLogo}>{item.logo}</span>
              <span class={styles.ItemName}>{item.name}</span>
            </Marquee.Item>
          {/each}
        </Marquee.Content>
      </Marquee.Viewport>
    </Marquee.Root>
  </div>

  <div>
    <h3>Normal (50px/s)</h3>
    <Marquee.Root speed={50} class={styles.Root}>
      <Marquee.Viewport class={styles.Viewport}>
        <Marquee.Content class={styles.Content}>
          {#each items as item}
            <Marquee.Item class={styles.Item}>
              <span class={styles.ItemLogo}>{item.logo}</span>
              <span class={styles.ItemName}>{item.name}</span>
            </Marquee.Item>
          {/each}
        </Marquee.Content>
      </Marquee.Viewport>
    </Marquee.Root>
  </div>

  <div>
    <h3>Fast (100px/s)</h3>
    <Marquee.Root speed={100} class={styles.Root}>
      <Marquee.Viewport class={styles.Viewport}>
        <Marquee.Content class={styles.Content}>
          {#each items as item}
            <Marquee.Item class={styles.Item}>
              <span class={styles.ItemLogo}>{item.logo}</span>
              <span class={styles.ItemName}>{item.name}</span>
            </Marquee.Item>
          {/each}
        </Marquee.Content>
      </Marquee.Viewport>
    </Marquee.Root>
  </div>
</div>

```

### Pause on Interaction

Enable `pauseOnInteraction` to pause the marquee when users hover or focus on it, improving accessibility:

**Example: pause-on-interaction**

#### React

```tsx
import { Marquee } from '@ark-ui/react/marquee'
import styles from 'styles/marquee.module.css'

const items = [
  { name: 'Apple', logo: '🍎' },
  { name: 'Banana', logo: '🍌' },
  { name: 'Cherry', logo: '🍒' },
  { name: 'Grape', logo: '🍇' },
  { name: 'Watermelon', logo: '🍉' },
  { name: 'Strawberry', logo: '🍓' },
]

export const PauseOnInteraction = () => (
  <Marquee.Root pauseOnInteraction className={styles.Root}>
    <Marquee.Viewport className={styles.Viewport}>
      <Marquee.Content className={styles.Content}>
        {items.map((item, i) => (
          <Marquee.Item key={i} className={styles.Item}>
            <span className={styles.ItemLogo}>{item.logo}</span>
            <span className={styles.ItemName}>{item.name}</span>
          </Marquee.Item>
        ))}
      </Marquee.Content>
    </Marquee.Viewport>
  </Marquee.Root>
)

```

#### Solid

```tsx
import { For } from 'solid-js'
import { Marquee } from '@ark-ui/solid/marquee'
import styles from 'styles/marquee.module.css'

const items = [
  { name: 'Apple', logo: '🍎' },
  { name: 'Banana', logo: '🍌' },
  { name: 'Cherry', logo: '🍒' },
  { name: 'Grape', logo: '🍇' },
  { name: 'Watermelon', logo: '🍉' },
  { name: 'Strawberry', logo: '🍓' },
]

export const PauseOnInteraction = () => (
  <Marquee.Root pauseOnInteraction class={styles.Root}>
    <Marquee.Viewport class={styles.Viewport}>
      <Marquee.Content class={styles.Content}>
        <For each={items}>
          {(item) => (
            <Marquee.Item class={styles.Item}>
              <span class={styles.ItemLogo}>{item.logo}</span>
              <span class={styles.ItemName}>{item.name}</span>
            </Marquee.Item>
          )}
        </For>
      </Marquee.Content>
    </Marquee.Viewport>
  </Marquee.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Marquee } from '@ark-ui/vue/marquee'
import styles from 'styles/marquee.module.css'

const items = [
  { name: 'Apple', logo: '🍎' },
  { name: 'Banana', logo: '🍌' },
  { name: 'Cherry', logo: '🍒' },
  { name: 'Grape', logo: '🍇' },
  { name: 'Watermelon', logo: '🍉' },
  { name: 'Strawberry', logo: '🍓' },
]
</script>

<template>
  <Marquee.Root pause-on-interaction :class="styles.Root">
    <Marquee.Viewport :class="styles.Viewport">
      <Marquee.Content :class="styles.Content">
        <Marquee.Item v-for="item in items" :key="item.name" :class="styles.Item">
          <span :class="styles.ItemLogo">{{ item.logo }}</span>
          <span :class="styles.ItemName">{{ item.name }}</span>
        </Marquee.Item>
      </Marquee.Content>
    </Marquee.Viewport>
  </Marquee.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Marquee } from '@ark-ui/svelte/marquee'
  import styles from 'styles/marquee.module.css'

  const items = [
    { name: 'Apple', logo: '🍎' },
    { name: 'Banana', logo: '🍌' },
    { name: 'Cherry', logo: '🍒' },
    { name: 'Grape', logo: '🍇' },
    { name: 'Watermelon', logo: '🍉' },
    { name: 'Strawberry', logo: '🍓' },
  ]
</script>

<Marquee.Root pauseOnInteraction class={styles.Root}>
  <Marquee.Viewport class={styles.Viewport}>
    <Marquee.Content class={styles.Content}>
      {#each items as item}
        <Marquee.Item class={styles.Item}>
          <span class={styles.ItemLogo}>{item.logo}</span>
          <span class={styles.ItemName}>{item.name}</span>
        </Marquee.Item>
      {/each}
    </Marquee.Content>
  </Marquee.Viewport>
</Marquee.Root>

```

### Programmatic Control

Use the `useMarquee` hook with `Marquee.RootProvider` to access the marquee API and control playback programmatically:

**Example: programmatic-control**

#### React

```tsx
import { Marquee, useMarquee } from '@ark-ui/react/marquee'
import button from 'styles/button.module.css'
import styles from 'styles/marquee.module.css'

const items = [
  { name: 'Apple', logo: '🍎' },
  { name: 'Banana', logo: '🍌' },
  { name: 'Cherry', logo: '🍒' },
  { name: 'Grape', logo: '🍇' },
  { name: 'Watermelon', logo: '🍉' },
  { name: 'Strawberry', logo: '🍓' },
]

export const ProgrammaticControl = () => {
  const marquee = useMarquee()

  return (
    <div className="stack">
      <Marquee.RootProvider value={marquee} className={styles.Root}>
        <Marquee.Viewport className={styles.Viewport}>
          <Marquee.Content className={styles.Content}>
            {items.map((item, i) => (
              <Marquee.Item key={i} className={styles.Item}>
                <span className={styles.ItemLogo}>{item.logo}</span>
                <span className={styles.ItemName}>{item.name}</span>
              </Marquee.Item>
            ))}
          </Marquee.Content>
        </Marquee.Viewport>
      </Marquee.RootProvider>

      <div className="hstack">
        <button className={button.Root} onClick={() => marquee.pause()}>
          Pause
        </button>
        <button className={button.Root} onClick={() => marquee.resume()}>
          Resume
        </button>
      </div>
    </div>
  )
}

```

#### Solid

```tsx
import { For } from 'solid-js'
import { Marquee, useMarquee } from '@ark-ui/solid/marquee'
import button from 'styles/button.module.css'
import styles from 'styles/marquee.module.css'

const items = [
  { name: 'Apple', logo: '🍎' },
  { name: 'Banana', logo: '🍌' },
  { name: 'Cherry', logo: '🍒' },
  { name: 'Grape', logo: '🍇' },
  { name: 'Watermelon', logo: '🍉' },
  { name: 'Strawberry', logo: '🍓' },
]

export const ProgrammaticControl = () => {
  const marquee = useMarquee()

  return (
    <div class="stack">
      <Marquee.RootProvider value={marquee} class={styles.Root}>
        <Marquee.Viewport class={styles.Viewport}>
          <Marquee.Content class={styles.Content}>
            <For each={items}>
              {(item) => (
                <Marquee.Item class={styles.Item}>
                  <span class={styles.ItemLogo}>{item.logo}</span>
                  <span class={styles.ItemName}>{item.name}</span>
                </Marquee.Item>
              )}
            </For>
          </Marquee.Content>
        </Marquee.Viewport>
      </Marquee.RootProvider>

      <div class="hstack">
        <button class={button.Root} onClick={() => marquee().pause()}>
          Pause
        </button>
        <button class={button.Root} onClick={() => marquee().resume()}>
          Resume
        </button>
      </div>
    </div>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Marquee, useMarquee } from '@ark-ui/vue/marquee'
import button from 'styles/button.module.css'
import styles from 'styles/marquee.module.css'

const items = [
  { name: 'Apple', logo: '🍎' },
  { name: 'Banana', logo: '🍌' },
  { name: 'Cherry', logo: '🍒' },
  { name: 'Grape', logo: '🍇' },
  { name: 'Watermelon', logo: '🍉' },
  { name: 'Strawberry', logo: '🍓' },
]

const marquee = useMarquee({})
</script>

<template>
  <div class="stack">
    <Marquee.RootProvider :value="marquee" :class="styles.Root">
      <Marquee.Viewport :class="styles.Viewport">
        <Marquee.Content :class="styles.Content">
          <Marquee.Item v-for="item in items" :key="item.name" :class="styles.Item">
            <span :class="styles.ItemLogo">{{ item.logo }}</span>
            <span :class="styles.ItemName">{{ item.name }}</span>
          </Marquee.Item>
        </Marquee.Content>
      </Marquee.Viewport>
    </Marquee.RootProvider>

    <div class="hstack">
      <button :class="button.Root" @click="marquee.pause()">Pause</button>
      <button :class="button.Root" @click="marquee.resume()">Resume</button>
    </div>
  </div>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Marquee, useMarquee } from '@ark-ui/svelte/marquee'
  import button from 'styles/button.module.css'
  import styles from 'styles/marquee.module.css'

  const items = [
    { name: 'Apple', logo: '🍎' },
    { name: 'Banana', logo: '🍌' },
    { name: 'Cherry', logo: '🍒' },
    { name: 'Grape', logo: '🍇' },
    { name: 'Watermelon', logo: '🍉' },
    { name: 'Strawberry', logo: '🍓' },
  ]

  const id = $props.id()
  const marquee = useMarquee(() => ({ id }))
</script>

<div class="stack">
  <Marquee.RootProvider value={marquee} class={styles.Root}>
    <Marquee.Viewport class={styles.Viewport}>
      <Marquee.Content class={styles.Content}>
        {#each items as item}
          <Marquee.Item class={styles.Item}>
            <span class={styles.ItemLogo}>{item.logo}</span>
            <span class={styles.ItemName}>{item.name}</span>
          </Marquee.Item>
        {/each}
      </Marquee.Content>
    </Marquee.Viewport>
  </Marquee.RootProvider>

  <div class="hstack">
    <button class={button.Root} onclick={() => marquee().pause()}>Pause</button>
    <button class={button.Root} onclick={() => marquee().resume()}>Resume</button>
  </div>
</div>

```

> If you're using the `Marquee.RootProvider` component, you don't need to use the `Marquee.Root` component.

### Loops

Set the `loopCount` prop to run the marquee a specific number of times. Use `onLoopComplete` to track each loop
iteration and `onComplete` to know when all loops finish:

**Example: finite-loops**

#### React

```tsx
import { useState } from 'react'
import { Marquee } from '@ark-ui/react/marquee'
import styles from 'styles/marquee.module.css'

const items = [
  { name: 'Apple', logo: '🍎' },
  { name: 'Banana', logo: '🍌' },
  { name: 'Cherry', logo: '🍒' },
  { name: 'Grape', logo: '🍇' },
  { name: 'Watermelon', logo: '🍉' },
  { name: 'Strawberry', logo: '🍓' },
]

export const FiniteLoops = () => {
  const [loopCount, setLoopCount] = useState(0)
  const [completedCount, setCompletedCount] = useState(0)

  return (
    <div className="stack">
      <Marquee.Root
        loopCount={3}
        onLoopComplete={() => setLoopCount((prev) => prev + 1)}
        onComplete={() => setCompletedCount((prev) => prev + 1)}
        className={styles.Root}
      >
        <Marquee.Viewport className={styles.Viewport}>
          <Marquee.Content className={styles.Content}>
            {items.map((item, i) => (
              <Marquee.Item key={i} className={styles.Item}>
                <span className={styles.ItemLogo}>{item.logo}</span>
                <span className={styles.ItemName}>{item.name}</span>
              </Marquee.Item>
            ))}
          </Marquee.Content>
        </Marquee.Viewport>
      </Marquee.Root>

      <div>
        <p>Loop completed: {loopCount} times</p>
        <p>Animation completed: {completedCount} times</p>
      </div>
    </div>
  )
}

```

#### Solid

```tsx
import { For, createSignal } from 'solid-js'
import { Marquee } from '@ark-ui/solid/marquee'
import styles from 'styles/marquee.module.css'

const items = [
  { name: 'Apple', logo: '🍎' },
  { name: 'Banana', logo: '🍌' },
  { name: 'Cherry', logo: '🍒' },
  { name: 'Grape', logo: '🍇' },
  { name: 'Watermelon', logo: '🍉' },
  { name: 'Strawberry', logo: '🍓' },
]

export const FiniteLoops = () => {
  const [loopCount, setLoopCount] = createSignal(0)
  const [completedCount, setCompletedCount] = createSignal(0)

  return (
    <div class="stack">
      <Marquee.Root
        loopCount={3}
        onLoopComplete={() => setLoopCount((prev) => prev + 1)}
        onComplete={() => setCompletedCount((prev) => prev + 1)}
        class={styles.Root}
      >
        <Marquee.Viewport class={styles.Viewport}>
          <Marquee.Content class={styles.Content}>
            <For each={items}>
              {(item) => (
                <Marquee.Item class={styles.Item}>
                  <span class={styles.ItemLogo}>{item.logo}</span>
                  <span class={styles.ItemName}>{item.name}</span>
                </Marquee.Item>
              )}
            </For>
          </Marquee.Content>
        </Marquee.Viewport>
      </Marquee.Root>

      <div>
        <p>Loop completed: {loopCount()} times</p>
        <p>Animation completed: {completedCount()} times</p>
      </div>
    </div>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { ref } from 'vue'
import { Marquee } from '@ark-ui/vue/marquee'
import styles from 'styles/marquee.module.css'

const items = [
  { name: 'Apple', logo: '🍎' },
  { name: 'Banana', logo: '🍌' },
  { name: 'Cherry', logo: '🍒' },
  { name: 'Grape', logo: '🍇' },
  { name: 'Watermelon', logo: '🍉' },
  { name: 'Strawberry', logo: '🍓' },
]

const loopCount = ref(0)
const completedCount = ref(0)
</script>

<template>
  <div class="stack">
    <Marquee.Root :loop-count="3" :class="styles.Root" @loop-complete="loopCount++" @complete="completedCount++">
      <Marquee.Viewport :class="styles.Viewport">
        <Marquee.Content :class="styles.Content">
          <Marquee.Item v-for="item in items" :key="item.name" :class="styles.Item">
            <span :class="styles.ItemLogo">{{ item.logo }}</span>
            <span :class="styles.ItemName">{{ item.name }}</span>
          </Marquee.Item>
        </Marquee.Content>
      </Marquee.Viewport>
    </Marquee.Root>

    <div>
      <p>Loop completed: {{ loopCount }} times</p>
      <p>Animation completed: {{ completedCount }} times</p>
    </div>
  </div>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Marquee } from '@ark-ui/svelte/marquee'
  import styles from 'styles/marquee.module.css'

  const items = [
    { name: 'Apple', logo: '🍎' },
    { name: 'Banana', logo: '🍌' },
    { name: 'Cherry', logo: '🍒' },
    { name: 'Grape', logo: '🍇' },
    { name: 'Watermelon', logo: '🍉' },
    { name: 'Strawberry', logo: '🍓' },
  ]

  let loopCount = $state(0)
  let completedCount = $state(0)
</script>

<div class="stack">
  <Marquee.Root
    loopCount={3}
    onLoopComplete={() => loopCount++}
    onComplete={() => completedCount++}
    class={styles.Root}
  >
    <Marquee.Viewport class={styles.Viewport}>
      <Marquee.Content class={styles.Content}>
        {#each items as item}
          <Marquee.Item class={styles.Item}>
            <span class={styles.ItemLogo}>{item.logo}</span>
            <span class={styles.ItemName}>{item.name}</span>
          </Marquee.Item>
        {/each}
      </Marquee.Content>
    </Marquee.Viewport>
  </Marquee.Root>

  <div>
    <p>Loop completed: {loopCount} times</p>
    <p>Animation completed: {completedCount} times</p>
  </div>
</div>

```

### Edges

Add `Marquee.Edge` components to create fade effects at the start and end of the scrolling area:

**Example: with-edges**

#### React

```tsx
import { Marquee } from '@ark-ui/react/marquee'
import styles from 'styles/marquee.module.css'

const items = [
  { name: 'Apple', logo: '🍎' },
  { name: 'Banana', logo: '🍌' },
  { name: 'Cherry', logo: '🍒' },
  { name: 'Grape', logo: '🍇' },
  { name: 'Watermelon', logo: '🍉' },
  { name: 'Strawberry', logo: '🍓' },
]

export const WithEdges = () => (
  <Marquee.Root className={styles.Root}>
    <Marquee.Edge side="start" className={styles.Edge} />
    <Marquee.Viewport className={styles.Viewport}>
      <Marquee.Content className={styles.Content}>
        {items.map((item, i) => (
          <Marquee.Item key={i} className={styles.Item}>
            <span className={styles.ItemLogo}>{item.logo}</span>
            <span className={styles.ItemName}>{item.name}</span>
          </Marquee.Item>
        ))}
      </Marquee.Content>
    </Marquee.Viewport>
    <Marquee.Edge side="end" className={styles.Edge} />
  </Marquee.Root>
)

```

#### Solid

```tsx
import { For } from 'solid-js'
import { Marquee } from '@ark-ui/solid/marquee'
import styles from 'styles/marquee.module.css'

const items = [
  { name: 'Apple', logo: '🍎' },
  { name: 'Banana', logo: '🍌' },
  { name: 'Cherry', logo: '🍒' },
  { name: 'Grape', logo: '🍇' },
  { name: 'Watermelon', logo: '🍉' },
  { name: 'Strawberry', logo: '🍓' },
]

export const WithEdges = () => (
  <Marquee.Root class={styles.Root}>
    <Marquee.Edge side="start" class={styles.Edge} />
    <Marquee.Viewport class={styles.Viewport}>
      <Marquee.Content class={styles.Content}>
        <For each={items}>
          {(item) => (
            <Marquee.Item class={styles.Item}>
              <span class={styles.ItemLogo}>{item.logo}</span>
              <span class={styles.ItemName}>{item.name}</span>
            </Marquee.Item>
          )}
        </For>
      </Marquee.Content>
    </Marquee.Viewport>
    <Marquee.Edge side="end" class={styles.Edge} />
  </Marquee.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Marquee } from '@ark-ui/vue/marquee'
import styles from 'styles/marquee.module.css'

const items = [
  { name: 'Apple', logo: '🍎' },
  { name: 'Banana', logo: '🍌' },
  { name: 'Cherry', logo: '🍒' },
  { name: 'Grape', logo: '🍇' },
  { name: 'Watermelon', logo: '🍉' },
  { name: 'Strawberry', logo: '🍓' },
]
</script>

<template>
  <Marquee.Root :class="styles.Root">
    <Marquee.Edge side="start" :class="styles.Edge" />
    <Marquee.Viewport :class="styles.Viewport">
      <Marquee.Content :class="styles.Content">
        <Marquee.Item v-for="item in items" :key="item.name" :class="styles.Item">
          <span :class="styles.ItemLogo">{{ item.logo }}</span>
          <span :class="styles.ItemName">{{ item.name }}</span>
        </Marquee.Item>
      </Marquee.Content>
    </Marquee.Viewport>
    <Marquee.Edge side="end" :class="styles.Edge" />
  </Marquee.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Marquee } from '@ark-ui/svelte/marquee'
  import styles from 'styles/marquee.module.css'

  const items = [
    { name: 'Apple', logo: '🍎' },
    { name: 'Banana', logo: '🍌' },
    { name: 'Cherry', logo: '🍒' },
    { name: 'Grape', logo: '🍇' },
    { name: 'Watermelon', logo: '🍉' },
    { name: 'Strawberry', logo: '🍓' },
  ]
</script>

<Marquee.Root class={styles.Root}>
  <Marquee.Edge side="start" class={styles.Edge} />
  <Marquee.Viewport class={styles.Viewport}>
    <Marquee.Content class={styles.Content}>
      {#each items as item}
        <Marquee.Item class={styles.Item}>
          <span class={styles.ItemLogo}>{item.logo}</span>
          <span class={styles.ItemName}>{item.name}</span>
        </Marquee.Item>
      {/each}
    </Marquee.Content>
  </Marquee.Viewport>
  <Marquee.Edge side="end" class={styles.Edge} />
</Marquee.Root>

```

## Guides

### Content Animation

The Marquee component requires CSS keyframe animations to function properly. You'll need to define animations for both
horizontal and vertical scrolling:

```css
@keyframes marqueeX {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(var(--marquee-translate));
  }
}

@keyframes marqueeY {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(var(--marquee-translate));
  }
}
```

The component automatically applies the appropriate animation (`marqueeX` or `marqueeY`) based on the scroll direction
and uses the `--marquee-translate` CSS variable for seamless looping.

You can target specific parts of the marquee using `data-part` attributes for custom styling:

- `[data-part="root"]` - The root container
- `[data-part="viewport"]` - The scrolling viewport
- `[data-part="content"]` - The content wrapper (receives animation)
- `[data-part="item"]` - Individual marquee items
- `[data-part="edge"]` - Edge gradient overlays

### Best Practices

- **Enable pause-on-interaction**: Use `pauseOnInteraction` to allow users to pause animations on hover or focus,
  improving accessibility and readability
- **Use descriptive labels**: Provide meaningful `aria-label` values that describe the marquee content (e.g., "Partner
  logos", "Latest announcements")
- **Avoid for critical information**: Don't use marquees for essential content that users must read, as continuously
  moving text can be difficult to process. Consider static displays for important information

## API Reference

### Props

**Component API Reference**

#### React

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `autoFill` | `boolean` | No | Whether to automatically duplicate content to fill the container. |
| `defaultPaused` | `boolean` | No | Whether the marquee is paused by default. |
| `delay` | `number` | No | The delay before the animation starts (in seconds). |
| `ids` | `Partial<{ root: string; viewport: string; content: (index: number) => string }>` | No | The ids of the elements in the marquee. Useful for composition. |
| `loopCount` | `number` | No | The number of times to loop the animation (0 = infinite). |
| `onComplete` | `() => void` | No | Function called when the marquee completes all loops and stops.
Only fires for finite loops (loopCount > 0). |
| `onLoopComplete` | `() => void` | No | Function called when the marquee completes one loop iteration. |
| `onPauseChange` | `(details: PauseStatusDetails) => void` | No | Function called when the pause status changes. |
| `paused` | `boolean` | No | Whether the marquee is paused. |
| `pauseOnInteraction` | `boolean` | No | Whether to pause the marquee on user interaction (hover, focus). |
| `reverse` | `boolean` | No | Whether to reverse the animation direction. |
| `side` | `Side` | No | The side/direction the marquee scrolls towards. |
| `spacing` | `string` | No | The spacing between marquee items. |
| `speed` | `number` | No | The speed of the marquee animation in pixels per second. |
| `translations` | `IntlTranslations` | No | The localized messages to use. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | marquee |
| `[data-part]` | root |
| `[data-state]` | "paused" | "idle" |
| `[data-orientation]` | The orientation of the marquee |
| `[data-paused]` | Present when paused |


**Root CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--marquee-duration` | The marquee duration value for the Root |
| `--marquee-spacing` | The marquee spacing value for the Root |
| `--marquee-delay` | The marquee delay value for the Root |
| `--marquee-loop-count` | The marquee loop count value for the Root |
| `--marquee-translate` | The marquee translate value for the Root |


**Content Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | marquee |
| `[data-part]` |  |
| `[data-index]` | The index of the item |
| `[data-orientation]` | The orientation of the content |
| `[data-side]` |  |
| `[data-reverse]` |  |
| `[data-clone]` |  |


**Edge Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `side` | `Side` | Yes | The side where the edge gradient should appear. |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Edge Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | marquee |
| `[data-part]` |  |
| `[data-side]` |  |
| `[data-orientation]` | The orientation of the edge |


**Item Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseMarqueeReturn` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Viewport Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Viewport Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | marquee |
| `[data-part]` |  |
| `[data-orientation]` | The orientation of the viewport |
| `[data-side]` |  |


#### Solid

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `autoFill` | `boolean` | No | Whether to automatically duplicate content to fill the container. |
| `defaultPaused` | `boolean` | No | Whether the marquee is paused by default. |
| `delay` | `number` | No | The delay before the animation starts (in seconds). |
| `ids` | `Partial<{ root: string; viewport: string; content: (index: number) => string }>` | No | The ids of the elements in the marquee. Useful for composition. |
| `loopCount` | `number` | No | The number of times to loop the animation (0 = infinite). |
| `onComplete` | `() => void` | No | Function called when the marquee completes all loops and stops.
Only fires for finite loops (loopCount > 0). |
| `onLoopComplete` | `() => void` | No | Function called when the marquee completes one loop iteration. |
| `onPauseChange` | `(details: PauseStatusDetails) => void` | No | Function called when the pause status changes. |
| `paused` | `boolean` | No | Whether the marquee is paused. |
| `pauseOnInteraction` | `boolean` | No | Whether to pause the marquee on user interaction (hover, focus). |
| `reverse` | `boolean` | No | Whether to reverse the animation direction. |
| `side` | `Side` | No | The side/direction the marquee scrolls towards. |
| `spacing` | `string` | No | The spacing between marquee items. |
| `speed` | `number` | No | The speed of the marquee animation in pixels per second. |
| `translations` | `IntlTranslations` | No | The localized messages to use. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | marquee |
| `[data-part]` | root |
| `[data-state]` | "paused" | "idle" |
| `[data-orientation]` | The orientation of the marquee |
| `[data-paused]` | Present when paused |


**Root CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--marquee-duration` | The marquee duration value for the Root |
| `--marquee-spacing` | The marquee spacing value for the Root |
| `--marquee-delay` | The marquee delay value for the Root |
| `--marquee-loop-count` | The marquee loop count value for the Root |
| `--marquee-translate` | The marquee translate value for the Root |


**Content Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | marquee |
| `[data-part]` |  |
| `[data-index]` | The index of the item |
| `[data-orientation]` | The orientation of the content |
| `[data-side]` |  |
| `[data-reverse]` |  |
| `[data-clone]` |  |


**Edge Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `side` | `Side` | Yes | The side where the edge gradient should appear. |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Edge Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | marquee |
| `[data-part]` |  |
| `[data-side]` |  |
| `[data-orientation]` | The orientation of the edge |


**Item Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseMarqueeReturn` | Yes |  |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Viewport Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Viewport Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | marquee |
| `[data-part]` |  |
| `[data-orientation]` | The orientation of the viewport |
| `[data-side]` |  |


#### Vue

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `autoFill` | `boolean` | No | Whether to automatically duplicate content to fill the container. |
| `defaultPaused` | `boolean` | No | Whether the marquee is paused by default. |
| `delay` | `number` | No | The delay before the animation starts (in seconds). |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ root: string; viewport: string; content: (index: number) => string }>` | No | The ids of the elements in the marquee. Useful for composition. |
| `loopCount` | `number` | No | The number of times to loop the animation (0 = infinite). |
| `paused` | `boolean` | No | Whether the marquee is paused. |
| `pauseOnInteraction` | `boolean` | No | Whether to pause the marquee on user interaction (hover, focus). |
| `reverse` | `boolean` | No | Whether to reverse the animation direction. |
| `side` | `Side` | No | The side/direction the marquee scrolls towards. |
| `spacing` | `string` | No | The spacing between marquee items. |
| `speed` | `number` | No | The speed of the marquee animation in pixels per second. |
| `translations` | `IntlTranslations` | No | The localized messages to use. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | marquee |
| `[data-part]` | root |
| `[data-state]` | "paused" | "idle" |
| `[data-orientation]` | The orientation of the marquee |
| `[data-paused]` | Present when paused |


**Root CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--marquee-duration` | The marquee duration value for the Root |
| `--marquee-spacing` | The marquee spacing value for the Root |
| `--marquee-delay` | The marquee delay value for the Root |
| `--marquee-loop-count` | The marquee loop count value for the Root |
| `--marquee-translate` | The marquee translate value for the Root |


**Content Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | marquee |
| `[data-part]` |  |
| `[data-index]` | The index of the item |
| `[data-orientation]` | The orientation of the content |
| `[data-side]` |  |
| `[data-reverse]` |  |
| `[data-clone]` |  |


**Edge Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `side` | `Side` | Yes | The side where the edge gradient should appear. |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Edge Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | marquee |
| `[data-part]` |  |
| `[data-side]` |  |
| `[data-orientation]` | The orientation of the edge |


**Item Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `MarqueeApi<PropTypes>` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Viewport Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Viewport Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | marquee |
| `[data-part]` |  |
| `[data-orientation]` | The orientation of the viewport |
| `[data-side]` |  |


#### Svelte

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `autoFill` | `boolean` | No | Whether to automatically duplicate content to fill the container. |
| `defaultPaused` | `boolean` | No | Whether the marquee is paused by default. |
| `delay` | `number` | No | The delay before the animation starts (in seconds). |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ root: string; viewport: string; content: (index: number) => string }>` | No | The ids of the elements in the marquee. Useful for composition. |
| `loopCount` | `number` | No | The number of times to loop the animation (0 = infinite). |
| `onComplete` | `() => void` | No | Function called when the marquee completes all loops and stops.
Only fires for finite loops (loopCount > 0). |
| `onLoopComplete` | `() => void` | No | Function called when the marquee completes one loop iteration. |
| `onPauseChange` | `(details: PauseStatusDetails) => void` | No | Function called when the pause status changes. |
| `paused` | `boolean` | No | Whether the marquee is paused. |
| `pauseOnInteraction` | `boolean` | No | Whether to pause the marquee on user interaction (hover, focus). |
| `ref` | `Element` | No |  |
| `reverse` | `boolean` | No | Whether to reverse the animation direction. |
| `side` | `Side` | No | The side/direction the marquee scrolls towards. |
| `spacing` | `string` | No | The spacing between marquee items. |
| `speed` | `number` | No | The speed of the marquee animation in pixels per second. |
| `translations` | `IntlTranslations` | No | The localized messages to use. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | marquee |
| `[data-part]` | root |
| `[data-state]` | "paused" | "idle" |
| `[data-orientation]` | The orientation of the marquee |
| `[data-paused]` | Present when paused |


**Root CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--marquee-duration` | The marquee duration value for the Root |
| `--marquee-spacing` | The marquee spacing value for the Root |
| `--marquee-delay` | The marquee delay value for the Root |
| `--marquee-loop-count` | The marquee loop count value for the Root |
| `--marquee-translate` | The marquee translate value for the Root |


**Content Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Content Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | marquee |
| `[data-part]` |  |
| `[data-index]` | The index of the item |
| `[data-orientation]` | The orientation of the content |
| `[data-side]` |  |
| `[data-reverse]` |  |
| `[data-clone]` |  |


**Edge Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `side` | `Side` | Yes | The side where the edge gradient should appear. |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Edge Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | marquee |
| `[data-part]` |  |
| `[data-side]` |  |
| `[data-orientation]` | The orientation of the edge |


**Item Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseMarqueeReturn` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Viewport Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Viewport Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | marquee |
| `[data-part]` |  |
| `[data-orientation]` | The orientation of the viewport |
| `[data-side]` |  |


### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `paused` | `boolean` | Whether the marquee is currently paused. |
| `orientation` | `"horizontal" | "vertical"` | The current orientation of the marquee. |
| `side` | `Side` | The current side/direction of the marquee. |
| `multiplier` | `number` | The multiplier for auto-fill. Indicates how many times to duplicate content.
When autoFill is enabled and content is smaller than container, this returns
the number of additional copies needed. Otherwise returns 1. |
| `contentCount` | `number` | The total number of content elements to render (original + clones).
Use this value when rendering your content in a loop. |
| `pause` | `VoidFunction` | Pause the marquee animation. |
| `resume` | `VoidFunction` | Resume the marquee animation. |
| `togglePause` | `VoidFunction` | Toggle the pause state. |
| `restart` | `VoidFunction` | Restart the marquee animation from the beginning. |