Duck Logo Wall
The proof strip — a static grid or a running marquee, with every logo sized by height alone and brand colours flattened until a reader looks at them.
Preview
Four apps shipped on the registry, and every gap they found is filed.
Wordmarks, because none of them has a logo file yet.
Installation
One command writes the section and every component it renders.
pnpm dlx shadcn@latest add @duck/duck-logo-wallThe block lands in components/blocks/duck-logo-wall.tsx. It builds on duck-marquee and hud-label, which the CLI installs alongside it. Already installed items are skipped.
Usage
import { DuckLogoWall } from "@/components/blocks/duck-logo-wall"A block is a starting point, not a widget. The props exist so the example renders with real content — once the file is in your project, hard-code what never changes and delete the rest.
Props
Everything not listed here is forwarded to the root element.
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | React.ReactNode | - | Short line above the wall, set in HUD type. |
| title | React.ReactNode | - | One sentence under the eyebrow. |
| logos | DuckLogoWallItem[] | - | name, plus src, node or neither. name is the alt text, the accessible name of the link, and the wordmark fallback when there is no asset. |
| variant | "grid" | "marquee" | "grid" | A wall that holds still, or a strip that runs. Twelve logos and up want the marquee. |
| logoHeight | number | 28 | Height in px for every logo, width auto. One number for the whole set is what makes a wordmark and a square mark carry the same weight. |
| tone | "mono" | "colour" | "mono" | mono flattens the assets to the foreground and lifts each on hover. colour is a decision, not a default. |
| duration | number | 32 | Seconds for one marquee pass. |
| footer | React.ReactNode | - | Under the wall: a case-study link, a count, a caveat. |
Rules
What keeps this section from turning into noise.
- Size logos by height, never by width. A wide wordmark set to the same width as a square mark reads twice as heavy, and no amount of gap fixes it.
- Eight brand palettes at once is noise on a near-black canvas. Keep tone mono unless the logos are the content.
- Give every item a name even when it has art. It is the alt text, the link's accessible name, and what renders when the asset is missing.
- The marquee duplicates its track and hides the copy from assistive tech. Do not add list semantics around it — the duplicate would announce the same names twice.