Marquee code

@props([
    'speed' => 'normal',
])

@php
    /*
    | Infinite horizontal marquee, typically used for a logo strip. The slot is
    | duplicated automatically so the loop is seamless. Edge fade is applied via
    | a mask. Pauses on hover.
    |
    | speed: slow, normal, fast
    |
    | Usage:
    |   <x-ui.marquee>
    |       <img ...><img ...>
    |   </x-ui.marquee>
    */
    $duration = ['slow' => '50s', 'normal' => '35s', 'fast' => '20s'][$speed] ?? '35s';
@endphp

<div
    {{ $attributes->merge(['class' => 'group relative flex overflow-hidden [mask-image:linear-gradient(to_right,transparent,black_12%,black_88%,transparent)]']) }}
    style="--marquee-duration: {{ $duration }}"
>
    <div class="flex shrink-0 items-center gap-16 pe-16 animate-[marquee_var(--marquee-duration)_linear_infinite] group-hover:[animation-play-state:paused]">
        {{ $slot }}
    </div>
    <div aria-hidden="true" class="flex shrink-0 items-center gap-16 pe-16 animate-[marquee_var(--marquee-duration)_linear_infinite] group-hover:[animation-play-state:paused]">
        {{ $slot }}
    </div>
</div>