Phara UI v2.x
Login

Marquee

An infinitely scrolling ticker built on CSS animations — no JavaScript. Works with any content: text, logos, cards, images. Pauses on hover and fades edges by default.

Text Ticker

The simplest use — inline text items separated by custom spacing. Hover to pause, edge fade included by default.

Blade 
<x-ui::marquee gap="2rem">
    <span class="text-sm font-medium">🚀 New release v2.0</span>
    <span class="text-sm font-medium">✨ Dark mode support</span>
    <span class="text-sm font-medium">📦 50+ components</span>
    <span class="text-sm font-medium">🎨 Fully customisable</span>
    <span class="text-sm font-medium">⚡ Livewire-ready</span>
</x-ui::marquee>
Logo Strip

A common "trusted by" or "built with" section. Items start grayscale and reveal colour on hover while the marquee pauses.

Blade 
<x-ui::marquee :speed="20" gap="3rem" class="py-6">
    @foreach($brands as $brand)
        <div class="flex items-center gap-2 text-zinc-400 dark:text-zinc-500 grayscale hover:grayscale-0 hover:text-zinc-700 dark:hover:text-zinc-200 transition-all">
            <x-ui::icon :name="$brand['icon']" class="w-6 h-6" />
            <span class="text-sm font-semibold tracking-tight">{{ $brand['name'] }}</span>
        </div>
    @endforeach
</x-ui::marquee>
Cards

Rich card content — testimonials, product features, or media. Set a fixed width on each card so they don't stretch. Two rows scrolling in opposite directions create depth.

Blade 
<x-ui::marquee gap="1rem" :speed="35" class="py-2">
    @foreach($testimonials as $t)
        <div class="w-72 shrink-0 rounded-xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 p-4 shadow-sm">
            <p class="text-sm text-zinc-600 dark:text-zinc-300">"{{ $t['quote'] }}"</p>
            <div class="mt-3 flex items-center gap-2">
                <div class="w-7 h-7 rounded-full bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center text-xs font-bold text-primary-700 dark:text-primary-300">
                    {{ $t['initials'] }}
                </div>
                <span class="text-xs font-medium text-zinc-700 dark:text-zinc-200">{{ $t['name'] }}</span>
            </div>
        </div>
    @endforeach
</x-ui::marquee>
Direction

Control scroll direction with the direction prop. Pair left and right rows for a visually dynamic section.

direction="left" (default)

direction="right"

Blade 
<x-ui::marquee direction="left">...</x-ui::marquee>   {{-- default --}}
<x-ui::marquee direction="right">...</x-ui::marquee>
Speed

The :speed prop is the animation duration in seconds — lower = faster. Default is 30.

Fast (8s)

Default (25s)

Slow (55s)

Blade 
<x-ui::marquee :speed="10">...</x-ui::marquee>  {{-- fast --}}
<x-ui::marquee :speed="30">...</x-ui::marquee>  {{-- default --}}
<x-ui::marquee :speed="60">...</x-ui::marquee>  {{-- slow --}}
Vertical

Use direction="up" or direction="down" for a vertical ticker. Set an explicit height on the component — the mask fade also flips to vertical.

direction="up"

direction="down"

Blade 
<x-ui::marquee direction="up" class="h-48" gap="0.75rem">
    <div class="text-sm text-zinc-600 dark:text-zinc-300">✅ 99.9% uptime SLA</div>
    <div class="text-sm text-zinc-600 dark:text-zinc-300">🔒 SOC 2 Type II certified</div>
    <div class="text-sm text-zinc-600 dark:text-zinc-300">🌍 200+ edge locations</div>
    <div class="text-sm text-zinc-600 dark:text-zinc-300">⚡ &lt;50ms response time</div>
</x-ui::marquee>
No Fade

Set :fade="false" to remove the gradient edge mask. Combine with :pause-on-hover="false" for a non-stop ticker.

Blade 
<x-ui::marquee :fade="false">...</x-ui::marquee>

{{-- No fade + no pause on hover --}}
<x-ui::marquee :fade="false" :pause-on-hover="false">...</x-ui::marquee>