Logo Loop

Continuously looping marquee of brand or tech logos with seamless repeat and hover pause.

Default

Every prop is wired to the controls underneath. Turn on Use Custom Render to wrap each logo through the item slot.

Direction

Speed100px/s

Hover Speed0px/s

Logo Height60px

Gap60px

Fade OutScale on HoverUse Custom Render

Prop	Type	Default	Description
`logos`	`LogoItem[]`	`required`	Array of logo items to display. Each item is either a { node } (component, vnode or string) or an image { src }.
`speed`	`number`	`120`	Animation speed in pixels per second. Positive values move based on direction, negative values reverse direction.
`direction`	`'left' \| 'right' \| 'up' \| 'down'`	`'left'`	Direction of the logo animation loop. Supports horizontal (left/right) and vertical (up/down) scrolling.
`width`	`number \| string`	`'100%'`	Width of the logo loop container.
`logoHeight`	`number`	`28`	Height of the logos in pixels.
`gap`	`number`	`32`	Gap between logos in pixels.
`pauseOnHover`	`boolean`	`undefined`	Pause the loop while hovering. Ignored when hoverSpeed is set.
`hoverSpeed`	`number \| undefined`	`0`	Speed when hovering over the component. Set to 0 to pause, or a lower value for deceleration effect.
`fadeOut`	`boolean`	`false`	Whether to apply fade-out effect at the edges of the container.
`fadeOutColor`	`string`	`undefined`	Color used for the fade-out effect. Only applies when fadeOut is true.
`scaleOnHover`	`boolean`	`false`	Whether to scale logos on hover.
`ariaLabel`	`string`	`'Partner logos'`	Accessibility label for the logo loop component.

Slot	Description
`item`	Custom render for each logo item. Receives { item, index }. Allows full control over item rendering for animations, tooltips, etc.

Keyboard shortcuts and ARIA behavior.

The root is a region labelled by ariaLabel, and every repeated copy of the list is aria-hidden.
Linked logos get an aria-label from their alt text or title.
With prefers-reduced-motion the track stays still.