Logo Cloud Ticker

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

ticker.html

<section class="ws-logo-cloud bg-[var(--ws-logo-cloud-bg)] py-12">
  <div class="mx-auto max-w-7xl px-6">
    <p class="text-center text-sm font-medium text-[var(--ws-logo-cloud-text-muted)]">Trusted by industry leaders</p>
    <div class="relative mt-8 overflow-hidden">
      <!-- Fade edges -->
      <div class="pointer-events-none absolute inset-y-0 left-0 z-10 w-16 bg-gradient-to-r from-[var(--ws-logo-cloud-bg)]"></div>
      <div class="pointer-events-none absolute inset-y-0 right-0 z-10 w-16 bg-gradient-to-l from-[var(--ws-logo-cloud-bg)]"></div>

      <div class="flex animate-[scroll_25s_linear_infinite] gap-12">
        <span class="shrink-0 text-xl font-bold tracking-tight text-[var(--ws-logo-cloud-border)]">Vercel</span>
        <span class="shrink-0 text-xl font-bold tracking-tight text-[var(--ws-logo-cloud-border)]">Stripe</span>
        <span class="shrink-0 text-xl font-bold tracking-tight text-[var(--ws-logo-cloud-border)]">Linear</span>
        <span class="shrink-0 text-xl font-bold tracking-tight text-[var(--ws-logo-cloud-border)]">Notion</span>
        <span class="shrink-0 text-xl font-bold tracking-tight text-[var(--ws-logo-cloud-border)]">Figma</span>
        <span class="shrink-0 text-xl font-bold tracking-tight text-[var(--ws-logo-cloud-border)]">Resend</span>
        <span class="shrink-0 text-xl font-bold tracking-tight text-[var(--ws-logo-cloud-border)]">Planetscale</span>
        <span class="shrink-0 text-xl font-bold tracking-tight text-[var(--ws-logo-cloud-border)]">Supabase</span>
        <!-- Duplicate for seamless loop -->
        <span class="shrink-0 text-xl font-bold tracking-tight text-[var(--ws-logo-cloud-border)]">Vercel</span>
        <span class="shrink-0 text-xl font-bold tracking-tight text-[var(--ws-logo-cloud-border)]">Stripe</span>
        <span class="shrink-0 text-xl font-bold tracking-tight text-[var(--ws-logo-cloud-border)]">Linear</span>
        <span class="shrink-0 text-xl font-bold tracking-tight text-[var(--ws-logo-cloud-border)]">Notion</span>
        <span class="shrink-0 text-xl font-bold tracking-tight text-[var(--ws-logo-cloud-border)]">Figma</span>
        <span class="shrink-0 text-xl font-bold tracking-tight text-[var(--ws-logo-cloud-border)]">Resend</span>
        <span class="shrink-0 text-xl font-bold tracking-tight text-[var(--ws-logo-cloud-border)]">Planetscale</span>
        <span class="shrink-0 text-xl font-bold tracking-tight text-[var(--ws-logo-cloud-border)]">Supabase</span>
      </div>
    </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

logo-cloudtickerscrollanimationsocial-proof

Slots

Name	Required	Description
heading	No	Trust text above the ticker.
logos	Yes	Logo elements duplicated for seamless loop.

Infinite horizontal scrolling logo ticker. Logos are duplicated for seamless loop. Gradient fade on both edges. CSS-only animation with prefers-reduced-motion fallback (stops animation). Replace text placeholders with actual SVG logos.