Components

Marquee

Continuously scrolls content in a loop, horizontally or vertically, with optional pause on hover and fade edges.

Component

View code

Show playground

Item 1

Item 2

Item 3

Item 4

Props

Props	Default	Type
`orientation`	`Orientation.HORIZONTAL`	`Orientation`
`speed`	`50`	`number`
`gap`	`'1rem'`	`string`
`isReversed`	`false`	`boolean`
`autoFill`	`true`	`boolean`
`pauseOnHover`	`false`	`boolean`
`isPaused`	`false`	`boolean`
`hasFadeEdges`	`false`	`boolean`
`fadeSize`	`10`	`number`
`delay`	`0`	`number`
`loopCount`	`0`	`number`
`ariaLabel`	—	`string`

Slots

Name	Description
`default`	Items to scroll. The slot is repeated to build a seamless loop.

 <template>
    <Marquee ariaLabel="Partners">
        <span>Item 1</span>
        <span>Item 2</span>
        <span>Item 3</span>
    </Marquee>
</template>

Usage

orientation

Sets the scroll axis via the Orientation enum. Vertical marquees need a parent with a fixed height.

 <template>
    <div class="h-64">
        <Marquee :orientation="Orientation.VERTICAL" />
    </div>
</template>

Type: Orientation
Default: Orientation.HORIZONTAL

Options

Value	Description
`HORIZONTAL`	Scrolls from right to left.
`VERTICAL`	Scrolls from bottom to top.

speed

Sets the scroll speed in pixels per second.

 <template>
    <Marquee :speed="100" />
</template>

Type: number
Default: 50

gap

Sets the space between items using any CSS length.

 <template>
    <Marquee gap="2rem" />
</template>

Type: string
Default: '1rem'

isReversed

Reverses the scroll direction.

 <template>
    <Marquee isReversed />
</template>

Type: boolean
Default: false

autoFill

Repeats the content as many times as needed to fill the container. Set it to false to loop the content only once.

 <template>
    <Marquee :autoFill="false" />
</template>

Type: boolean
Default: true

pauseOnHover

Pauses the animation while the pointer is over the marquee or focus is inside it.

 <template>
    <Marquee pauseOnHover />
</template>

Type: boolean
Default: false

isPaused

Pauses the animation from outside, for example with a play/pause button.

 <template>
    <Marquee :isPaused="isPaused" />
</template>

<script setup lang="ts">
const isPaused = ref(false)
</script>

Type: boolean
Default: false

hasFadeEdges

Fades the content out at both ends of the marquee.

 <template>
    <Marquee hasFadeEdges />
</template>

Type: boolean
Default: false

fadeSize

Sets how much of the container fades at each end, as a percentage from 0 to 50. Only applies when hasFadeEdges is enabled.

 <template>
    <Marquee hasFadeEdges :fadeSize="20" />
</template>

Type: number
Default: 10

delay

Sets the delay before the animation starts, in seconds.

 <template>
    <Marquee :delay="2" />
</template>

Type: number
Default: 0

loopCount

Sets how many times the content loops. 0 loops forever.

 <template>
    <Marquee :loopCount="3" />
</template>

Type: number
Default: 0

ariaLabel

Sets the accessible name of the marquee group.

 <template>
    <Marquee ariaLabel="Our partners" />
</template>

Type: string

Accessibility

The marquee renders as a group. Set ariaLabel to describe it.
Repeated copies are hidden from assistive technology with aria-hidden, so only the original content is announced.
The animation pauses automatically when the user prefers reduced motion.
Avoid using a marquee for critical information, since moving content is hard to read. Use pauseOnHover so users can stop it.

Emits

Value	Description
`@loopComplete`	Triggers after each loop iteration.
`@complete`	Triggers when all loops finish. Only fires when `loopCount` is greater than 0.

Example

 <template>
    <Marquee :loopCount="2" @complete="handleComplete" />
</template>

<script setup lang="ts">
const handleComplete = () => {
    console.log("Marquee finished")
}
</script>