Model Pill Marquee
Overview
Two rows of model pills scrolling in opposite directions, each with a color swatch and a New badge, fading at both ends. Hovering pauses the row and outlines a single pill. Good for showing supported models, partners or a tech stack.
Taken from the page template Ranzhen AI Video Studio Home. Use it on its own, or combine it with the other components from the same template to rebuild the full page.
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 Model Pill 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 model-pill-marquee
mcp › Use 8pt MCP to call get_component("model-pill-marquee")
Code
Source for Model Pill Marquee. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-rzm"><div class="x-rzm__r"><div class="x-rzm__t"><span class="x-rzm__p"><i style="--c:#FF5A1F"></i>Ranzhen 3.0<em>New</em></span><span class="x-rzm__p"><i style="--c:#5B7CFF"></i>Galaxy V2</span><span class="x-rzm__p"><i style="--c:#2FC2A4"></i>Streamline Turbo<em>New</em></span><span class="x-rzm__p"><i style="--c:#F2B33D"></i>Midnight Sun Pro</span><span class="x-rzm__p"><i style="--c:#3AB0E6"></i>Bluebird 1.5</span><span class="x-rzm__p"><i style="--c:#B66CFF"></i>Glimmer Max<em>New</em></span><span class="x-rzm__p"><i style="--c:#7AA35A"></i>Far Hills 4</span><span class="x-rzm__p"><i style="--c:#4250A8"></i>Night Flight XL</span></div><div class="x-rzm__t" aria-hidden="true"><span class="x-rzm__p"><i style="--c:#FF5A1F"></i>Ranzhen 3.0<em>New</em></span><span class="x-rzm__p"><i style="--c:#5B7CFF"></i>Galaxy V2</span><span class="x-rzm__p"><i style="--c:#2FC2A4"></i>Streamline Turbo<em>New</em></span><span class="x-rzm__p"><i style="--c:#F2B33D"></i>Midnight Sun Pro</span><span class="x-rzm__p"><i style="--c:#3AB0E6"></i>Bluebird 1.5</span><span class="x-rzm__p"><i style="--c:#B66CFF"></i>Glimmer Max<em>New</em></span><span class="x-rzm__p"><i style="--c:#7AA35A"></i>Far Hills 4</span><span class="x-rzm__p"><i style="--c:#4250A8"></i>Night Flight XL</span></div></div><div class="x-rzm__r rv"><div class="x-rzm__t"><span class="x-rzm__p"><i style="--c:#FF8A3D"></i>Dreamdraw 5<em>New</em></span><span class="x-rzm__p"><i style="--c:#4DB6AC"></i>Panorama 2.1</span><span class="x-rzm__p"><i style="--c:#F06292"></i>Afterglow Image<em>New</em></span><span class="x-rzm__p"><i style="--c:#7C4DFF"></i>Neon XL</span><span class="x-rzm__p"><i style="--c:#9E9E9E"></i>Sketcher</span><span class="x-rzm__p"><i style="--c:#FFB74D"></i>Origami 2</span><span class="x-rzm__p"><i style="--c:#4FC3F7"></i>Clear</span><span class="x-rzm__p"><i style="--c:#AED581"></i>Artisan Pro<em>New</em></span></div><div class="x-rzm__t" aria-hidden="true"><span class="x-rzm__p"><i style="--c:#FF8A3D"></i>Dreamdraw 5<em>New</em></span><span class="x-rzm__p"><i style="--c:#4DB6AC"></i>Panorama 2.1</span><span class="x-rzm__p"><i style="--c:#F06292"></i>Afterglow Image<em>New</em></span><span class="x-rzm__p"><i style="--c:#7C4DFF"></i>Neon XL</span><span class="x-rzm__p"><i style="--c:#9E9E9E"></i>Sketcher</span><span class="x-rzm__p"><i style="--c:#FFB74D"></i>Origami 2</span><span class="x-rzm__p"><i style="--c:#4FC3F7"></i>Clear</span><span class="x-rzm__p"><i style="--c:#AED581"></i>Artisan Pro<em>New</em></span></div></div></div>
.x-rzm{display:flex;flex-direction:column;gap:12px;width:100%;font-family:var(--d-font,system-ui,sans-serif);color:var(--d-fg,#fff)}
.x-rzm__r{display:flex;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.x-rzm__t{display:flex;gap:12px;flex:none;padding-right:12px;animation:x-rzm 32s linear infinite}
.x-rzm__r.rv .x-rzm__t{animation-direction:reverse;animation-duration:38s}
.x-rzm__r:hover .x-rzm__t{animation-play-state:paused}
@keyframes x-rzm{to{transform:translateX(-100%)}}
.x-rzm__p{display:inline-flex;align-items:center;gap:9px;height:50px;padding:0 18px;border-radius:14px;background:var(--d-card,#121010);box-shadow:inset 0 0 0 1px var(--d-line,rgba(255,255,255,.1));font-size:15.5px;font-weight:500;white-space:nowrap;transition:box-shadow .2s}
.x-rzm__p:hover{box-shadow:inset 0 0 0 1px rgba(255,90,31,.6)}
.x-rzm__p i{width:22px;height:22px;border-radius:7px;background:var(--c)}
.x-rzm__p em{font-style:normal;padding:1px 6px;border-radius:6px;background:#FF5A1F;color:#1b0600;font-size:10.5px;font-weight:800}
@media (prefers-reduced-motion:reduce){.x-rzm__t{animation:none}}const init = (root) => {};Subscribe to Builder to see the full source.See pricing