Marquee
Marquee creates a horizontally scrolling content strip that loops infinitely — great for logo strips, announcement tickers, or scrolling tag lists.
Basic usage
vue
<Marquee>
<span>Vue 3</span>
<span>TypeScript</span>
<span>Vite</span>
<span>Tailwind CSS</span>
<span>Pinia</span>
</Marquee>Scroll right
vue
<Marquee direction="right">
<span>Alpha</span>
<span>Beta</span>
<span>Gamma</span>
<span>Delta</span>
</Marquee>Fast speed
vue
<Marquee :speed="6">
<span>Fast</span>
<span>Lane</span>
<span>Ticker</span>
<span>Scroll</span>
</Marquee>No pause on hover
vue
<Marquee :pause-on-hover="false">
<span>Hover won't pause me</span>
<span>Keep on rolling</span>
</Marquee>Props
| Prop | Type | Default | Description |
|---|---|---|---|
speed | number | 20 | Duration in seconds for one full loop |
direction | 'left' | 'right' | 'left' | Scroll direction |
pauseOnHover | boolean | true | Pause animation on hover |
gap | string | '1rem' | Gap between slotted items |
Slots
| Slot | Description |
|---|---|
default | Items to scroll. Duplicated internally for seamless looping. |