Interaction / component

Logo Loop

An endless measured strip with a soft, responsive change of pace.

PLAYGROUND

Preparing preview…

Take it with you.

SOURCE ACCESS

Enter the shared password to copy the complete source, download every file, and install components in your app.

Access lasts 24 hours. Your preview settings stay with you.

The text field is a comma-separated convenience API. Supply logos for images, links, React nodes or custom rendering. All original item metadata is supported.
Direction and signed speed combine. The original0.25s velocity smoothing is preserved. Give vertical mode a parent with a fixed height.
Keyboard focus and reduced motion expose one stationary, scrollable sequence. Decorative clones are inert and hidden from assistive technology.
Up to 128 original items and 32 copies are rendered to bound accidental allocations.
The included Demo.tsx and styles recreate the full preview.

React 19

React Bits · MIT with Commons Clause. Used with explicit project permission; see bundled notice.

Prop	Type	Default	Description
`labels`	string	`''`	Text logos
`speed`	number	`120`	Travel speed
`direction`	left\|right\|up\|down	`left`	Direction
`logoHeight`	number	`28`	Logo size
`gap`	number	`32`	Gap
`pauseOnHover`	boolean	`undefined (defaults to hover speed0)`	Pause on hover
`fadeOut`	boolean	`false`	Fade edges
`fadeOutColor`	string	`undefined (automatic light/dark)`	Fade color
`scaleOnHover`	boolean	`false`	Scale on hover
`logos`	LogoItem[]	`undefined`	Original node/image item API; overrides labels. Includes href,title,ariaLabel or src,alt,srcSet,sizes,width,height.
`width`	number \| string	`100%`	CSS width; vertical mode can size to its content.
`hoverSpeed`	number	`undefined`	Override the hover velocity in pixels per second.
`renderItem`	(item: LogoItem, key: Key) => ReactNode	`undefined`	Custom item rendering.
`ariaLabel`	string	`Partner logos`	Accessible region name.
`className`	string	`''`	Additional outer classes.
`style`	CSSProperties	`undefined`	Additional outer styles.
`paused`	boolean	`false`	Freeze the current presentation.
`replayToken`	number	`0`	Change to replay/reset the component.