Marquee

#Basic usage

marquee/basic Vue React

Qinghua

Celadon

Zhusha

Ultramarine

Gamboge

Indigo

marquee/basic.vue

<script setup lang="ts">
import { Marquee } from "@bysages/vue";

const entries = ["Qinghua", "Celadon", "Zhusha", "Ultramarine", "Gamboge", "Indigo"];
</script>

<template>
  <Marquee.Root spacing="1.5rem">
    <Marquee.Viewport>
      <Marquee.Content class="gap-6">
        <Marquee.Item v-for="name in entries" :key="name">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M12 3 3 9l9 12 9-12-9-6Z" />
          </svg>
          <span>{{ name }}</span>
        </Marquee.Item>
      </Marquee.Content>
    </Marquee.Viewport>
  </Marquee.Root>
</template>

#Props

#Content

A styled part — no props of its own; it takes the anatomy's shared styling.

#Edge

Prop	Type	Default	Description
`side`	`Side`		The side where the edge gradient should appear.

#Item

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`autoFill`	`boolean`	`false`	Whether to automatically duplicate content to fill the container.
`defaultPaused`	`boolean`	`false`	Whether the marquee is paused by default.
`delay`	`number`	`0`	The delay before the animation starts (in seconds).
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ root: string; viewport: string; content: (index: number) => string; }>`		The ids of the elements in the marquee. Useful for composition.
`loopCount`	`number`	`0`	The number of times to loop the animation (0 = infinite).
`paused`	`boolean`		Whether the marquee is paused.
`pauseOnInteraction`	`boolean`	`false`	Whether to pause the marquee on user interaction (hover, focus).
`reverse`	`boolean`	`false`	Whether to reverse the animation direction.
`side`	`marquee.Side`	`"start"`	The side/direction the marquee scrolls towards.
`spacing`	`string`	`"1rem"`	The spacing between marquee items.
`speed`	`number`	`50`	The speed of the marquee animation in pixels per second.
`translations`	`marquee.IntlTranslations`		The localized messages to use.

#Viewport

A styled part — no props of its own; it takes the anatomy's shared styling.