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>