Marketing block

Seamless Logo Marquee

An infinite horizontal logo scroll with masked edges, a pause-on-hover affordance and a reduced-motion fallback that wraps instead of moving.

83 linesNo dependenciesAdded 8 Aug 2026

logos
marquee
social proof
customers
scroll

What's included

components/logo-cloud.tsx
No runtime dependencies

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add logo-cloud

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

Trusted by teams shipping every day

NorthwindContosoInitechUmbrellaGlobexSoylentHooliVandelay

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/logo-cloud.tsx

/**
 * <LogoCloud> — an infinite horizontal marquee of customer logos.
 *
 * The track holds the list twice and translates by exactly -50%, so the
 * second copy lands where the first began and the loop has no seam. Edges
 * fade out with a mask rather than a gradient overlay, which keeps it
 * correct on any page background.
 *
 * Honours `prefers-reduced-motion` by stopping the scroll and wrapping
 * instead — a permanent horizontal crawl is a vestibular trigger, and it is
 * also unreadable.
 */

import * as React from 'react'

export interface LogoCloudProps {
  logos?: string[]
  caption?: string
  /** Seconds for one full pass. Longer reads calmer. */
  duration?: number
  className?: string
}

const DEFAULT_LOGOS = [
  'Northwind',
  'Contoso',
  'Initech',
  'Umbrella',
  'Globex',
  'Soylent',
  'Hooli',
  'Vandelay',
]

export function LogoCloud({
  logos = DEFAULT_LOGOS,
  caption = 'Trusted by teams shipping every day',
  duration = 40,
  className = '',
}: LogoCloudProps) {
  return (
    <section className={`w-full py-12 ${className}`}>
      {caption ? (
        <p className="mb-8 text-center text-sm font-medium text-muted-foreground">
          {caption}
        </p>
      ) : null}

      <div
        className="group relative overflow-hidden"
        style={{
          maskImage:
            'linear-gradient(to right, transparent, black 12%, black 88%, transparent)',
          WebkitMaskImage:
            'linear-gradient(to right, transparent, black 12%, black 88%, transparent)',
        }}
      >
        <div
          className="flex w-max items-center gap-14 motion-safe:animate-[logo-marquee_var(--logo-duration)_linear_infinite] motion-reduce:flex-wrap motion-reduce:justify-center group-hover:[animation-play-state:paused]"
          style={{ ['--logo-duration' as string]: `${duration}s` }}
        >
          {[...logos, ...logos].map((name, i) => (
            <span
              key={`${name}-${i}`}
              aria-hidden={i >= logos.length}
              className="shrink-0 text-xl font-bold tracking-tight text-muted-foreground/85 transition-colors hover:text-foreground"
            >
              {name}
            </span>
          ))}
        </div>
      </div>

      <style>{`
        @keyframes logo-marquee {
          from { transform: translateX(0); }
          to   { transform: translateX(-50%); }
        }
      `}</style>
    </section>
  )
}

Before you paste

Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
Nothing to install. No component library, no icon package.
Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/logo-cloud.tsx and import it where you need the section:

import { LogoCloud } from '@/components/logo-cloud'

Customize

2 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

Prop	Type	Default
`logos`	`string[]`	`DEFAULT_LOGOS`
`caption`	`string`	`'Trusted by teams shipping every day'`
`duration`Seconds for one full pass. Longer reads calmer.	`number`	`40`
`className`	`string`	`''`

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

logo-cloud.html

<!--
  Seamless Logo Marquee — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block has no interactive behaviour, so nothing is missing.
