Components

Marquee

A seamless, infinite scroll of its content — logos, testimonials, badges.

php artisan blatui:add marquee

Acme Globex Initech Umbrella Soylent Hooli Stark

<x-ui.marquee fade class="w-full max-w-xl py-2">
    @foreach (['Acme', 'Globex', 'Initech', 'Umbrella', 'Soylent', 'Hooli', 'Stark'] as $name)
        <span class="text-muted-foreground text-lg font-semibold whitespace-nowrap">{{ $name }}</span>
    @endforeach
</x-ui.marquee>

Reverse

🚀 Fast ♿ Accessible 🎨 Themeable 📦 Copy & own 🌙 Dark mode

{{-- direction="right" scrolls the other way; pause-on-hover is on by default. --}}
<x-ui.marquee direction="right" duration="25s" fade class="w-full max-w-xl py-1">
    @foreach (['🚀 Fast', '♿ Accessible', '🎨 Themeable', '📦 Copy & own', '🌙 Dark mode'] as $f)
        <x-ui.badge tone="neutral" class="whitespace-nowrap">{{ $f }}</x-ui.badge>
    @endforeach
</x-ui.marquee>

API Reference

Props, slots and exposed methods for <x-ui.marquee>.

Props

Prop	Type	Default	Description
`direction`	`string`	`'left'`	Scroll direction. The vertical directions (up, down) require a fixed height on the element. `left` `right` `up` `down`
`duration`	`string`	`'40s'`	CSS time for one full loop. Larger values scroll more slowly.
`gap`	`string`	`'1rem'`	CSS length for the spacing between items and between the two repeated groups.
`pauseOnHover`	`bool`	`true`	Pause the scroll while the pointer is over the marquee.
`fade`	`bool`	`false`	Fade the leading and trailing edges with a CSS mask.

Slots

Slot	Description
`default`	The items to scroll (logos, testimonials, badges). The content is duplicated for a seamless loop; the duplicate is aria-hidden so screen readers read it once. Animation is disabled under prefers-reduced-motion.