Logo Cloud Marquee

Fetch pattern JSON: curl https://webspire.de/patterns/logo-cloud/marquee.json

marquee.html

<section class="ws-logo-cloud overflow-hidden bg-[var(--ws-logo-cloud-bg)] py-14">
  <style>
    @keyframes ws-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
    .ws-logo-marquee-track { animation: ws-marquee 30s linear infinite; will-change: transform; }
    .ws-logo-marquee:hover .ws-logo-marquee-track { animation-play-state: paused; }
    @media (prefers-reduced-motion: reduce) { .ws-logo-marquee-track { animation: none; } }
  </style>

  <div class="mx-auto max-w-7xl px-6">
    <p class="mb-10 text-center text-sm font-medium uppercase tracking-widest text-[var(--ws-logo-cloud-text-muted)]">Trusted by teams at</p>
  </div>

  <div class="ws-logo-marquee flex overflow-hidden" aria-label="Partner companies">
    <!-- Track 1 -->
    <div class="ws-logo-marquee-track flex shrink-0 items-center gap-16 px-8" aria-hidden="false">
      <span class="whitespace-nowrap text-lg font-semibold tracking-tight text-[var(--ws-logo-cloud-text-muted)] opacity-50 transition-opacity hover:opacity-80">Acme Corp</span>
      <span class="whitespace-nowrap text-lg font-semibold tracking-tight text-[var(--ws-logo-cloud-text-muted)] opacity-50 transition-opacity hover:opacity-80">Notion</span>
      <span class="whitespace-nowrap text-lg font-semibold tracking-tight text-[var(--ws-logo-cloud-text-muted)] opacity-50 transition-opacity hover:opacity-80">Linear</span>
      <span class="whitespace-nowrap text-lg font-semibold tracking-tight text-[var(--ws-logo-cloud-text-muted)] opacity-50 transition-opacity hover:opacity-80">Vercel</span>
      <span class="whitespace-nowrap text-lg font-semibold tracking-tight text-[var(--ws-logo-cloud-text-muted)] opacity-50 transition-opacity hover:opacity-80">Stripe</span>
      <span class="whitespace-nowrap text-lg font-semibold tracking-tight text-[var(--ws-logo-cloud-text-muted)] opacity-50 transition-opacity hover:opacity-80">Figma</span>
      <span class="whitespace-nowrap text-lg font-semibold tracking-tight text-[var(--ws-logo-cloud-text-muted)] opacity-50 transition-opacity hover:opacity-80">Loom</span>
      <span class="whitespace-nowrap text-lg font-semibold tracking-tight text-[var(--ws-logo-cloud-text-muted)] opacity-50 transition-opacity hover:opacity-80">Raycast</span>
      <span class="whitespace-nowrap text-lg font-semibold tracking-tight text-[var(--ws-logo-cloud-text-muted)] opacity-50 transition-opacity hover:opacity-80">Supabase</span>
      <span class="whitespace-nowrap text-lg font-semibold tracking-tight text-[var(--ws-logo-cloud-text-muted)] opacity-50 transition-opacity hover:opacity-80">Resend</span>
    </div>
    <!-- Track 2 (duplicate for seamless loop) -->
    <div class="ws-logo-marquee-track flex shrink-0 items-center gap-16 px-8" aria-hidden="true">
      <span class="whitespace-nowrap text-lg font-semibold tracking-tight text-[var(--ws-logo-cloud-text-muted)] opacity-50">Acme Corp</span>
      <span class="whitespace-nowrap text-lg font-semibold tracking-tight text-[var(--ws-logo-cloud-text-muted)] opacity-50">Notion</span>
      <span class="whitespace-nowrap text-lg font-semibold tracking-tight text-[var(--ws-logo-cloud-text-muted)] opacity-50">Linear</span>
      <span class="whitespace-nowrap text-lg font-semibold tracking-tight text-[var(--ws-logo-cloud-text-muted)] opacity-50">Vercel</span>
      <span class="whitespace-nowrap text-lg font-semibold tracking-tight text-[var(--ws-logo-cloud-text-muted)] opacity-50">Stripe</span>
      <span class="whitespace-nowrap text-lg font-semibold tracking-tight text-[var(--ws-logo-cloud-text-muted)] opacity-50">Figma</span>
      <span class="whitespace-nowrap text-lg font-semibold tracking-tight text-[var(--ws-logo-cloud-text-muted)] opacity-50">Loom</span>
      <span class="whitespace-nowrap text-lg font-semibold tracking-tight text-[var(--ws-logo-cloud-text-muted)] opacity-50">Raycast</span>
      <span class="whitespace-nowrap text-lg font-semibold tracking-tight text-[var(--ws-logo-cloud-text-muted)] opacity-50">Supabase</span>
      <span class="whitespace-nowrap text-lg font-semibold tracking-tight text-[var(--ws-logo-cloud-text-muted)] opacity-50">Resend</span>
    </div>
  </div>
</section>

Details

Family

logo-cloud

Tier

enhanced

Kind

section

Extends

logo-cloud/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

logomarqueetickertrusted-bypartnersinfinite-scroll

Slots

Name	Required	Description
headline	No	Trust statement above the marquee, e.g. "Trusted by teams at".
logos	Yes	Two identical logo tracks for seamless infinite loop.

Zwei identische Marquee-Tracks laufen versetzt, sodass kein Sprung beim Loop entsteht. will-change: transform aktiviert GPU-Compositing. Hover pausiert alle Tracks gleichzeitig via CSS-Selektor auf dem gemeinsamen .ws-logo-marquee-Wrapper. prefers-reduced-motion deaktiviert die Animation vollständig.