Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Marquee

An infinitely scrolling content strip powered by CSS animation. Pauses on hover by default.

Usage
Tailwind CSS Alpine.js Laravel Livewire Blade
example.blade.php 
<x-slate::marquee>
    <x-slate::badge variant="secondary">Tailwind CSS</x-slate::badge>
    <x-slate::badge variant="secondary">Alpine.js</x-slate::badge>
    <x-slate::badge variant="secondary">Laravel</x-slate::badge>
    <x-slate::badge variant="secondary">Livewire</x-slate::badge>
    <x-slate::badge variant="secondary">Blade</x-slate::badge>
</x-slate::marquee>

Reverse
Scrolling the other way → Still moving → Keep going →
example.blade.php 
<x-slate::marquee reverse :duration="20">
    <span class="text-sm text-muted-foreground">Scrolling the other way →</span>
    <span class="text-sm text-muted-foreground">Still moving →</span>
    <span class="text-sm text-muted-foreground">Keep going →</span>
</x-slate::marquee>
Last updated .