More Layouts Snippets

See all ->

Hero Section

Responsive Card Grid

Bento Grid

Split Hero

Front-End Coding Playgrounds

Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.

See all ->

HTML Playground42 lessons · Click-based · Live preview

CSS PlaygroundLearn CSS with a live editor

JavaScript Playground60 lessons · DOM · Async · Canvas

React PlaygroundLearn React with a live code editor

GSAP PlaygroundLearn GSAP animation interactively

SCSS Playground45 lessons · Sass modules · tokens

Tailwind PlaygroundLearn Tailwind CSS with a live editor

Bootstrap 5 Playground50 lessons · live preview

Logo Cloud — Animated Trusted-By Marquee Snippet

Logo Cloud · Layouts · Plain HTML & CSS · Live preview

Share & Support

What's included

Features

Seamless infinite marquee

A duplicated logo set animated from translateX(0) to -50% loops endlessly with an invisible wrap-around — no JavaScript.

Edge-fade mask

A mask-image gradient fades the track to transparent at both edges, giving the premium vignette that polished marquees have.

Pause on hover

animation-play-state: paused halts the scroll while hovered so users can read or click a specific logo.

Grayscale-to-colour hover

Logos sit grayscale and dimmed by default and reveal full brand colour with a lift on hover — the classic logo-cloud look.

GPU-friendly transform

The loop animates only transform, so it stays smooth and is preserved cleanly across the Tailwind/React exports.

Export-safe residual CSS

The animation and mask live on compound selectors, so the converter keeps them verbatim instead of dropping unmappable properties.

Inline SVG marks

Each logo is an inline SVG coloured from a --c variable — no external requests, no broken images, crisp at any size.

Reduced-motion opt-in

A commented prefers-reduced-motion block ships with it — uncomment to stop the scroll and lay logos out as a centred grid for motion-sensitive visitors.

About this UI Snippet

Logo Cloud — Infinite Marquee, Edge-Fade Mask & Grayscale-to-Colour Hover

A logo cloud — the "trusted by" or "as seen in" strip of customer and partner logos — is one of the highest-converting elements on a landing page, borrowing credibility from recognisable brands. The most modern, eye-catching version is an infinite marquee: the logos drift continuously across the section, fade softly at both edges, pause when you hover, and reveal their brand colour on hover. This snippet implements that in pure HTML and CSS with no JavaScript.

The seamless infinite loop

The marquee works by duplicating the logo set twice inside a single flex track and animating it with transform: translateX(0) to translateX(-50%) on an infinite linear loop. Because the second half is an exact copy of the first, the moment the animation reaches −50% the track is visually identical to its start, so it snaps back invisibly — a perfectly seamless, never-ending scroll. The duplicate set is marked aria-hidden="true" so screen readers only announce each brand once. Using a transform keeps the animation on the GPU (smooth) and, crucially, export-safe.

Edge-fade mask

To avoid logos appearing and vanishing abruptly at the section edges, a mask-image linear-gradient fades the track to transparent on the left and right (transparent → opaque 10%…90% → transparent). This soft "vignette" is what makes a marquee feel premium rather than mechanical, and it focuses attention on the centre.

Pause on hover, colour on hover

The whole track pauses via animation-play-state: paused when the marquee is hovered, so visitors can read a specific logo or click it. Each logo also sits grayscale and dimmed by default (filter: grayscale(1)) and animates to full brand colour with a slight lift on hover — the classic logo-cloud treatment that keeps the strip calm until you engage with it. Each logo's colour comes from a --c custom property on an inline SVG mark, so there are no external image requests and the marks stay crisp at any size.

Export-safe by design

Utility frameworks like Tailwind drop CSS properties they can't map to a class when converting single-class rules. To guarantee the animation and mask survive the React/Tailwind export, this snippet places them on compound selectors (.lc-marquee .lc-track, .lc .lc-marquee) which the converter preserves as residual CSS verbatim — so the marquee animates and fades identically in every export.

Accessible and motion-aware

The marquee scrolls by default so the effect is visible everywhere. For production, a commented prefers-reduced-motion block is included — uncomment it to stop the scroll and lay the logos out as a centred grid (hiding the duplicates) for visitors who opt out of motion, keeping the content fully usable. Pair this with a hero section above it, a testimonial slider for quotes, and a feature cards grid below for a complete landing page.

Step by step

How to Use

1
Paste HTML and CSSA "Trusted by fast-growing teams at" strip appears with eight brand logos drifting continuously across the section, faded at both edges.
2
Watch the loopThe logos scroll in a seamless infinite loop — the duplicated set makes the wrap-around invisible.
3
Hover the stripThe whole marquee pauses so you can read or click a logo, and individual logos turn from grayscale to full brand colour with a lift.
4
Swap in real logosReplace each inline SVG with a company's actual logo (SVG or <img>), keeping both the original and its duplicate in sync.
5
Tune the speedChange the 26s duration in the lc-scroll animation — longer is slower and calmer, shorter is faster.
6
Check reduced motionWith OS "reduce motion" enabled, the scroll stops and the logos lay out as a centred grid instead.

Real-world uses

Common Use Cases

Landing page social proof

The "trusted by" marquee under the hero. Place it below a hero section and above feature cards.

"As featured in" press strips

Scroll media outlets or awards in a continuous band to borrow authority without taking much vertical space.

Integrations and partners

Drift supported integrations or partner brands; hover pauses and colours the one a visitor is interested in.

Customer / client walls

A moving roster of customer logos on an about or enterprise page, paired with a testimonial slider.

Sponsor and supporter bands

Event or open-source sponsor strips where a marquee keeps many logos visible in a compact space.

Tech stack / "built with"

Scroll the technologies a product is built on as recognisable marks, complementing a feature cards section.

Got questions?

Frequently Asked Questions

Replace each inline <svg> with the brand's actual logo (SVG is best — crisp, recolourable, no request) in both the original and the .lc-dup duplicate, keeping the two sets identical so the loop stays seamless. For raster logos use <img src="/logos/acme.svg" alt="Acme">; the grayscale and hover still apply. Give the visible set meaningful text/alt and keep the duplicate aria-hidden.

