Marquee
Overview
Two rows of tags scrolling in opposite directions with faded edges; pauses on hover. The content is duplicated for a seamless loop.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds Marquee to your project in your colors.
Where to use it
Scroll, hover and entrance motion that gives a page rhythm; animation uses only transform and opacity.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt add marquee
mcp › Use 8pt MCP to call get_component("marquee")
Code
Source for Marquee. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-mq">
<div class="x-mq__row"><div class="x-mq__track">
<span>Grid</span><span>Type</span><span>Motion</span><span>Token</span><span>Radius</span><span>Shadow</span><span>Layout</span><span>Color</span>
</div></div>
<div class="x-mq__row x-mq__row--rev"><div class="x-mq__track">
<span>Spacing</span><span>Font size</span><span>Line height</span><span>Grid</span><span>Contrast</span><span>Hierarchy</span><span>Rhythm</span><span>Whitespace</span>
</div></div>
</div>.x-mq{display:grid;gap:12px;width:100%}
.x-mq__row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%)}
.x-mq__track{display:flex;gap:10px;width:max-content;animation:x-mq 22s linear infinite}
.x-mq__row--rev .x-mq__track{animation-direction:reverse;animation-duration:26s}
.x-mq:hover .x-mq__track{animation-play-state:paused}
.x-mq span{flex:none;padding:10px 18px;border-radius:12px;border:1px solid var(--d-line,rgba(255,255,255,.1));background:var(--d-card,#101016);color:var(--d-fg,#fff);font:600 14px/1 var(--d-font,system-ui,sans-serif)}
.x-mq__row--rev span{color:var(--d-muted,#a0a0ab)}
@keyframes x-mq{to{transform:translateX(calc(-50% - 5px))}}const init = (root) => {
root.querySelectorAll('.x-mq__track').forEach(t => t.innerHTML += t.innerHTML.replace(/<span>/g, '<span aria-hidden="true">'));
};Subscribe to Builder to see the full source.See pricing