Components
Logo marquee
A sponsors strip: logos glide past, ease to a stop under the pointer, wake to full colour on hover and can be grabbed and thrown. Two rows run against each other.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { LogoMarquee } from '@vizzele/react';
<LogoMarquee
rows={2}
logos={[
{ name: 'Acme', logo: <AcmeLogo />, href: 'https://acme.com' },
{ name: 'Globex', logo: <img src="/globex.svg" alt="" /> },
// …
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
logos | { name, logo, href? }[] | — | Each logo; name is its accessible name. |
rows | 1 | 2 | 1 | Two rows run in opposite directions. |
speed | number | 40 | px per second. |
grayscale | boolean | true | Grey until hovered. |
gap | number | 56 | Space between logos (px). |
Accessibility
- Each logo is named; the copies that make the loop are hidden from screen readers and the tab order.
- It slows to a stop on hover and on keyboard focus.
- With reduced motion it becomes a row you can scroll.