A marquee is the one pattern the web deprecated and then rebuilt, and it came back for a good reason: a row that moves says "there is more of this" without asking anyone to scroll. That is exactly what a logo strip, a testimonial row or a technology list needs to say.
39 public components on 21st have "marquee" in the name. The technique is simple; the obligations are the part people skip.
The shapes
The plain row. Marquee by lukacho is the general version, useful for comments or technologies. Testimonials with Marquee is the quote strip, and Testimonials Marquee by ShadcnSpace is another take.
Logos. Logos 3 from Shadcnblocks.com and Logo Carousel by cult-ui are the client-logo versions, and Logo Cloud 3 by Efferd is the static grid alternative.
Vertical. Text Marquee by tom_ui and Vertical Marquee by Unlumen UI scroll a column instead of a row, which suits a narrow sidebar.
The showpieces. Perspective Marquee by kapishdima is a 3D-tilted row with depth-of-field blur, 3D Marquee by Shatlyk1011 is the image-grid version, and Marquee Along SVG Path by danielpetho animates children along an arbitrary path.
The technique
Two duplicated tracks and one keyframe. Render the content twice inside a flex row, translate the container by minus fifty percent, and loop. That is the whole implementation, it needs no JavaScript, and it is why this pattern belongs in the free tier of the animation cost model.
Three details separate one that reads well from one that reads broken. Mask both edges with a gradient, or the items appear to collide with the container. Duplicate enough content to fill the widest viewport, or there is a visible gap at the loop point. And set the duration from the content width rather than a fixed number of seconds, or a long row scrolls faster than a short one.
The obligations
Pause on hover and on focus. Content that moves for more than five seconds beside other content needs a pause mechanism under WCAG 2.2.2, and a testimonial that scrolls away mid-sentence is a testimonial nobody finishes.
No autoplay under reduced motion. Render the row static. For a logo strip that usually means showing a grid instead, which is why having the static variant is worth it.
It is content, not decoration, if it carries a claim. Logos are proof. They belong in the HTML as images with alt text, per the carousel guide, not painted into a canvas that stops when the tab is backgrounded.
Links stay reachable. If the items are links, a moving target is hard to click. Pause on hover solves it; a marquee that does not pause makes its own links unusable.
On logo walls specifically
The one rule that matters more than the animation: the logos have to be real and recognisable. Four unknown marks read as a page with nothing to show, and the landing page guide counts the logo wall among the blocks worth skipping rather than half-filling.
If you have three customers and none are household names, a single named quote does more, which is the argument in the testimonial guide.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| CSS keyframes | The whole pattern, with no runtime | You handle the duplication and masking |
| Embla with autoplay | A marquee that is also a real carousel | Heavier than a keyframe |
| A static grid | Logos under reduced motion, or when there are few | No movement, which is sometimes the point |
| 21st | Plain rows, logo strips, vertical and 3D variants | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue.
Frequently asked
- How do you build an infinite marquee?
- Two duplicated tracks and one keyframe: render the content twice in a flex row, translate the container by minus fifty percent and loop. No JavaScript needed. Mask both edges with a gradient, duplicate enough to fill the widest viewport, and set the duration from the content width rather than a fixed number of seconds.
- Does a marquee need a pause control?
- Yes. Content that moves automatically for more than five seconds beside other content needs a pause mechanism under WCAG 2.2.2, and under prefers-reduced-motion it should not move at all. If the items are links, pausing on hover is also what makes them clickable.
- Should logos be in a marquee or a static grid?
- Either, but keep the static variant, because that is what reduced motion needs. More important than the movement: the logos have to be real and recognisable. Four unknown marks read as a page with nothing to show, and one named quote does more.
- Is a marquee decoration or content?
- Content, if it carries a claim. Logos are proof, so they belong in the HTML as images with alt text rather than painted into a canvas that stops when the tab is backgrounded.