Mask-faded infinite logo marquee
Infinite horizontal logo marquee with mask-faded edges and a hover-to-slow speed control, licensed MIT. Good for a client or integrations strip under a hero. Needs at least 6 to 8 logos of similar visual weight or the loop will look sparse and uneven.
Live preview
open in new tab ↗import { LogoMarquee } from "@/components/ui/logo-marquee";
const logos = [
{ src: "/logos/logo-1.svg", alt: "Partner 1" },
{ src: "/logos/logo-2.svg", alt: "Partner 2" },
{ src: "/logos/logo-3.svg", alt: "Partner 3" },
{ src: "/logos/logo-4.svg", alt: "Partner 4" },
{ src: "/logos/logo-5.svg", alt: "Partner 5" },
{ src: "/logos/logo-6.svg", alt: "Partner 6" },
];
export default function LogoMarqueePreview() {
return (
<div className="flex w-full items-center justify-center bg-background py-16">
<LogoMarquee logos={logos} />
</div>
);
}Block id: 21st-dev-marquee-logo-mask-fademotion · code-required
More marquee blocks
Want the whole site, not just the block?
We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.