Blockbeta

Logo Cloud

Grayscale-to-color logo strip with a marquee option that respects reduced motion.

Edit on GitHub

pnpm dlx @glinui/cli@latest add logo-cloud

Trusted by teams at

Acme
Nimbus
Parallax
Fernwood
Quill
Loomwork
Halcyon
Tidepool

Installation

Install from

pnpm dlx @glinui/cli@latest add logo-cloud

Prefer the package?

Usage

Own design. Items are ReactNode (or `{ name, logo, href }`), so the block works with any SVG set. The demos use generated text wordmarks; never ship real brand marks without permission.

The marquee reuses Marquee. Looped copies are aria-hidden, so linked items render unlinked there. Use the grid layout when logos must link.

Under reduced motion or motion none the marquee becomes the static grid.

Variants

Marquee with and without faded edges, and a short grid.

Marquee with faded edges

Acme

Nimbus

Parallax

Fernwood

Quill

Loomwork

Halcyon

Tidepool

Acme

Nimbus

Parallax

Fernwood

Quill

Loomwork

Halcyon

Tidepool

Acme
Nimbus
Parallax
Fernwood

<LogoCloud layout="marquee" items={items} />
<LogoCloud layout="marquee" fadeEdges={false} grayscale={false} items={items} />

Accessibility

The grid is a labelled list.
Named logos expose `role=img` with the name, or a link with an aria-label.
The marquee pauses on hover and on keyboard focus.

ARIA Attributes

`aria-label` on the list or group
`aria-hidden` on the looped copy

Reduced Motion

Entrance reveals and the marquee scroll follow the Glin motion level. At level none or prefers-reduced-motion everything renders in its final static state.

API Reference

Prop	Type	Required	Default	Description
`items`	`LogoCloudEntry[]`	Yes	`-`	Logos.
`layout`	`"grid" \| "marquee"`	No	`grid`	Static responsive list or scrolling row.
`fadeEdges`	`boolean`	No	`true`	Masks the marquee ends.
`grayscale`	`boolean`	No	`true`	Grayscale until hover or focus.
`speed`	`number`	No	`40`	Seconds per loop.
`title / listLabel`	`ReactNode / string`	-	`-`	Caption above and the accessible list label (default Trusted by).
`listLabel`	`string`	No	`"Trusted by"`	Accessible label of the list. Defaults to "Trusted by".
`title`	`React.ReactNode`	No	`-`	Optional line above the logos.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { LogoCloud } from "@glinui/ui"

Source Files

logo-cloud.tsx motion-engine.tsx

logo-cloud.test.tsxtest

Dependencies

@glinui/ui@glinui/motion

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/logo-cloud.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

LogoCloudProps

`LogoCloudProps`

Prop	Type	Required	Default	Description
`fadeEdges`	`boolean`	No	`true`	Mask the start and end of the marquee. Default true.
`grayscale`	`boolean`	No	`true`	Grayscale until hover or focus. Default true.
`items`	`LogoCloudEntry[]`	Yes	`-`	-
`layout`	`"grid" \| "marquee"`	No	`"grid"`	`grid` is a static responsive list. `marquee` scrolls (static grid under reduced motion).
`listLabel`	`string`	No	`"Trusted by"`	Accessible label of the list. Defaults to "Trusted by".
`speed`	`number`	No	`40`	Seconds for one marquee loop.
`title`	`React.ReactNode`	No	`-`	Optional line above the logos.