Infinite Tag Marquee
A seamless looping row of rounded tags that scrolls forever with faded edges and pauses when you hover over it.
Preview and code
index.html
<div class="mq"><div class="trk"><span>Analytics</span><span>Payments</span><span>Design</span><span>Source</span><span>Docs</span><span>Video</span><span>Search</span><span>Deploy</span></div></div>
styles.css
.mq{width:420px;overflow:hidden;font-family:system-ui,-apple-system,sans-serif;-webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}.trk{display:flex;gap:12px;width:max-content;animation:mq 22s linear infinite}.mq:hover .trk{animation-play-state:paused}.trk span{padding:12px 18px;border-radius:12px;border:1px solid #2a2a2a;background:#1a1a1a;color:#e5e5e5;font:600 13px/1 inherit;white-space:nowrap}@keyframes mq{to{transform:translateX(-50%)}}
script.js
(function(){var t=document.querySelector('.trk');t.innerHTML+=t.innerHTML})();