Logo Cloud Marquee
Data Display
Layout
Infinite scrolling logo showcase with trust indicators.
Preview
Hover to pause animation
Trusted by industry leaders
▲Vercel
◉OpenAI
◐Stripe
◎GitHub
◈Figma
◇Linear
▣Notion
◧Slack
◬Discord
◭AWS
▲Vercel
◉OpenAI
◐Stripe
◎GitHub
◈Figma
◇Linear
▣Notion
◧Slack
◬Discord
◭AWS
Props
Component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
logos | Logo[] | Default logos | Array of logos to display |
title | string | "Trusted by industry leaders" | Header text |
duration | number | 30 | Animation duration in seconds |
pauseOnHover | boolean | true | Pause animation on hover |
className | string | — | Additional CSS classes |
Usage
Import and implementation examples
import { LogoCloudMarquee } from '@/components/marquee'
// Default logos
<LogoCloudMarquee />
// Custom logos
<LogoCloudMarquee
logos={[
{ name: 'Vercel', icon: '▲' },
{ name: 'OpenAI', icon: '◉' },
{ name: 'Stripe', icon: '◐' },
{ name: 'GitHub', icon: '◎' },
]}
title="Our Partners"
/>This block is self-contained (no UI component dependencies)
Features
Built-in functionality
- Trust indicators: Heading text for social proof
- Company logos: Icons with company names
- Gradient fade edges: Smooth edge masking
- Hover effects: Color change on logo hover
- Pause on hover: Stop animation for interaction
- Seamless loop: Infinite scrolling
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
role="list" for logo containeraria-label for company logosKeyboard Navigation
| Key | Action |
|---|---|
| Hover | Pause animation |
Notes
- Company names are visible alongside icons
- Pause on hover for interaction
- Consider static grid alternative