The track holds two copies of the logo list and animates translateX from 0 to −50% (exactly one copy's width) on an infinite linear loop. When it reaches −50% the visible content is identical to the start, so the reset is invisible. The key requirements: the two sets must be identical and the gap pattern uniform, so the period repeats perfectly.

When utility frameworks (Tailwind) convert a single-class rule like .lc-track, they map each property to a utility and silently drop anything unmappable — which would lose the animation and mask-image. Putting them on compound selectors (.lc-marquee .lc-track) makes the converter keep them as residual CSS verbatim, so the marquee animates and fades identically in the React + Tailwind export.

Yes — the duplicated set is aria-hidden so each brand is announced once, hover pauses the motion so users can read or click a logo, and each logo has meaningful text (the wordmark span or an alt on images) for assistive tech. For motion-sensitive visitors, uncomment the included prefers-reduced-motion block to stop the scroll and lay the logos out as a static centred grid; it ships commented so the effect is visible by default, so enable it for production.

Render the logo list twice from a { name, color, svg } array (map once normally, once with aria-hidden): in React use .map, in Vue v-for, in Angular *ngFor. No state or lifecycle hooks are needed — the marquee, mask, pause-on-hover, and grayscale are entirely CSS and port verbatim. Control speed via the animation duration in the stylesheet.

Logo Cloud — Export as HTML, React, Vue, Angular & Tailwind

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Logo Cloud</title>
  <style>
    *{box-sizing:border-box;margin:0;padding:0}
    body{font-family:system-ui,-apple-system,sans-serif;background:#fff;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
    .lc{width:100%;max-width:780px;text-align:center}
    .lc-eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8;margin-bottom:26px}
    
    .lc-marquee{position:relative;overflow:hidden}
    /* compound selectors stay as residual CSS through the Tailwind export, so the
       marquee animation and edge-fade mask are preserved verbatim */
    .lc .lc-marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
    .lc-marquee .lc-track{display:flex;align-items:center;gap:16px;width:max-content;animation:lc-scroll 26s linear infinite}
    .lc-marquee:hover .lc-track{animation-play-state:paused}
    @keyframes lc-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
    
    .lc-logo{flex-shrink:0;display:flex;align-items:center;gap:9px;padding:14px 22px;border-radius:14px;color:#94a3b8;font-size:17px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;filter:grayscale(1);opacity:.5;transition:filter .3s ease,opacity .3s ease,transform .2s ease,background .3s ease}
    .lc-logo svg{color:var(--c);flex-shrink:0}
    .lc-logo:hover{filter:grayscale(0);opacity:1;color:#1e293b;transform:translateY(-3px);background:#f8fafc}
    
    /* Optional accessibility opt-in: uncomment to lay logos out as a static centred
       grid for visitors who request reduced motion.
    @media(prefers-reduced-motion:reduce){
      .lc-marquee .lc-track{animation:none;flex-wrap:wrap;justify-content:center;width:100%}
      .lc-dup{display:none}
    } */
  </style>
</head>
<body>
  <section class="lc">
    <p class="lc-eyebrow">Trusted by fast-growing teams at</p>
    <div class="lc-marquee">
      <div class="lc-track">
        <div class="lc-logo" style="--c:#6366f1"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2 2 7l10 5 10-5-10-5z"/><path d="M2 12l10 5 10-5" fill="none" stroke="currentColor" stroke-width="2"/></svg><span>Northwind</span></div>
        <div class="lc-logo" style="--c:#0ea5e9"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><circle cx="12" cy="12" r="9"/></svg><span>Loopwork</span></div>
        <div class="lc-logo" style="--c:#10b981"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2 22 20H2L12 2z"/></svg><span>Everpeak</span></div>
        <div class="lc-logo" style="--c:#f59e0b"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><rect x="4" y="4" width="16" height="16" rx="4"/></svg><span>Sunforge</span></div>
        <div class="lc-logo" style="--c:#ec4899"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2l2.9 6.2 6.8.7-5.1 4.5 1.5 6.7L12 17.8 5.9 20.1l1.5-6.7L2.3 8.9l6.8-.7L12 2z"/></svg><span>Lumina</span></div>
        <div class="lc-logo" style="--c:#8b5cf6"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2l8.7 5v10L12 22 3.3 17V7L12 2z"/></svg><span>Hexabit</span></div>
        <div class="lc-logo" style="--c:#ef4444"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 21s-7-4.3-9.3-8.6C1 9.2 2.6 5 6.4 5c2 0 3.4 1.2 4.1 2.4C11.2 6.2 12.6 5 14.6 5 18.4 5 20 9.2 18.3 12.4 16 16.7 12 21 12 21z"/></svg><span>Vela</span></div>
        <div class="lc-logo" style="--c:#14b8a6"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M3 12a9 9 0 0 1 18 0 9 9 0 0 1-18 0zm9-5a5 5 0 0 0 0 10V7z"/></svg><span>Cresta</span></div>
  
        <div class="lc-logo lc-dup" aria-hidden="true" style="--c:#6366f1"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2 2 7l10 5 10-5-10-5z"/><path d="M2 12l10 5 10-5" fill="none" stroke="currentColor" stroke-width="2"/></svg><span>Northwind</span></div>
        <div class="lc-logo lc-dup" aria-hidden="true" style="--c:#0ea5e9"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><circle cx="12" cy="12" r="9"/></svg><span>Loopwork</span></div>
        <div class="lc-logo lc-dup" aria-hidden="true" style="--c:#10b981"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2 22 20H2L12 2z"/></svg><span>Everpeak</span></div>
        <div class="lc-logo lc-dup" aria-hidden="true" style="--c:#f59e0b"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><rect x="4" y="4" width="16" height="16" rx="4"/></svg><span>Sunforge</span></div>
        <div class="lc-logo lc-dup" aria-hidden="true" style="--c:#ec4899"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2l2.9 6.2 6.8.7-5.1 4.5 1.5 6.7L12 17.8 5.9 20.1l1.5-6.7L2.3 8.9l6.8-.7L12 2z"/></svg><span>Lumina</span></div>
        <div class="lc-logo lc-dup" aria-hidden="true" style="--c:#8b5cf6"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2l8.7 5v10L12 22 3.3 17V7L12 2z"/></svg><span>Hexabit</span></div>
        <div class="lc-logo lc-dup" aria-hidden="true" style="--c:#ef4444"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 21s-7-4.3-9.3-8.6C1 9.2 2.6 5 6.4 5c2 0 3.4 1.2 4.1 2.4C11.2 6.2 12.6 5 14.6 5 18.4 5 20 9.2 18.3 12.4 16 16.7 12 21 12 21z"/></svg><span>Vela</span></div>
        <div class="lc-logo lc-dup" aria-hidden="true" style="--c:#14b8a6"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M3 12a9 9 0 0 1 18 0 9 9 0 0 1-18 0zm9-5a5 5 0 0 0 0 10V7z"/></svg><span>Cresta</span></div>
      </div>
    </div>
  </section>
</body>
</html>

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Logo Cloud</title>
  <!-- Tailwind CSS v3+ — arbitrary value classes (e.g. bg-[#0f172a]) are valid -->
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    @keyframes lc-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

    * {
      box-sizing:border-box;margin:0;padding:0
    }

    body {
      font-family:system-ui,-apple-system,sans-serif;background:#fff;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px
    }

    .lc .lc-marquee {
      -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)
    }

    .lc-marquee .lc-track {
      display:flex;align-items:center;gap:16px;width:max-content;animation:lc-scroll 26s linear infinite
    }

    .lc-marquee:hover .lc-track {
      animation-play-state:paused
    }

    .lc-logo svg {
      color:var(--c);flex-shrink:0
    }
  </style>
</head>
<body>
  <section class="lc w-full max-w-[780px] text-center">
    <p class="text-xs font-bold tracking-[.08em] uppercase text-[#94a3b8] mb-[26px]">Trusted by fast-growing teams at</p>
    <div class="lc-marquee relative overflow-hidden">
      <div class="lc-track">
        <div class="lc-logo shrink-0 flex items-center gap-[9px] py-3.5 px-[22px] rounded-[14px] text-[#94a3b8] text-[17px] font-extrabold tracking-[-.01em] whitespace-nowrap [filter:grayscale(1)] opacity-50 [transition:filter_.3s_ease,opacity_.3s_ease,transform_.2s_ease,background_.3s_ease] hover:[filter:grayscale(0)] hover:opacity-100 hover:text-[#1e293b] hover:[transform:translateY(-3px)] hover:bg-[#f8fafc]" style="--c:#6366f1"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2 2 7l10 5 10-5-10-5z"/><path d="M2 12l10 5 10-5" fill="none" stroke="currentColor" stroke-width="2"/></svg><span>Northwind</span></div>
        <div class="lc-logo shrink-0 flex items-center gap-[9px] py-3.5 px-[22px] rounded-[14px] text-[#94a3b8] text-[17px] font-extrabold tracking-[-.01em] whitespace-nowrap [filter:grayscale(1)] opacity-50 [transition:filter_.3s_ease,opacity_.3s_ease,transform_.2s_ease,background_.3s_ease] hover:[filter:grayscale(0)] hover:opacity-100 hover:text-[#1e293b] hover:[transform:translateY(-3px)] hover:bg-[#f8fafc]" style="--c:#0ea5e9"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><circle cx="12" cy="12" r="9"/></svg><span>Loopwork</span></div>
        <div class="lc-logo shrink-0 flex items-center gap-[9px] py-3.5 px-[22px] rounded-[14px] text-[#94a3b8] text-[17px] font-extrabold tracking-[-.01em] whitespace-nowrap [filter:grayscale(1)] opacity-50 [transition:filter_.3s_ease,opacity_.3s_ease,transform_.2s_ease,background_.3s_ease] hover:[filter:grayscale(0)] hover:opacity-100 hover:text-[#1e293b] hover:[transform:translateY(-3px)] hover:bg-[#f8fafc]" style="--c:#10b981"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2 22 20H2L12 2z"/></svg><span>Everpeak</span></div>
        <div class="lc-logo shrink-0 flex items-center gap-[9px] py-3.5 px-[22px] rounded-[14px] text-[#94a3b8] text-[17px] font-extrabold tracking-[-.01em] whitespace-nowrap [filter:grayscale(1)] opacity-50 [transition:filter_.3s_ease,opacity_.3s_ease,transform_.2s_ease,background_.3s_ease] hover:[filter:grayscale(0)] hover:opacity-100 hover:text-[#1e293b] hover:[transform:translateY(-3px)] hover:bg-[#f8fafc]" style="--c:#f59e0b"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><rect x="4" y="4" width="16" height="16" rx="4"/></svg><span>Sunforge</span></div>
        <div class="lc-logo shrink-0 flex items-center gap-[9px] py-3.5 px-[22px] rounded-[14px] text-[#94a3b8] text-[17px] font-extrabold tracking-[-.01em] whitespace-nowrap [filter:grayscale(1)] opacity-50 [transition:filter_.3s_ease,opacity_.3s_ease,transform_.2s_ease,background_.3s_ease] hover:[filter:grayscale(0)] hover:opacity-100 hover:text-[#1e293b] hover:[transform:translateY(-3px)] hover:bg-[#f8fafc]" style="--c:#ec4899"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2l2.9 6.2 6.8.7-5.1 4.5 1.5 6.7L12 17.8 5.9 20.1l1.5-6.7L2.3 8.9l6.8-.7L12 2z"/></svg><span>Lumina</span></div>
        <div class="lc-logo shrink-0 flex items-center gap-[9px] py-3.5 px-[22px] rounded-[14px] text-[#94a3b8] text-[17px] font-extrabold tracking-[-.01em] whitespace-nowrap [filter:grayscale(1)] opacity-50 [transition:filter_.3s_ease,opacity_.3s_ease,transform_.2s_ease,background_.3s_ease] hover:[filter:grayscale(0)] hover:opacity-100 hover:text-[#1e293b] hover:[transform:translateY(-3px)] hover:bg-[#f8fafc]" style="--c:#8b5cf6"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2l8.7 5v10L12 22 3.3 17V7L12 2z"/></svg><span>Hexabit</span></div>
        <div class="lc-logo shrink-0 flex items-center gap-[9px] py-3.5 px-[22px] rounded-[14px] text-[#94a3b8] text-[17px] font-extrabold tracking-[-.01em] whitespace-nowrap [filter:grayscale(1)] opacity-50 [transition:filter_.3s_ease,opacity_.3s_ease,transform_.2s_ease,background_.3s_ease] hover:[filter:grayscale(0)] hover:opacity-100 hover:text-[#1e293b] hover:[transform:translateY(-3px)] hover:bg-[#f8fafc]" style="--c:#ef4444"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 21s-7-4.3-9.3-8.6C1 9.2 2.6 5 6.4 5c2 0 3.4 1.2 4.1 2.4C11.2 6.2 12.6 5 14.6 5 18.4 5 20 9.2 18.3 12.4 16 16.7 12 21 12 21z"/></svg><span>Vela</span></div>
        <div class="lc-logo shrink-0 flex items-center gap-[9px] py-3.5 px-[22px] rounded-[14px] text-[#94a3b8] text-[17px] font-extrabold tracking-[-.01em] whitespace-nowrap [filter:grayscale(1)] opacity-50 [transition:filter_.3s_ease,opacity_.3s_ease,transform_.2s_ease,background_.3s_ease] hover:[filter:grayscale(0)] hover:opacity-100 hover:text-[#1e293b] hover:[transform:translateY(-3px)] hover:bg-[#f8fafc]" style="--c:#14b8a6"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M3 12a9 9 0 0 1 18 0 9 9 0 0 1-18 0zm9-5a5 5 0 0 0 0 10V7z"/></svg><span>Cresta</span></div>
  
        <div class="lc-logo shrink-0 flex items-center gap-[9px] py-3.5 px-[22px] rounded-[14px] text-[#94a3b8] text-[17px] font-extrabold tracking-[-.01em] whitespace-nowrap [filter:grayscale(1)] opacity-50 [transition:filter_.3s_ease,opacity_.3s_ease,transform_.2s_ease,background_.3s_ease] hover:[filter:grayscale(0)] hover:opacity-100 hover:text-[#1e293b] hover:[transform:translateY(-3px)] hover:bg-[#f8fafc] lc-dup" aria-hidden="true" style="--c:#6366f1"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2 2 7l10 5 10-5-10-5z"/><path d="M2 12l10 5 10-5" fill="none" stroke="currentColor" stroke-width="2"/></svg><span>Northwind</span></div>
        <div class="lc-logo shrink-0 flex items-center gap-[9px] py-3.5 px-[22px] rounded-[14px] text-[#94a3b8] text-[17px] font-extrabold tracking-[-.01em] whitespace-nowrap [filter:grayscale(1)] opacity-50 [transition:filter_.3s_ease,opacity_.3s_ease,transform_.2s_ease,background_.3s_ease] hover:[filter:grayscale(0)] hover:opacity-100 hover:text-[#1e293b] hover:[transform:translateY(-3px)] hover:bg-[#f8fafc] lc-dup" aria-hidden="true" style="--c:#0ea5e9"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><circle cx="12" cy="12" r="9"/></svg><span>Loopwork</span></div>
        <div class="lc-logo shrink-0 flex items-center gap-[9px] py-3.5 px-[22px] rounded-[14px] text-[#94a3b8] text-[17px] font-extrabold tracking-[-.01em] whitespace-nowrap [filter:grayscale(1)] opacity-50 [transition:filter_.3s_ease,opacity_.3s_ease,transform_.2s_ease,background_.3s_ease] hover:[filter:grayscale(0)] hover:opacity-100 hover:text-[#1e293b] hover:[transform:translateY(-3px)] hover:bg-[#f8fafc] lc-dup" aria-hidden="true" style="--c:#10b981"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2 22 20H2L12 2z"/></svg><span>Everpeak</span></div>
        <div class="lc-logo shrink-0 flex items-center gap-[9px] py-3.5 px-[22px] rounded-[14px] text-[#94a3b8] text-[17px] font-extrabold tracking-[-.01em] whitespace-nowrap [filter:grayscale(1)] opacity-50 [transition:filter_.3s_ease,opacity_.3s_ease,transform_.2s_ease,background_.3s_ease] hover:[filter:grayscale(0)] hover:opacity-100 hover:text-[#1e293b] hover:[transform:translateY(-3px)] hover:bg-[#f8fafc] lc-dup" aria-hidden="true" style="--c:#f59e0b"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><rect x="4" y="4" width="16" height="16" rx="4"/></svg><span>Sunforge</span></div>
        <div class="lc-logo shrink-0 flex items-center gap-[9px] py-3.5 px-[22px] rounded-[14px] text-[#94a3b8] text-[17px] font-extrabold tracking-[-.01em] whitespace-nowrap [filter:grayscale(1)] opacity-50 [transition:filter_.3s_ease,opacity_.3s_ease,transform_.2s_ease,background_.3s_ease] hover:[filter:grayscale(0)] hover:opacity-100 hover:text-[#1e293b] hover:[transform:translateY(-3px)] hover:bg-[#f8fafc] lc-dup" aria-hidden="true" style="--c:#ec4899"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2l2.9 6.2 6.8.7-5.1 4.5 1.5 6.7L12 17.8 5.9 20.1l1.5-6.7L2.3 8.9l6.8-.7L12 2z"/></svg><span>Lumina</span></div>
        <div class="lc-logo shrink-0 flex items-center gap-[9px] py-3.5 px-[22px] rounded-[14px] text-[#94a3b8] text-[17px] font-extrabold tracking-[-.01em] whitespace-nowrap [filter:grayscale(1)] opacity-50 [transition:filter_.3s_ease,opacity_.3s_ease,transform_.2s_ease,background_.3s_ease] hover:[filter:grayscale(0)] hover:opacity-100 hover:text-[#1e293b] hover:[transform:translateY(-3px)] hover:bg-[#f8fafc] lc-dup" aria-hidden="true" style="--c:#8b5cf6"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2l8.7 5v10L12 22 3.3 17V7L12 2z"/></svg><span>Hexabit</span></div>
        <div class="lc-logo shrink-0 flex items-center gap-[9px] py-3.5 px-[22px] rounded-[14px] text-[#94a3b8] text-[17px] font-extrabold tracking-[-.01em] whitespace-nowrap [filter:grayscale(1)] opacity-50 [transition:filter_.3s_ease,opacity_.3s_ease,transform_.2s_ease,background_.3s_ease] hover:[filter:grayscale(0)] hover:opacity-100 hover:text-[#1e293b] hover:[transform:translateY(-3px)] hover:bg-[#f8fafc] lc-dup" aria-hidden="true" style="--c:#ef4444"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 21s-7-4.3-9.3-8.6C1 9.2 2.6 5 6.4 5c2 0 3.4 1.2 4.1 2.4C11.2 6.2 12.6 5 14.6 5 18.4 5 20 9.2 18.3 12.4 16 16.7 12 21 12 21z"/></svg><span>Vela</span></div>
        <div class="lc-logo shrink-0 flex items-center gap-[9px] py-3.5 px-[22px] rounded-[14px] text-[#94a3b8] text-[17px] font-extrabold tracking-[-.01em] whitespace-nowrap [filter:grayscale(1)] opacity-50 [transition:filter_.3s_ease,opacity_.3s_ease,transform_.2s_ease,background_.3s_ease] hover:[filter:grayscale(0)] hover:opacity-100 hover:text-[#1e293b] hover:[transform:translateY(-3px)] hover:bg-[#f8fafc] lc-dup" aria-hidden="true" style="--c:#14b8a6"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M3 12a9 9 0 0 1 18 0 9 9 0 0 1-18 0zm9-5a5 5 0 0 0 0 10V7z"/></svg><span>Cresta</span></div>
      </div>
    </div>
  </section>
</body>
</html>

React

import React from 'react';

// CSS — optionally move to LogoCloud.module.css
const css = `
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#fff;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.lc{width:100%;max-width:780px;text-align:center}
.lc-eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8;margin-bottom:26px}

.lc-marquee{position:relative;overflow:hidden}
/* compound selectors stay as residual CSS through the Tailwind export, so the
   marquee animation and edge-fade mask are preserved verbatim */
.lc .lc-marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.lc-marquee .lc-track{display:flex;align-items:center;gap:16px;width:max-content;animation:lc-scroll 26s linear infinite}
.lc-marquee:hover .lc-track{animation-play-state:paused}
@keyframes lc-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.lc-logo{flex-shrink:0;display:flex;align-items:center;gap:9px;padding:14px 22px;border-radius:14px;color:#94a3b8;font-size:17px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;filter:grayscale(1);opacity:.5;transition:filter .3s ease,opacity .3s ease,transform .2s ease,background .3s ease}
.lc-logo svg{color:var(--c);flex-shrink:0}
.lc-logo:hover{filter:grayscale(0);opacity:1;color:#1e293b;transform:translateY(-3px);background:#f8fafc}

/* Optional accessibility opt-in: uncomment to lay logos out as a static centred
   grid for visitors who request reduced motion.
@media(prefers-reduced-motion:reduce){
  .lc-marquee .lc-track{animation:none;flex-wrap:wrap;justify-content:center;width:100%}
  .lc-dup{display:none}
} */
`;

export default function LogoCloud() {
  return (
    <>
      <style>{css}</style>
      <section className="lc">
        <p className="lc-eyebrow">Trusted by fast-growing teams at</p>
        <div className="lc-marquee">
          <div className="lc-track">
            <div className="lc-logo" style={{ '--c': '#6366f1' }}><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2 2 7l10 5 10-5-10-5z"/><path d="M2 12l10 5 10-5" fill="none" stroke="currentColor" strokeWidth="2"/></svg><span>Northwind</span></div>
            <div className="lc-logo" style={{ '--c': '#0ea5e9' }}><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><circle cx="12" cy="12" r="9"/></svg><span>Loopwork</span></div>
            <div className="lc-logo" style={{ '--c': '#10b981' }}><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2 22 20H2L12 2z"/></svg><span>Everpeak</span></div>
            <div className="lc-logo" style={{ '--c': '#f59e0b' }}><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><rect x="4" y="4" width="16" height="16" rx="4"/></svg><span>Sunforge</span></div>
            <div className="lc-logo" style={{ '--c': '#ec4899' }}><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2l2.9 6.2 6.8.7-5.1 4.5 1.5 6.7L12 17.8 5.9 20.1l1.5-6.7L2.3 8.9l6.8-.7L12 2z"/></svg><span>Lumina</span></div>
            <div className="lc-logo" style={{ '--c': '#8b5cf6' }}><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2l8.7 5v10L12 22 3.3 17V7L12 2z"/></svg><span>Hexabit</span></div>
            <div className="lc-logo" style={{ '--c': '#ef4444' }}><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 21s-7-4.3-9.3-8.6C1 9.2 2.6 5 6.4 5c2 0 3.4 1.2 4.1 2.4C11.2 6.2 12.6 5 14.6 5 18.4 5 20 9.2 18.3 12.4 16 16.7 12 21 12 21z"/></svg><span>Vela</span></div>
            <div className="lc-logo" style={{ '--c': '#14b8a6' }}><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M3 12a9 9 0 0 1 18 0 9 9 0 0 1-18 0zm9-5a5 5 0 0 0 0 10V7z"/></svg><span>Cresta</span></div>
      
            <div className="lc-logo lc-dup" aria-hidden="true" style={{ '--c': '#6366f1' }}><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2 2 7l10 5 10-5-10-5z"/><path d="M2 12l10 5 10-5" fill="none" stroke="currentColor" strokeWidth="2"/></svg><span>Northwind</span></div>
            <div className="lc-logo lc-dup" aria-hidden="true" style={{ '--c': '#0ea5e9' }}><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><circle cx="12" cy="12" r="9"/></svg><span>Loopwork</span></div>
            <div className="lc-logo lc-dup" aria-hidden="true" style={{ '--c': '#10b981' }}><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2 22 20H2L12 2z"/></svg><span>Everpeak</span></div>
            <div className="lc-logo lc-dup" aria-hidden="true" style={{ '--c': '#f59e0b' }}><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><rect x="4" y="4" width="16" height="16" rx="4"/></svg><span>Sunforge</span></div>
            <div className="lc-logo lc-dup" aria-hidden="true" style={{ '--c': '#ec4899' }}><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2l2.9 6.2 6.8.7-5.1 4.5 1.5 6.7L12 17.8 5.9 20.1l1.5-6.7L2.3 8.9l6.8-.7L12 2z"/></svg><span>Lumina</span></div>
            <div className="lc-logo lc-dup" aria-hidden="true" style={{ '--c': '#8b5cf6' }}><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2l8.7 5v10L12 22 3.3 17V7L12 2z"/></svg><span>Hexabit</span></div>
            <div className="lc-logo lc-dup" aria-hidden="true" style={{ '--c': '#ef4444' }}><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 21s-7-4.3-9.3-8.6C1 9.2 2.6 5 6.4 5c2 0 3.4 1.2 4.1 2.4C11.2 6.2 12.6 5 14.6 5 18.4 5 20 9.2 18.3 12.4 16 16.7 12 21 12 21z"/></svg><span>Vela</span></div>
            <div className="lc-logo lc-dup" aria-hidden="true" style={{ '--c': '#14b8a6' }}><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M3 12a9 9 0 0 1 18 0 9 9 0 0 1-18 0zm9-5a5 5 0 0 0 0 10V7z"/></svg><span>Cresta</span></div>
          </div>
        </div>
      </section>
    </>
  );
}

React + Tailwind

import React from 'react';
// Requires Tailwind CSS v3+ — https://tailwindcss.com/docs/installation
// Arbitrary value classes (e.g. bg-[#0f172a]) are valid Tailwind v3+

export default function LogoCloud() {
  return (
    <>
      <style>{`
@keyframes lc-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

* {
  box-sizing:border-box;margin:0;padding:0
}

body {
  font-family:system-ui,-apple-system,sans-serif;background:#fff;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px
}

.lc .lc-marquee {
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)
}

.lc-marquee .lc-track {
  display:flex;align-items:center;gap:16px;width:max-content;animation:lc-scroll 26s linear infinite
}

.lc-marquee:hover .lc-track {
  animation-play-state:paused
}

.lc-logo svg {
  color:var(--c);flex-shrink:0
}
      `}</style>
      <section className="lc w-full max-w-[780px] text-center">
        <p className="text-xs font-bold tracking-[.08em] uppercase text-[#94a3b8] mb-[26px]">Trusted by fast-growing teams at</p>
        <div className="lc-marquee relative overflow-hidden">
          <div className="lc-track">
            <div className="lc-logo shrink-0 flex items-center gap-[9px] py-3.5 px-[22px] rounded-[14px] text-[#94a3b8] text-[17px] font-extrabold tracking-[-.01em] whitespace-nowrap [filter:grayscale(1)] opacity-50 [transition:filter_.3s_ease,opacity_.3s_ease,transform_.2s_ease,background_.3s_ease] hover:[filter:grayscale(0)] hover:opacity-100 hover:text-[#1e293b] hover:[transform:translateY(-3px)] hover:bg-[#f8fafc]" style={{ '--c': '#6366f1' }}><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2 2 7l10 5 10-5-10-5z"/><path d="M2 12l10 5 10-5" fill="none" stroke="currentColor" strokeWidth="2"/></svg><span>Northwind</span></div>
            <div className="lc-logo shrink-0 flex items-center gap-[9px] py-3.5 px-[22px] rounded-[14px] text-[#94a3b8] text-[17px] font-extrabold tracking-[-.01em] whitespace-nowrap [filter:grayscale(1)] opacity-50 [transition:filter_.3s_ease,opacity_.3s_ease,transform_.2s_ease,background_.3s_ease] hover:[filter:grayscale(0)] hover:opacity-100 hover:text-[#1e293b] hover:[transform:translateY(-3px)] hover:bg-[#f8fafc]" style={{ '--c': '#0ea5e9' }}><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><circle cx="12" cy="12" r="9"/></svg><span>Loopwork</span></div>
            <div className="lc-logo shrink-0 flex items-center gap-[9px] py-3.5 px-[22px] rounded-[14px] text-[#94a3b8] text-[17px] font-extrabold tracking-[-.01em] whitespace-nowrap [filter:grayscale(1)] opacity-50 [transition:filter_.3s_ease,opacity_.3s_ease,transform_.2s_ease,background_.3s_ease] hover:[filter:grayscale(0)] hover:opacity-100 hover:text-[#1e293b] hover:[transform:translateY(-3px)] hover:bg-[#f8fafc]" style={{ '--c': '#10b981' }}><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2 22 20H2L12 2z"/></svg><span>Everpeak</span></div>
            <div className="lc-logo shrink-0 flex items-center gap-[9px] py-3.5 px-[22px] rounded-[14px] text-[#94a3b8] text-[17px] font-extrabold tracking-[-.01em] whitespace-nowrap [filter:grayscale(1)] opacity-50 [transition:filter_.3s_ease,opacity_.3s_ease,transform_.2s_ease,background_.3s_ease] hover:[filter:grayscale(0)] hover:opacity-100 hover:text-[#1e293b] hover:[transform:translateY(-3px)] hover:bg-[#f8fafc]" style={{ '--c': '#f59e0b' }}><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><rect x="4" y="4" width="16" height="16" rx="4"/></svg><span>Sunforge</span></div>
            <div className="lc-logo shrink-0 flex items-center gap-[9px] py-3.5 px-[22px] rounded-[14px] text-[#94a3b8] text-[17px] font-extrabold tracking-[-.01em] whitespace-nowrap [filter:grayscale(1)] opacity-50 [transition:filter_.3s_ease,opacity_.3s_ease,transform_.2s_ease,background_.3s_ease] hover:[filter:grayscale(0)] hover:opacity-100 hover:text-[#1e293b] hover:[transform:translateY(-3px)] hover:bg-[#f8fafc]" style={{ '--c': '#ec4899' }}><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2l2.9 6.2 6.8.7-5.1 4.5 1.5 6.7L12 17.8 5.9 20.1l1.5-6.7L2.3 8.9l6.8-.7L12 2z"/></svg><span>Lumina</span></div>
            <div className="lc-logo shrink-0 flex items-center gap-[9px] py-3.5 px-[22px] rounded-[14px] text-[#94a3b8] text-[17px] font-extrabold tracking-[-.01em] whitespace-nowrap [filter:grayscale(1)] opacity-50 [transition:filter_.3s_ease,opacity_.3s_ease,transform_.2s_ease,background_.3s_ease] hover:[filter:grayscale(0)] hover:opacity-100 hover:text-[#1e293b] hover:[transform:translateY(-3px)] hover:bg-[#f8fafc]" style={{ '--c': '#8b5cf6' }}><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2l8.7 5v10L12 22 3.3 17V7L12 2z"/></svg><span>Hexabit</span></div>
            <div className="lc-logo shrink-0 flex items-center gap-[9px] py-3.5 px-[22px] rounded-[14px] text-[#94a3b8] text-[17px] font-extrabold tracking-[-.01em] whitespace-nowrap [filter:grayscale(1)] opacity-50 [transition:filter_.3s_ease,opacity_.3s_ease,transform_.2s_ease,background_.3s_ease] hover:[filter:grayscale(0)] hover:opacity-100 hover:text-[#1e293b] hover:[transform:translateY(-3px)] hover:bg-[#f8fafc]" style={{ '--c': '#ef4444' }}><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 21s-7-4.3-9.3-8.6C1 9.2 2.6 5 6.4 5c2 0 3.4 1.2 4.1 2.4C11.2 6.2 12.6 5 14.6 5 18.4 5 20 9.2 18.3 12.4 16 16.7 12 21 12 21z"/></svg><span>Vela</span></div>
            <div className="lc-logo shrink-0 flex items-center gap-[9px] py-3.5 px-[22px] rounded-[14px] text-[#94a3b8] text-[17px] font-extrabold tracking-[-.01em] whitespace-nowrap [filter:grayscale(1)] opacity-50 [transition:filter_.3s_ease,opacity_.3s_ease,transform_.2s_ease,background_.3s_ease] hover:[filter:grayscale(0)] hover:opacity-100 hover:text-[#1e293b] hover:[transform:translateY(-3px)] hover:bg-[#f8fafc]" style={{ '--c': '#14b8a6' }}><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M3 12a9 9 0 0 1 18 0 9 9 0 0 1-18 0zm9-5a5 5 0 0 0 0 10V7z"/></svg><span>Cresta</span></div>
      
            <div className="lc-logo shrink-0 flex items-center gap-[9px] py-3.5 px-[22px] rounded-[14px] text-[#94a3b8] text-[17px] font-extrabold tracking-[-.01em] whitespace-nowrap [filter:grayscale(1)] opacity-50 [transition:filter_.3s_ease,opacity_.3s_ease,transform_.2s_ease,background_.3s_ease] hover:[filter:grayscale(0)] hover:opacity-100 hover:text-[#1e293b] hover:[transform:translateY(-3px)] hover:bg-[#f8fafc] lc-dup" aria-hidden="true" style={{ '--c': '#6366f1' }}><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2 2 7l10 5 10-5-10-5z"/><path d="M2 12l10 5 10-5" fill="none" stroke="currentColor" strokeWidth="2"/></svg><span>Northwind</span></div>
            <div className="lc-logo shrink-0 flex items-center gap-[9px] py-3.5 px-[22px] rounded-[14px] text-[#94a3b8] text-[17px] font-extrabold tracking-[-.01em] whitespace-nowrap [filter:grayscale(1)] opacity-50 [transition:filter_.3s_ease,opacity_.3s_ease,transform_.2s_ease,background_.3s_ease] hover:[filter:grayscale(0)] hover:opacity-100 hover:text-[#1e293b] hover:[transform:translateY(-3px)] hover:bg-[#f8fafc] lc-dup" aria-hidden="true" style={{ '--c': '#0ea5e9' }}><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><circle cx="12" cy="12" r="9"/></svg><span>Loopwork</span></div>
            <div className="lc-logo shrink-0 flex items-center gap-[9px] py-3.5 px-[22px] rounded-[14px] text-[#94a3b8] text-[17px] font-extrabold tracking-[-.01em] whitespace-nowrap [filter:grayscale(1)] opacity-50 [transition:filter_.3s_ease,opacity_.3s_ease,transform_.2s_ease,background_.3s_ease] hover:[filter:grayscale(0)] hover:opacity-100 hover:text-[#1e293b] hover:[transform:translateY(-3px)] hover:bg-[#f8fafc] lc-dup" aria-hidden="true" style={{ '--c': '#10b981' }}><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2 22 20H2L12 2z"/></svg><span>Everpeak</span></div>
            <div className="lc-logo shrink-0 flex items-center gap-[9px] py-3.5 px-[22px] rounded-[14px] text-[#94a3b8] text-[17px] font-extrabold tracking-[-.01em] whitespace-nowrap [filter:grayscale(1)] opacity-50 [transition:filter_.3s_ease,opacity_.3s_ease,transform_.2s_ease,background_.3s_ease] hover:[filter:grayscale(0)] hover:opacity-100 hover:text-[#1e293b] hover:[transform:translateY(-3px)] hover:bg-[#f8fafc] lc-dup" aria-hidden="true" style={{ '--c': '#f59e0b' }}><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><rect x="4" y="4" width="16" height="16" rx="4"/></svg><span>Sunforge</span></div>
            <div className="lc-logo shrink-0 flex items-center gap-[9px] py-3.5 px-[22px] rounded-[14px] text-[#94a3b8] text-[17px] font-extrabold tracking-[-.01em] whitespace-nowrap [filter:grayscale(1)] opacity-50 [transition:filter_.3s_ease,opacity_.3s_ease,transform_.2s_ease,background_.3s_ease] hover:[filter:grayscale(0)] hover:opacity-100 hover:text-[#1e293b] hover:[transform:translateY(-3px)] hover:bg-[#f8fafc] lc-dup" aria-hidden="true" style={{ '--c': '#ec4899' }}><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2l2.9 6.2 6.8.7-5.1 4.5 1.5 6.7L12 17.8 5.9 20.1l1.5-6.7L2.3 8.9l6.8-.7L12 2z"/></svg><span>Lumina</span></div>
            <div className="lc-logo shrink-0 flex items-center gap-[9px] py-3.5 px-[22px] rounded-[14px] text-[#94a3b8] text-[17px] font-extrabold tracking-[-.01em] whitespace-nowrap [filter:grayscale(1)] opacity-50 [transition:filter_.3s_ease,opacity_.3s_ease,transform_.2s_ease,background_.3s_ease] hover:[filter:grayscale(0)] hover:opacity-100 hover:text-[#1e293b] hover:[transform:translateY(-3px)] hover:bg-[#f8fafc] lc-dup" aria-hidden="true" style={{ '--c': '#8b5cf6' }}><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2l8.7 5v10L12 22 3.3 17V7L12 2z"/></svg><span>Hexabit</span></div>
            <div className="lc-logo shrink-0 flex items-center gap-[9px] py-3.5 px-[22px] rounded-[14px] text-[#94a3b8] text-[17px] font-extrabold tracking-[-.01em] whitespace-nowrap [filter:grayscale(1)] opacity-50 [transition:filter_.3s_ease,opacity_.3s_ease,transform_.2s_ease,background_.3s_ease] hover:[filter:grayscale(0)] hover:opacity-100 hover:text-[#1e293b] hover:[transform:translateY(-3px)] hover:bg-[#f8fafc] lc-dup" aria-hidden="true" style={{ '--c': '#ef4444' }}><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 21s-7-4.3-9.3-8.6C1 9.2 2.6 5 6.4 5c2 0 3.4 1.2 4.1 2.4C11.2 6.2 12.6 5 14.6 5 18.4 5 20 9.2 18.3 12.4 16 16.7 12 21 12 21z"/></svg><span>Vela</span></div>
            <div className="lc-logo shrink-0 flex items-center gap-[9px] py-3.5 px-[22px] rounded-[14px] text-[#94a3b8] text-[17px] font-extrabold tracking-[-.01em] whitespace-nowrap [filter:grayscale(1)] opacity-50 [transition:filter_.3s_ease,opacity_.3s_ease,transform_.2s_ease,background_.3s_ease] hover:[filter:grayscale(0)] hover:opacity-100 hover:text-[#1e293b] hover:[transform:translateY(-3px)] hover:bg-[#f8fafc] lc-dup" aria-hidden="true" style={{ '--c': '#14b8a6' }}><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M3 12a9 9 0 0 1 18 0 9 9 0 0 1-18 0zm9-5a5 5 0 0 0 0 10V7z"/></svg><span>Cresta</span></div>
          </div>
        </div>
      </section>
    </>
  );
}

Vue

<template>
  <section class="lc">
    <p class="lc-eyebrow">Trusted by fast-growing teams at</p>
    <div class="lc-marquee">
      <div class="lc-track">
        <div class="lc-logo" style="--c:#6366f1"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2 2 7l10 5 10-5-10-5z"/><path d="M2 12l10 5 10-5" fill="none" stroke="currentColor" stroke-width="2"/></svg><span>Northwind</span></div>
        <div class="lc-logo" style="--c:#0ea5e9"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><circle cx="12" cy="12" r="9"/></svg><span>Loopwork</span></div>
        <div class="lc-logo" style="--c:#10b981"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2 22 20H2L12 2z"/></svg><span>Everpeak</span></div>
        <div class="lc-logo" style="--c:#f59e0b"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><rect x="4" y="4" width="16" height="16" rx="4"/></svg><span>Sunforge</span></div>
        <div class="lc-logo" style="--c:#ec4899"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2l2.9 6.2 6.8.7-5.1 4.5 1.5 6.7L12 17.8 5.9 20.1l1.5-6.7L2.3 8.9l6.8-.7L12 2z"/></svg><span>Lumina</span></div>
        <div class="lc-logo" style="--c:#8b5cf6"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2l8.7 5v10L12 22 3.3 17V7L12 2z"/></svg><span>Hexabit</span></div>
        <div class="lc-logo" style="--c:#ef4444"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 21s-7-4.3-9.3-8.6C1 9.2 2.6 5 6.4 5c2 0 3.4 1.2 4.1 2.4C11.2 6.2 12.6 5 14.6 5 18.4 5 20 9.2 18.3 12.4 16 16.7 12 21 12 21z"/></svg><span>Vela</span></div>
        <div class="lc-logo" style="--c:#14b8a6"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M3 12a9 9 0 0 1 18 0 9 9 0 0 1-18 0zm9-5a5 5 0 0 0 0 10V7z"/></svg><span>Cresta</span></div>
  
        <div class="lc-logo lc-dup" aria-hidden="true" style="--c:#6366f1"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2 2 7l10 5 10-5-10-5z"/><path d="M2 12l10 5 10-5" fill="none" stroke="currentColor" stroke-width="2"/></svg><span>Northwind</span></div>
        <div class="lc-logo lc-dup" aria-hidden="true" style="--c:#0ea5e9"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><circle cx="12" cy="12" r="9"/></svg><span>Loopwork</span></div>
        <div class="lc-logo lc-dup" aria-hidden="true" style="--c:#10b981"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2 22 20H2L12 2z"/></svg><span>Everpeak</span></div>
        <div class="lc-logo lc-dup" aria-hidden="true" style="--c:#f59e0b"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><rect x="4" y="4" width="16" height="16" rx="4"/></svg><span>Sunforge</span></div>
        <div class="lc-logo lc-dup" aria-hidden="true" style="--c:#ec4899"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2l2.9 6.2 6.8.7-5.1 4.5 1.5 6.7L12 17.8 5.9 20.1l1.5-6.7L2.3 8.9l6.8-.7L12 2z"/></svg><span>Lumina</span></div>
        <div class="lc-logo lc-dup" aria-hidden="true" style="--c:#8b5cf6"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2l8.7 5v10L12 22 3.3 17V7L12 2z"/></svg><span>Hexabit</span></div>
        <div class="lc-logo lc-dup" aria-hidden="true" style="--c:#ef4444"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 21s-7-4.3-9.3-8.6C1 9.2 2.6 5 6.4 5c2 0 3.4 1.2 4.1 2.4C11.2 6.2 12.6 5 14.6 5 18.4 5 20 9.2 18.3 12.4 16 16.7 12 21 12 21z"/></svg><span>Vela</span></div>
        <div class="lc-logo lc-dup" aria-hidden="true" style="--c:#14b8a6"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M3 12a9 9 0 0 1 18 0 9 9 0 0 1-18 0zm9-5a5 5 0 0 0 0 10V7z"/></svg><span>Cresta</span></div>
      </div>
    </div>
  </section>
</template>

<script setup></script>

<style scoped>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#fff;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.lc{width:100%;max-width:780px;text-align:center}
.lc-eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8;margin-bottom:26px}

.lc-marquee{position:relative;overflow:hidden}
/* compound selectors stay as residual CSS through the Tailwind export, so the
   marquee animation and edge-fade mask are preserved verbatim */
.lc .lc-marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.lc-marquee .lc-track{display:flex;align-items:center;gap:16px;width:max-content;animation:lc-scroll 26s linear infinite}
.lc-marquee:hover .lc-track{animation-play-state:paused}
@keyframes lc-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.lc-logo{flex-shrink:0;display:flex;align-items:center;gap:9px;padding:14px 22px;border-radius:14px;color:#94a3b8;font-size:17px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;filter:grayscale(1);opacity:.5;transition:filter .3s ease,opacity .3s ease,transform .2s ease,background .3s ease}
.lc-logo svg{color:var(--c);flex-shrink:0}
.lc-logo:hover{filter:grayscale(0);opacity:1;color:#1e293b;transform:translateY(-3px);background:#f8fafc}

/* Optional accessibility opt-in: uncomment to lay logos out as a static centred
   grid for visitors who request reduced motion.
@media(prefers-reduced-motion:reduce){
  .lc-marquee .lc-track{animation:none;flex-wrap:wrap;justify-content:center;width:100%}
  .lc-dup{display:none}
} */
</style>

Angular

// @ts-nocheck
// Note: vanilla JS DOM manipulation is preserved as-is inside ngAfterViewInit().
// For idiomatic Angular, replace document.getElementById() with @ViewChild() refs
// and move state into component properties with two-way binding.
import { Component, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-logo-cloud',
  standalone: true,
  imports: [CommonModule],
  encapsulation: ViewEncapsulation.None,
  template: `
    <section class="lc">
      <p class="lc-eyebrow">Trusted by fast-growing teams at</p>
      <div class="lc-marquee">
        <div class="lc-track">
          <div class="lc-logo" style="--c:#6366f1"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2 2 7l10 5 10-5-10-5z"/><path d="M2 12l10 5 10-5" fill="none" stroke="currentColor" stroke-width="2"/></svg><span>Northwind</span></div>
          <div class="lc-logo" style="--c:#0ea5e9"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><circle cx="12" cy="12" r="9"/></svg><span>Loopwork</span></div>
          <div class="lc-logo" style="--c:#10b981"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2 22 20H2L12 2z"/></svg><span>Everpeak</span></div>
          <div class="lc-logo" style="--c:#f59e0b"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><rect x="4" y="4" width="16" height="16" rx="4"/></svg><span>Sunforge</span></div>
          <div class="lc-logo" style="--c:#ec4899"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2l2.9 6.2 6.8.7-5.1 4.5 1.5 6.7L12 17.8 5.9 20.1l1.5-6.7L2.3 8.9l6.8-.7L12 2z"/></svg><span>Lumina</span></div>
          <div class="lc-logo" style="--c:#8b5cf6"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2l8.7 5v10L12 22 3.3 17V7L12 2z"/></svg><span>Hexabit</span></div>
          <div class="lc-logo" style="--c:#ef4444"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 21s-7-4.3-9.3-8.6C1 9.2 2.6 5 6.4 5c2 0 3.4 1.2 4.1 2.4C11.2 6.2 12.6 5 14.6 5 18.4 5 20 9.2 18.3 12.4 16 16.7 12 21 12 21z"/></svg><span>Vela</span></div>
          <div class="lc-logo" style="--c:#14b8a6"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M3 12a9 9 0 0 1 18 0 9 9 0 0 1-18 0zm9-5a5 5 0 0 0 0 10V7z"/></svg><span>Cresta</span></div>
    
          <div class="lc-logo lc-dup" aria-hidden="true" style="--c:#6366f1"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2 2 7l10 5 10-5-10-5z"/><path d="M2 12l10 5 10-5" fill="none" stroke="currentColor" stroke-width="2"/></svg><span>Northwind</span></div>
          <div class="lc-logo lc-dup" aria-hidden="true" style="--c:#0ea5e9"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><circle cx="12" cy="12" r="9"/></svg><span>Loopwork</span></div>
          <div class="lc-logo lc-dup" aria-hidden="true" style="--c:#10b981"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2 22 20H2L12 2z"/></svg><span>Everpeak</span></div>
          <div class="lc-logo lc-dup" aria-hidden="true" style="--c:#f59e0b"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><rect x="4" y="4" width="16" height="16" rx="4"/></svg><span>Sunforge</span></div>
          <div class="lc-logo lc-dup" aria-hidden="true" style="--c:#ec4899"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2l2.9 6.2 6.8.7-5.1 4.5 1.5 6.7L12 17.8 5.9 20.1l1.5-6.7L2.3 8.9l6.8-.7L12 2z"/></svg><span>Lumina</span></div>
          <div class="lc-logo lc-dup" aria-hidden="true" style="--c:#8b5cf6"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2l8.7 5v10L12 22 3.3 17V7L12 2z"/></svg><span>Hexabit</span></div>
          <div class="lc-logo lc-dup" aria-hidden="true" style="--c:#ef4444"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 21s-7-4.3-9.3-8.6C1 9.2 2.6 5 6.4 5c2 0 3.4 1.2 4.1 2.4C11.2 6.2 12.6 5 14.6 5 18.4 5 20 9.2 18.3 12.4 16 16.7 12 21 12 21z"/></svg><span>Vela</span></div>
          <div class="lc-logo lc-dup" aria-hidden="true" style="--c:#14b8a6"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M3 12a9 9 0 0 1 18 0 9 9 0 0 1-18 0zm9-5a5 5 0 0 0 0 10V7z"/></svg><span>Cresta</span></div>
        </div>
      </div>
    </section>
  `,
  styles: [`
    *{box-sizing:border-box;margin:0;padding:0}
    body{font-family:system-ui,-apple-system,sans-serif;background:#fff;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
    .lc{width:100%;max-width:780px;text-align:center}
    .lc-eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8;margin-bottom:26px}
    
    .lc-marquee{position:relative;overflow:hidden}
    /* compound selectors stay as residual CSS through the Tailwind export, so the
       marquee animation and edge-fade mask are preserved verbatim */
    .lc .lc-marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
    .lc-marquee .lc-track{display:flex;align-items:center;gap:16px;width:max-content;animation:lc-scroll 26s linear infinite}
    .lc-marquee:hover .lc-track{animation-play-state:paused}
    @keyframes lc-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
    
    .lc-logo{flex-shrink:0;display:flex;align-items:center;gap:9px;padding:14px 22px;border-radius:14px;color:#94a3b8;font-size:17px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;filter:grayscale(1);opacity:.5;transition:filter .3s ease,opacity .3s ease,transform .2s ease,background .3s ease}
    .lc-logo svg{color:var(--c);flex-shrink:0}
    .lc-logo:hover{filter:grayscale(0);opacity:1;color:#1e293b;transform:translateY(-3px);background:#f8fafc}
    
    /* Optional accessibility opt-in: uncomment to lay logos out as a static centred
       grid for visitors who request reduced motion.
    @media(prefers-reduced-motion:reduce){
      .lc-marquee .lc-track{animation:none;flex-wrap:wrap;justify-content:center;width:100%}
      .lc-dup{display:none}
    } */
  `]
})
export class LogoCloudComponent {}

Loading…