Logo Marquee
Logos slide past at a steady pace, ease to a stop under the pointer, and scrub with a drag or a sideways swipe before coasting back. They rest in one quiet ink and lift to colour when pointed at. One row or two in opposite directions, with faded edges. A name without an image is drawn as a wordmark.
The decision inside it
It makes only as many copies as the width needs
Most marquees render the list twice and hope; on an ultra-wide screen the copy runs out and a gap slides across. Here the strip and one set are measured and re-counted when either changes, and speed is in pixels per second, so five logos and fifty move at the same pace.
When to use it
Use Logo Marquee for the "Trusted by" strip on a landing page: an endless row of logos that eases to a stop on hover and scrubs with a drag. Pass an image per logo, or just a name for a wordmark; it never draws brand logos itself.
Installation
How you get it
Paste this into Claude Code, Cursor, Codex or any coding agent. It installs the file and uses it as it is, instead of writing a new one.
Use Layro's Logo Marquee for this.
Install it: npx shadcn@latest add @layro/logo-marquee
(the @layro registry is set up in components.json, with LAYRO_KEY in .env.local)
Import it from @/components/ui/logo-marquee.
Do not rewrite or restyle it. Pass my data through its props
and keep its built-in states.For the full brief with every prop and the mistakes assistants usually make, use Copy prompt above. Free components install through the @layro registry with your CLI token: see the Namespaced tab.
Usage
import { LogoMarquee } from "@/components/ui/logo-marquee";
export function Customers() {
return (
<LogoMarquee
label="Trusted by"
items={[{ name: "Vertically", src: "/logos/vertically.svg" }, { name: "Madgixs" }, { name: "Layro" }]}
rows={2}
speed={36}
/>
);
}API reference
“Copy prompt” above puts a full brief on your clipboard — install command, dependencies, props, and the mistakes an assistant usually makes with this component.
Props
Read from the component’s own TypeScript interface when the site is built, so this table cannot drift from the file you install.
| Prop | Type | Notes |
|---|---|---|
itemsrequired | MarqueeItem[] | — |
speed | number | Pixels per second. Default 40. |
rows | 1 | 2 | One row, or two that split the list. Default 1. |
direction | "left" | "right" | Which way the first row moves. Default "left". |
alternate | boolean | With two rows, run the second the other way. Default true. |
gap | number | Space between logos, in px. Default 64. |
logoHeight | number | Height of a logo, in px: an image's height, a wordmark's cap size. Default 28. |
pauseOnHover | boolean | Ease to a stop under the pointer. Default true. |
draggable | boolean | Drag and sideways-swipe scrubbing. Default true. |
fade | boolean | Fade the left and right edges. Default true. |
grayscale | boolean | Greyscale until hovered. Default true. |
label | string | Names the strip for screen readers. Default "Trusted by". |
Dependencies
npm packages
clsxtailwind-mergeLayro foundations, installed alongside it
layro-themeStates
All of them are drawn by the component. None is left for you to design.
- Moving
- Paused on hover
- Dragging
- Two rows
- Reduced motion
Accessibility
- Keyboard reachable throughout, in visual order
- Focus trapped in overlays, Escape closes them
- Focus returns to whatever opened it
- Live regions announce what changed, not that something did
- Honours prefers-reduced-motion
Responsive behavior
- Sizes to its container, not the viewport
- Usable from 320px up
- Pointer-based interaction, so trackpad and touch both work
- No hover-only affordances
Lifetime access
Every component, and everything we ship next.
- All 232 components, source included
- Every template, and everything released after you buy
- shadcn CLI or download — React 18/19, Tailwind v4
- One payment. No subscription.
More in CreativeAll Creative components
Integration Beam
Your product between the tools it connects, with light flowing along the beams.
Model Wheel
Names on a turning drum that always lands exactly on a row.
Typewriter
Text that types itself out, or arrives word by word, and can cycle through several lines.
Flip Words
One word in a headline that rotates through a list, with the line resizing smoothly.
Gradient Text
Words filled with a gradient: still, slowly flowing, or swept once when they come into view.
Grid & Dot Background
A quiet line, dot or cross pattern behind a section, fading out toward the edges.