Layout

Marquee

A horizontal or vertical strip of content that scrolls in an infinite loop.

html
<UiMarquee />

Tag

tag is the wrapper element. Swap it for a landmark when the strip is a real region of the page rather than decoration.

Bundy UIReliableFastThemeableAccessibleDelightful
Bundy UIReliableFastThemeableAccessibleDelightful
Bundy UIReliableFastThemeableAccessibleDelightful
Bundy UIReliableFastThemeableAccessibleDelightful

Orientation

orientation scrolls the strip horizontally or vertically. Vertical needs a height on the marquee: there's nothing else to bound the loop.

Bundy UI
Reliable
Fast
Themeable
Accessible
Delightful
Bundy UI
Reliable
Fast
Themeable
Accessible
Delightful
Bundy UI
Reliable
Fast
Themeable
Accessible
Delightful
Bundy UI
Reliable
Fast
Themeable
Accessible
Delightful

Reverse

reverse runs the loop the other way. It's most useful on a second marquee stacked under the first — two strips moving in opposite directions read as motion rather than as a single drift.

Bundy UIReliableFastThemeableAccessibleDelightful
Bundy UIReliableFastThemeableAccessibleDelightful
Bundy UIReliableFastThemeableAccessibleDelightful
Bundy UIReliableFastThemeableAccessibleDelightful

Pause on hover

pauseOnHover stops the loop while the pointer is over the strip. Worth setting whenever the content is something you'd want to read or click, which is most content that isn't purely decorative.

Bundy UIReliableFastThemeableAccessibleDelightful
Bundy UIReliableFastThemeableAccessibleDelightful
Bundy UIReliableFastThemeableAccessibleDelightful
Bundy UIReliableFastThemeableAccessibleDelightful

Repeat

repeat sets how many times the slot content repeats to fill the loop. Raise it when the content is short enough to leave a gap.

Bundy UI
Bundy UI
Bundy UI
Bundy UI
Bundy UI
Bundy UI
Bundy UI
Bundy UI

Overlay

overlay is the edge fade. On by default so items enter and leave rather than being clipped; turn it off when the marquee sits on a surface the fade can't match.

Bundy UIReliableFastThemeableAccessibleDelightful
Bundy UIReliableFastThemeableAccessibleDelightful
Bundy UIReliableFastThemeableAccessibleDelightful
Bundy UIReliableFastThemeableAccessibleDelightful
Bundy UIReliableFastThemeableAccessibleDelightful
Bundy UIReliableFastThemeableAccessibleDelightful
Bundy UIReliableFastThemeableAccessibleDelightful
Bundy UIReliableFastThemeableAccessibleDelightful

Default slot

Whatever you put in it is what repeats — tags here, but logos, quotes or avatars work the same way.

Bundy UIReliableFastThemeableAccessibleDelightful
Bundy UIReliableFastThemeableAccessibleDelightful
Bundy UIReliableFastThemeableAccessibleDelightful
Bundy UIReliableFastThemeableAccessibleDelightful

API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop
Type
Default
Description
keyof HTMLElementTagNameMap | Component
'div'
The HTML tag or Vue component to render the Marquee as.
"horizontal" | "vertical"
'horizontal'
The orientation the content scrolls in.
boolean
Reverse the scroll direction.
boolean
Pause the scroll animation while hovered.
number
4
The number of times the default slot is repeated to fill the loop seamlessly. Needs to be large enough that the repeated content overflows the container in every viewport it's shown in.
boolean
true
Fade the content into the surrounding background at both edges.

Slots

Slot
default