Logo Carousel
A smooth infinite horizontal marquee for showcasing brand logos or partner icons. It pauses on hover and loops seamlessly, making it perfect for social-proof sections on landing pages.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
carouselmarqueelogosscrollbrand
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
A smooth infinite horizontal marquee for showcasing brand logos with optional pause on hover.
CSS
css
body { margin: 0; min-height: 100vh; display: flex; align-items: center; background: #0a0a0a; overflow: hidden; }
.wrap { width: 100%; max-width: 90vw; overflow: hidden; padding: 20px 0; }
.track {
display: flex;
width: max-content;
animation: marquee 30s linear infinite;
}
.track.reverse { animation-name: marquee-reverse; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes marquee-reverse { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
.track:hover { animation-play-state: running; }
.logo {
flex-shrink: 0;
height: 64px;
padding: 0 20px;
margin: 0 24px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 18px;
font-weight: 700;
font-family: 'Geist', system-ui, -apple-system, sans-serif;
color: #a1a1aa;
background: transparent;
white-space: nowrap;
opacity: 0.55;
transition: opacity 0.3s;
}
.logo:hover { opacity: 1; }
.logo svg { width: 1.2em; height: 1.2em; flex-shrink: 0; }HTML
html
<div class="wrap">
<div class="track " id="track">
<div class="logo"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>Acme Corp</div>
<div class="logo"><svg viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="10"/><path d="M8 12l3 3 5-6" stroke="#0a0a0a" stroke-width="2" fill="none"/></svg>Veritas</div>
<div class="logo"><svg viewBox="0 0 24 24" fill="currentColor"><polygon points="12,2 22,22 2,22"/></svg>Apex</div>
<div class="logo"><svg viewBox="0 0 24 24" fill="currentColor"><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M8 8h8M8 12h8M8 16h5" stroke="#0a0a0a" stroke-width="1.5" fill="none"/></svg>Docu</div>
<div class="logo"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>Globex</div>
<div class="logo"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M13 3L4 14h7l-2 7 9-11h-7l2-7z"/></svg>Voltex</div>
<div class="logo"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>Stellar</div>
<div class="logo"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M3.5 18.49l6-6.01 4 4L22 6.92l-1.41-1.41-7.09 7.97-4-4L2 16.99z"/></svg>Metric</div>
<div class="logo"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>Acme Corp</div>
<div class="logo"><svg viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="10"/><path d="M8 12l3 3 5-6" stroke="#0a0a0a" stroke-width="2" fill="none"/></svg>Veritas</div>
<div class="logo"><svg viewBox="0 0 24 24" fill="currentColor"><polygon points="12,2 22,22 2,22"/></svg>Apex</div>
<div class="logo"><svg viewBox="0 0 24 24" fill="currentColor"><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M8 8h8M8 12h8M8 16h5" stroke="#0a0a0a" stroke-width="1.5" fill="none"/></svg>Docu</div>
<div class="logo"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>Globex</div>
<div class="logo"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M13 3L4 14h7l-2 7 9-11h-7l2-7z"/></svg>Voltex</div>
<div class="logo"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>Stellar</div>
<div class="logo"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M3.5 18.49l6-6.01 4 4L22 6.92l-1.41-1.41-7.09 7.97-4-4L2 16.99z"/></svg>Metric</div>
</div>
</div>Full Source
html
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; min-height: 100vh; display: flex; align-items: center; background: #0a0a0a; overflow: hidden; }
.wrap { width: 100%; max-width: 90vw; overflow: hidden; padding: 20px 0; }
.track {
display: flex;
width: max-content;
animation: marquee 30s linear infinite;
}
.track.reverse { animation-name: marquee-reverse; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes marquee-reverse { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
.track:hover { animation-play-state: running; }
.logo {
flex-shrink: 0;
height: 64px;
padding: 0 20px;
margin: 0 24px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 18px;
font-weight: 700;
font-family: 'Geist', system-ui, -apple-system, sans-serif;
color: #a1a1aa;
background: transparent;
white-space: nowrap;
opacity: 0.55;
transition: opacity 0.3s;
}
.logo:hover { opacity: 1; }
.logo svg { width: 1.2em; height: 1.2em; flex-shrink: 0; }
</style>
</head>
<body>
<div class="wrap">
<div class="track " id="track">
<div class="logo"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>Acme Corp</div>
<div class="logo"><svg viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="10"/><path d="M8 12l3 3 5-6" stroke="#0a0a0a" stroke-width="2" fill="none"/></svg>Veritas</div>
<div class="logo"><svg viewBox="0 0 24 24" fill="currentColor"><polygon points="12,2 22,22 2,22"/></svg>Apex</div>
<div class="logo"><svg viewBox="0 0 24 24" fill="currentColor"><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M8 8h8M8 12h8M8 16h5" stroke="#0a0a0a" stroke-width="1.5" fill="none"/></svg>Docu</div>
<div class="logo"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>Globex</div>
<div class="logo"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M13 3L4 14h7l-2 7 9-11h-7l2-7z"/></svg>Voltex</div>
<div class="logo"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>Stellar</div>
<div class="logo"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M3.5 18.49l6-6.01 4 4L22 6.92l-1.41-1.41-7.09 7.97-4-4L2 16.99z"/></svg>Metric</div>
<div class="logo"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>Acme Corp</div>
<div class="logo"><svg viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="10"/><path d="M8 12l3 3 5-6" stroke="#0a0a0a" stroke-width="2" fill="none"/></svg>Veritas</div>
<div class="logo"><svg viewBox="0 0 24 24" fill="currentColor"><polygon points="12,2 22,22 2,22"/></svg>Apex</div>
<div class="logo"><svg viewBox="0 0 24 24" fill="currentColor"><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M8 8h8M8 12h8M8 16h5" stroke="#0a0a0a" stroke-width="1.5" fill="none"/></svg>Docu</div>
<div class="logo"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>Globex</div>
<div class="logo"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M13 3L4 14h7l-2 7 9-11h-7l2-7z"/></svg>Voltex</div>
<div class="logo"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>Stellar</div>
<div class="logo"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M3.5 18.49l6-6.01 4 4L22 6.92l-1.41-1.41-7.09 7.97-4-4L2 16.99z"/></svg>Metric</div>
</div>
</div>
</body>
</html>