-->
<section class="w-full py-12 ">
  <p class="mb-8 text-center text-sm font-medium text-muted-foreground">Trusted by teams shipping every day</p>
  <div class="group relative overflow-hidden" style="mask-image:linear-gradient(to right, transparent, black 12%, black 88%, transparent);-webkit-mask-image:linear-gradient(to right, transparent, black 12%, black 88%, transparent)">
    <div class="flex w-max items-center gap-14 motion-safe:animate-[logo-marquee_var(--logo-duration)_linear_infinite] motion-reduce:flex-wrap motion-reduce:justify-center group-hover:[animation-play-state:paused]" style="--logo-duration:40s">
      <span aria-hidden="false" class="shrink-0 text-xl font-bold tracking-tight text-muted-foreground/85 transition-colors hover:text-foreground">Northwind</span>
      <span aria-hidden="false" class="shrink-0 text-xl font-bold tracking-tight text-muted-foreground/85 transition-colors hover:text-foreground">Contoso</span>
      <span aria-hidden="false" class="shrink-0 text-xl font-bold tracking-tight text-muted-foreground/85 transition-colors hover:text-foreground">Initech</span>
      <span aria-hidden="false" class="shrink-0 text-xl font-bold tracking-tight text-muted-foreground/85 transition-colors hover:text-foreground">Umbrella</span>
      <span aria-hidden="false" class="shrink-0 text-xl font-bold tracking-tight text-muted-foreground/85 transition-colors hover:text-foreground">Globex</span>
      <span aria-hidden="false" class="shrink-0 text-xl font-bold tracking-tight text-muted-foreground/85 transition-colors hover:text-foreground">Soylent</span>
      <span aria-hidden="false" class="shrink-0 text-xl font-bold tracking-tight text-muted-foreground/85 transition-colors hover:text-foreground">Hooli</span>
      <span aria-hidden="false" class="shrink-0 text-xl font-bold tracking-tight text-muted-foreground/85 transition-colors hover:text-foreground">Vandelay</span>
      <span aria-hidden="true" class="shrink-0 text-xl font-bold tracking-tight text-muted-foreground/85 transition-colors hover:text-foreground">Northwind</span>
      <span aria-hidden="true" class="shrink-0 text-xl font-bold tracking-tight text-muted-foreground/85 transition-colors hover:text-foreground">Contoso</span>
      <span aria-hidden="true" class="shrink-0 text-xl font-bold tracking-tight text-muted-foreground/85 transition-colors hover:text-foreground">Initech</span>
      <span aria-hidden="true" class="shrink-0 text-xl font-bold tracking-tight text-muted-foreground/85 transition-colors hover:text-foreground">Umbrella</span>
      <span aria-hidden="true" class="shrink-0 text-xl font-bold tracking-tight text-muted-foreground/85 transition-colors hover:text-foreground">Globex</span>
      <span aria-hidden="true" class="shrink-0 text-xl font-bold tracking-tight text-muted-foreground/85 transition-colors hover:text-foreground">Soylent</span>
      <span aria-hidden="true" class="shrink-0 text-xl font-bold tracking-tight text-muted-foreground/85 transition-colors hover:text-foreground">Hooli</span>
      <span aria-hidden="true" class="shrink-0 text-xl font-bold tracking-tight text-muted-foreground/85 transition-colors hover:text-foreground">Vandelay</span>
    </div>
  </div>
  <style>@keyframes logo-marquee {
          from { transform: translateX(0); }
          to   { transform: translateX(-50%); }
        }</style>
</section>

This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
It is one frame: the component in its initial state, with no props applied beyond the defaults.
Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt

Used in these pages

Want the whole screen instead of this one section? Open a page and copy it entire.

3 more blocks in Logo Clouds

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse Logo Clouds

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

More Logo Clouds blocks

View category

Bordered Logo Grid

Hairline-separated cells that hold still and show the whole set at once — the logo wall for a footer, a customers page, or anywhere the count is the claim.

Logo Clouds89 linesNo deps

Under-Hero Logo Strip

One unbordered line of wordmarks beside a claim you can actually be wrong about, sized to sit under a hero without pushing the CTA down or moving while the headline is being read.

Logo Clouds95 lines1 dep10 Sept

Customers

Someone in your industry has already done this

Named with permission. Where a segment shows fewer logos than customers, the rest are under agreements that do not allow it.

Financial servicesand 40 more: Fieldstone
Meridian Capital
Umbra
Halden Trust
Healthcareand 18 more: Alcove Health
Coastline
Lumon Care
Logisticsand 12 more: Northwind Freight
Vandelay
Portside
Public sector: City of Ravel
Kestrel Authority

Logos Grouped by Industry

Customer logos under segment headings as a description list, with an “and 40 more” count for the ones under NDA — answers whether you have done this for someone like the reader, which a flat wall cannot.

Logo Clouds144 linesNo deps13 Sept