Marquee

A horizontal marquee component that enables infinite seamless scrolling of text, images, or any card content along a horizontal track. Ideal for displaying promotional slogans or partner brands on marketing pages and Hero sections. Supports bidirectional scrolling, hover pause, and edge fade effects, and adapts to system motion preferences through CSS media queries.

Demo

Preview

⚡️ 快速流畅💥 新野蛮主义🚀 VUE 3 + TAILWIND🔥 受 SHADCN 启发

⚡️ 快速流畅💥 新野蛮主义🚀 VUE 3 + TAILWIND🔥 受 SHADCN 启发

💻 代码与 BUG🛠️ 从构建到发布🌟 开源

💻 代码与 BUG🛠️ 从构建到发布🌟 开源

变体

默认变体DEFAULT

默认变体DEFAULT

静音变体MUTED

静音变体MUTED

尺寸

小尺寸SMALL

小尺寸SMALL

大尺寸LARGE

大尺寸LARGE

提示：本组件尊重系统的「减少动态效果」设置。启用后跑马灯将停止滚动并以静态形式展示内容。

Installation

pnpm dlx brutx-vue@latest add marquee

Usage

<script setup>
import { Marquee } from 'brutx-ui-vue'
</script>

<template>
    <Marquee :speed="20" fade>
        <span>⚡️ FAST AND FLUID</span>
        <span>💥 NEO-BRUTALISM</span>
        <span>🚀 VUE 3 + TAILWIND</span>
    </Marquee>
</template>

Variants

Control the marquee's background and text color via the variant property.

Variant	Description
default	Background color background, dark text
primary	Primary (coral red) background
accent	Accent (yellow) background
muted	Muted (gray) background

<Marquee variant="primary">
    <span>Primary Marquee</span>
</Marquee>

Sizes

Control text size and padding via the size property.

Size	Description
sm	Small text, compact padding
default	Default size
lg	Large text, generous padding

<Marquee size="lg">
    <span>Large Marquee</span>
</Marquee>

API Reference

Marquee — Props

Name	Type	Default	Description
direction	"right" | "left" | undefined	"left"	Sets the loop direction: left moves left and right moves right.
Details Declared type "right" | "left" | undefined Literal values "left" "right" Default value details Declaration 'left' Source: packages/ui/src/components/marquee/Marquee.vue Resolved value "left" Source Marquee.vue:13 packages/ui/src/components/marquee/Marquee.vue
speed	number | undefined	20	Sets the duration of one animation cycle in seconds. Smaller values move faster, and the effective duration is at least 0.1 seconds.
Details Declared type number | undefined Default value details Declaration DEFAULT_SPEED Source: packages/ui/src/components/marquee/Marquee.vue Resolved value 20 Source Marquee.vue:14 packages/ui/src/components/marquee/Marquee.vue
pauseOnHover	boolean | undefined	false	Pauses the looping animation while the pointer hovers over the marquee when enabled.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/marquee/Marquee.vue Resolved value false Source Marquee.vue:15 packages/ui/src/components/marquee/Marquee.vue
fade	boolean | undefined	false	Enables fade masks at the left and right edges of the container.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/marquee/Marquee.vue Resolved value false Source Marquee.vue:16 packages/ui/src/components/marquee/Marquee.vue
variant	"accent" | "default" | "muted" | "primary" | undefined	"default"	Sets the marquee container background and text color variant.
Details Declared type NonNullable<"default" | "primary" | "accent" | "muted" | null | undefined> | undefined Literal values "accent" "default" "muted" "primary" Default value details Declaration 'default' Source: packages/ui/src/components/marquee/Marquee.vue Resolved value "default" Source Marquee.vue:17 packages/ui/src/components/marquee/Marquee.vue
size	"default" | "lg" | "sm" | undefined	"default"	Sets the scale for the content text size and container padding.
Details Declared type NonNullable<"default" | "lg" | "sm" | null | undefined> | undefined Literal values "default" "lg" "sm" Default value details Declaration 'default' Source: packages/ui/src/components/marquee/Marquee.vue Resolved value "default" Source Marquee.vue:18 packages/ui/src/components/marquee/Marquee.vue
class	string | undefined	undefined	Additional CSS classes applied to the outer marquee container.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/marquee/Marquee.vue Resolved value undefined Source Marquee.vue:19 packages/ui/src/components/marquee/Marquee.vue

Marquee — Slots

Name	Signature or type	Description
#default	{}	Provides the content that scrolls repeatedly along the marquee track.
Details Declared type {} Source Marquee.vue packages/ui/src/components/marquee/Marquee.vue

Accessibility

• Motion Reduction: The component respects the prefers-reduced-motion system setting. When "Reduce Motion" is enabled, CSS stops the track animation and hides the repeated track. The repeated track remains in the DOM to keep server-rendered and client hydration structure consistent. It has aria-hidden and inert, so it does not expose duplicate content or interactive elements. CSS responds immediately when the system preference changes.

Customization

Variable	Default	Description
--speed	20s	Single cycle animation duration, automatically set by the speed property