Logo Marquee / Client Strip

<?php
if ( ! function_exists( 'scseed_lm_init' ) ) :

function scseed_lm_init() {
    add_shortcode( 'scseed_logo_marquee', 'scseed_lm_render' );
}
add_action( 'init', 'scseed_lm_init' );

function scseed_lm_render( $atts ) {
    $atts = shortcode_atts( array(
        'speed' => '40s',
        'gap'   => '3rem',
    ), $atts, 'scseed_logo_marquee' );

    $logos = apply_filters( 'scseed_logo_marquee_logos', array(
        array( 'url' => '', 'alt' => 'Acme Corp',    'fallback_text' => 'Acme Corp' ),
        array( 'url' => '', 'alt' => 'Brightwave',   'fallback_text' => 'Brightwave' ),
        array( 'url' => '', 'alt' => 'NexaCore',     'fallback_text' => 'NexaCore' ),
        array( 'url' => '', 'alt' => 'Flowstate',    'fallback_text' => 'Flowstate' ),
        array( 'url' => '', 'alt' => 'Arkon Labs',   'fallback_text' => 'Arkon Labs' ),
        array( 'url' => '', 'alt' => 'PinnacleCo',   'fallback_text' => 'PinnacleCo' ),
    ) );

    $speed = esc_attr( $atts['speed'] );
    $gap   = esc_attr( $atts['gap'] );

    ob_start();
    ?>
    <div class="scseed-lm-outer">
        <div class="scseed-lm-track" style="animation-duration:<?php echo $speed; ?>;gap:<?php echo $gap; ?>">
            <?php
            // Render items twice for seamless infinite loop
            for ( $pass = 0; $pass < 2; $pass++ ) :
                foreach ( $logos as $logo ) :
            ?>
            <div class="scseed-lm-item" aria-hidden="<?php echo $pass > 0 ? 'true' : 'false'; ?>">
                <?php if ( ! empty( $logo['url'] ) ) : ?>
                <img src="<?php echo esc_url( $logo['url'] ); ?>" alt="<?php echo esc_attr( $logo['alt'] ); ?>" loading="lazy">
                <?php else : ?>
                <span class="scseed-lm-fallback"><?php echo esc_html( $logo['fallback_text'] ); ?></span>
                <?php endif; ?>
            </div>
            <?php
                endforeach;
            endfor;
            ?>
        </div>
    </div>
    <?php
    return ob_get_clean();
}

endif;

.scseed-lm-outer {
    overflow: hidden;
    width: 100%;
    padding: 1.5rem 0;
}

.scseed-lm-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: scseed-marquee linear infinite forwards;
}

@keyframes scseed-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.scseed-lm-outer:hover .scseed-lm-track {
    animation-play-state: paused;
}

.scseed-lm-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem;
}

.scseed-lm-item img {
    max-height: 48px;
    width: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.6;
    transition: filter 0.25s ease, opacity 0.25s ease;
    display: block;
}

.scseed-lm-item img:hover {
    filter: grayscale(0);
    opacity: 1;
}

.scseed-lm-fallback {
    font-size: 1rem;
    font-weight: 700;
    color: #bbbbbb;
    white-space: nowrap;
    transition: color 0.25s ease;
    user-select: none;
}

.scseed-lm-item:hover .scseed-lm-fallback {
    color: #7c5cff;
}