Model Pill Marquee
介绍
两排反向滚动的模型胶囊，每颗带色块标识和「新」角标，两端渐隐；悬停整排暂停、单颗高亮描边。适合展示接入的模型、合作方或技术栈。
拆自整页模板 燃帧 AI 视频创作首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Model Pill Marquee 加进你的项目并换成你的配色。
适用场景
滚动、悬停与入场动效，给页面增加节奏感；动效只用 transform 和 opacity。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add model-pill-marquee
mcp › 使用 8pt MCP 调用 get_component("model-pill-marquee")
代码
Model Pill Marquee 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-rzm"><div class="x-rzm__r"><div class="x-rzm__t"><span class="x-rzm__p"><i style="--c:#FF5A1F"></i>燃帧 3.0<em>新</em></span><span class="x-rzm__p"><i style="--c:#5B7CFF"></i>星河 V2</span><span class="x-rzm__p"><i style="--c:#2FC2A4"></i>流光 Turbo<em>新</em></span><span class="x-rzm__p"><i style="--c:#F2B33D"></i>极昼 Pro</span><span class="x-rzm__p"><i style="--c:#3AB0E6"></i>青鸾 1.5</span><span class="x-rzm__p"><i style="--c:#B66CFF"></i>浮光 Max<em>新</em></span><span class="x-rzm__p"><i style="--c:#7AA35A"></i>远山 4</span><span class="x-rzm__p"><i style="--c:#4250A8"></i>夜航 XL</span></div><div class="x-rzm__t" aria-hidden="true"><span class="x-rzm__p"><i style="--c:#FF5A1F"></i>燃帧 3.0<em>新</em></span><span class="x-rzm__p"><i style="--c:#5B7CFF"></i>星河 V2</span><span class="x-rzm__p"><i style="--c:#2FC2A4"></i>流光 Turbo<em>新</em></span><span class="x-rzm__p"><i style="--c:#F2B33D"></i>极昼 Pro</span><span class="x-rzm__p"><i style="--c:#3AB0E6"></i>青鸾 1.5</span><span class="x-rzm__p"><i style="--c:#B66CFF"></i>浮光 Max<em>新</em></span><span class="x-rzm__p"><i style="--c:#7AA35A"></i>远山 4</span><span class="x-rzm__p"><i style="--c:#4250A8"></i>夜航 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>绘梦 5<em>新</em></span><span class="x-rzm__p"><i style="--c:#4DB6AC"></i>万象 2.1</span><span class="x-rzm__p"><i style="--c:#F06292"></i>拾光 Image<em>新</em></span><span class="x-rzm__p"><i style="--c:#7C4DFF"></i>霓虹 XL</span><span class="x-rzm__p"><i style="--c:#9E9E9E"></i>素描家</span><span class="x-rzm__p"><i style="--c:#FFB74D"></i>折纸 2</span><span class="x-rzm__p"><i style="--c:#4FC3F7"></i>澄澈</span><span class="x-rzm__p"><i style="--c:#AED581"></i>画匠 Pro<em>新</em></span></div><div class="x-rzm__t" aria-hidden="true"><span class="x-rzm__p"><i style="--c:#FF8A3D"></i>绘梦 5<em>新</em></span><span class="x-rzm__p"><i style="--c:#4DB6AC"></i>万象 2.1</span><span class="x-rzm__p"><i style="--c:#F06292"></i>拾光 Image<em>新</em></span><span class="x-rzm__p"><i style="--c:#7C4DFF"></i>霓虹 XL</span><span class="x-rzm__p"><i style="--c:#9E9E9E"></i>素描家</span><span class="x-rzm__p"><i style="--c:#FFB74D"></i>折纸 2</span><span class="x-rzm__p"><i style="--c:#4FC3F7"></i>澄澈</span><span class="x-rzm__p"><i style="--c:#AED581"></i>画匠 Pro<em>新</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) => {};订阅 Builder 查看完整源码。查看价格