Vibeset

Logo ribbon

It is movement nobody asked for and that does not stop by itself, so what matters is not that it rolls but that it can be stopped, that it does not spend effort on what nobody sees, and that the seam does not show. The loop is pure CSS: the track moves exactly the width of one copy of the list and starts again; JavaScript only measures how wide a copy is and how many fill the box. The gap between items is also added at the end of each copy, or the loop jolts. Only the first copy exists for a reader and for the tab key: the rest is aria-hidden and inert. And it stops with a button, on hover, on keyboard focus and when it leaves the screen: anything that moves by itself for more than five seconds needs a control to pause it.

And the React Bits original: Logo Loop

This piece is written from scratch in Vibeset: nothing was copied or ported from React Bits. It does something similar to their Logo Loop, and this is what we saw in theirs in case you prefer to use the original.

When to use it

For a "built with" or "used by" strip, as long as it is true. It is well cared for on accessibility.

Watch out for

It is 43 KB of source, a lot for a ribbon: if you only need a straight marquee, a twenty-line CSS version is enough. Each logo needs its own alt text.

Accessibility

Well cared for: nine aria signals, three labels, keyboard support, its own ariaLabel and reduced motion. It stops off screen.