Marquee Generator
Set the speed, spacing and direction, then copy HTML and CSS that loops without a visible jump, pauses on hover and focus, and stops entirely under reduced motion.
Preview
Hover to pause
One per line. In a real strip these would be logos or links.
Longer is slower. With more items you need more time for the same perceived speed.
Also pauses on keyboard focus, so links stay clickable.
Masks both ends so items appear and leave instead of being cut.
Output
<div class="marquee">
<div class="marquee__track">
<div class="marquee__group">
<span class="marquee__item">Vercel</span>
<span class="marquee__item">Linear</span>
<span class="marquee__item">Stripe</span>
<span class="marquee__item">Figma</span>
<span class="marquee__item">Raycast</span>
<span class="marquee__item">Supabase</span>
</div>
<!-- Hidden from assistive tech so items are not announced twice -->
<div class="marquee__group" aria-hidden="true">
<span class="marquee__item">Vercel</span>
<span class="marquee__item">Linear</span>
<span class="marquee__item">Stripe</span>
<span class="marquee__item">Figma</span>
<span class="marquee__item">Raycast</span>
<span class="marquee__item">Supabase</span>
</div>
</div>
</div>Frequently asked
Why is the content duplicated?
So the loop has something to scroll into. The track holds two identical copies and only travels -50% — at the moment the second copy sits exactly where the first started, the animation restarts and nothing appears to move. Translating -100% instead leaves a visible gap before the reset.
Why is the duplicate marked aria-hidden?
Because a screen reader would otherwise announce every item twice. The copy exists purely to make the loop seamless, so it is hidden from assistive technology while staying visible on screen.
Does pausing on hover really matter?
Yes, if the items are links or carry information. Asking someone to click a moving target is a genuine usability problem. The generated CSS pauses on focus-within too, so keyboard users get the same benefit.
How do I keep the speed consistent when I add items?
Duration is for one full loop, not per item, so adding items to a fixed duration makes everything move faster. Raise the duration roughly in proportion to the content you add.
What happens under reduced motion?
The animation stops, the duplicate copy is hidden since a static strip does not need it, and the container becomes horizontally scrollable so the content is still reachable. A marquee that simply freezes mid-scroll would cut items in half.