Dual Row Quote Marquee
介绍
两行白色引言卡片以相反方向缓慢横向滚动，两端渐隐，悬停暂停；每张卡片有彩色头像字、一句场景描述和身份标签，适合展示用户心声或痛点。
拆自整页模板 潮引 获客智能体官网，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Dual Row Quote Marquee 加进你的项目并换成你的配色。
适用场景
滚动、悬停与入场动效，给页面增加节奏感；动效只用 transform 和 opacity。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add dual-row-quote-marquee
mcp › 使用 8pt MCP 调用 get_component("dual-row-quote-marquee")
代码
Dual Row Quote Marquee 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-dqm"><section class="cy-mq" id="voices"><div class="cy-wrap"><h2 class="cy-h2">这些获客难题，听着耳熟吗</h2><p class="cy-mq__sub">不同行业，卡住的往往是同一件事：找到对的人，并让对方愿意回复。</p></div> <div class="cy-mq__rows"><div class="cy-mq__view"><div class="cy-mq__track"><figure class="cy-q"><p>“一个人做业务，查联系人、写邮件、跟进全靠自己，根本忙不过来。”</p><figcaption class="cy-q__by"><span class="cy-q__av" style="background:#0D9467">顾</span><span><b>独立顾问</b><small>常见获客困扰</small></span></figcaption></figure><figure class="cy-q"><p>“发过群发邮件，打开的人寥寥无几，还担心主域名被拉进黑名单。”</p><figcaption class="cy-q__by"><span class="cy-q__av" style="background:#4B5BB7">软</span><span><b>软件服务</b><small>常见获客困扰</small></span></figcaption></figure><figure class="cy-q"><p>“想进入新的城市，却不知道当地该先找哪些机构的负责人。”</p><figcaption class="cy-q__by"><span class="cy-q__av" style="background:#B9741F">教</span><span><b>教育培训</b><small>常见获客困扰</small></span></figcaption></figure><figure class="cy-q"><p>“找过外包电销团队，钱花了不少，像样的会议却没约到几个。”</p><figcaption class="cy-q__by"><span class="cy-q__av" style="background:#A54A7D">企</span><span><b>企业服务</b><small>常见获客困扰</small></span></figcaption></figure><figure class="cy-q"><p>“一个人做业务，查联系人、写邮件、跟进全靠自己，根本忙不过来。”</p><figcaption class="cy-q__by"><span class="cy-q__av" style="background:#0D9467">顾</span><span><b>独立顾问</b><small>常见获客困扰</small></span></figcaption></figure><figure class="cy-q"><p>“发过群发邮件，打开的人寥寥无几，还担心主域名被拉进黑名单。”</p><figcaption class="cy-q__by"><span class="cy-q__av" style="background:#4B5BB7">软</span><span><b>软件服务</b><small>常见获客困扰</small></span></figcaption></figure><figure class="cy-q"><p>“想进入新的城市，却不知道当地该先找哪些机构的负责人。”</p><figcaption class="cy-q__by"><span class="cy-q__av" style="background:#B9741F">教</span><span><b>教育培训</b><small>常见获客困扰</small></span></figcaption></figure><figure class="cy-q"><p>“找过外包电销团队，钱花了不少，像样的会议却没约到几个。”</p><figcaption class="cy-q__by"><span class="cy-q__av" style="background:#A54A7D">企</span><span><b>企业服务</b><small>常见获客困扰</small></span></figcaption></figure><figure class="cy-q"><p>“一个人做业务，查联系人、写邮件、跟进全靠自己，根本忙不过来。”</p><figcaption class="cy-q__by"><span class="cy-q__av" style="background:#0D9467">顾</span><span><b>独立顾问</b><small>常见获客困扰</small></span></figcaption></figure><figure class="cy-q"><p>“发过群发邮件，打开的人寥寥无几，还担心主域名被拉进黑名单。”</p><figcaption class="cy-q__by"><span class="cy-q__av" style="background:#4B5BB7">软</span><span><b>软件服务</b><small>常见获客困扰</small></span></figcaption></figure><figure class="cy-q"><p>“想进入新的城市，却不知道当地该先找哪些机构的负责人。”</p><figcaption class="cy-q__by"><span class="cy-q__av" style="background:#B9741F">教</span><span><b>教育培训</b><small>常见获客困扰</small></span></figcaption></figure><figure class="cy-q"><p>“找过外包电销团队，钱花了不少，像样的会议却没约到几个。”</p><figcaption class="cy-q__by"><span class="cy-q__av" style="background:#A54A7D">企</span><span><b>企业服务</b><small>常见获客困扰</small></span></figcaption></figure><figure class="cy-q"><p>“一个人做业务，查联系人、写邮件、跟进全靠自己，根本忙不过来。”</p><figcaption class="cy-q__by"><span class="cy-q__av" style="background:#0D9467">顾</span><span><b>独立顾问</b><small>常见获客困扰</small></span></figcaption></figure><figure class="cy-q"><p>“发过群发邮件，打开的人寥寥无几，还担心主域名被拉进黑名单。”</p><figcaption class="cy-q__by"><span class="cy-q__av" style="background:#4B5BB7">软</span><span><b>软件服务</b><small>常见获客困扰</small></span></figcaption></figure><figure class="cy-q"><p>“想进入新的城市，却不知道当地该先找哪些机构的负责人。”</p><figcaption class="cy-q__by"><span class="cy-q__av" style="background:#B9741F">教</span><span><b>教育培训</b><small>常见获客困扰</small></span></figcaption></figure><figure class="cy-q"><p>“找过外包电销团队，钱花了不少，像样的会议却没约到几个。”</p><figcaption class="cy-q__by"><span class="cy-q__av" style="background:#A54A7D">企</span><span><b>企业服务</b><small>常见获客困扰</small></span></figcaption></figure></div></div><div class="cy-mq__view cy-mq__view--r"><div class="cy-mq__track"><figure class="cy-q"><p>“销售只想和有意向的人聊，不想把时间耗在筛名单上。”</p><figcaption class="cy-q__by"><span class="cy-q__av" style="background:#2F7FA8">造</span><span><b>制造业出海</b><small>常见获客困扰</small></span></figcaption></figure><figure class="cy-q"><p>“产品刚上线，需要尽快验证到底哪类客户愿意买单。”</p><figcaption class="cy-q__by"><span class="cy-q__av" style="background:#7A5BC0">创</span><span><b>初创团队</b><small>常见获客困扰</small></span></figcaption></figure><figure class="cy-q"><p>“每周都要给新渠道写开发信，写到第三封就没了灵感。”</p><figcaption class="cy-q__by"><span class="cy-q__av" style="background:#3E8E5E">贸</span><span><b>跨境贸易</b><small>常见获客困扰</small></span></figcaption></figure><figure class="cy-q"><p>“同时代理几个品牌，要分别为每个品牌找到对接的人。”</p><figcaption class="cy-q__by"><span class="cy-q__av" style="background:#C0563F">营</span><span><b>营销机构</b><small>常见获客困扰</small></span></figcaption></figure><figure class="cy-q"><p>“销售只想和有意向的人聊，不想把时间耗在筛名单上。”</p><figcaption class="cy-q__by"><span class="cy-q__av" style="background:#2F7FA8">造</span><span><b>制造业出海</b><small>常见获客困扰</small></span></figcaption></figure><figure class="cy-q"><p>“产品刚上线，需要尽快验证到底哪类客户愿意买单。”</p><figcaption class="cy-q__by"><span class="cy-q__av" style="background:#7A5BC0">创</span><span><b>初创团队</b><small>常见获客困扰</small></span></figcaption></figure><figure class="cy-q"><p>“每周都要给新渠道写开发信，写到第三封就没了灵感。”</p><figcaption class="cy-q__by"><span class="cy-q__av" style="background:#3E8E5E">贸</span><span><b>跨境贸易</b><small>常见获客困扰</small></span></figcaption></figure><figure class="cy-q"><p>“同时代理几个品牌，要分别为每个品牌找到对接的人。”</p><figcaption class="cy-q__by"><span class="cy-q__av" style="background:#C0563F">营</span><span><b>营销机构</b><small>常见获客困扰</small></span></figcaption></figure><figure class="cy-q"><p>“销售只想和有意向的人聊，不想把时间耗在筛名单上。”</p><figcaption class="cy-q__by"><span class="cy-q__av" style="background:#2F7FA8">造</span><span><b>制造业出海</b><small>常见获客困扰</small></span></figcaption></figure><figure class="cy-q"><p>“产品刚上线，需要尽快验证到底哪类客户愿意买单。”</p><figcaption class="cy-q__by"><span class="cy-q__av" style="background:#7A5BC0">创</span><span><b>初创团队</b><small>常见获客困扰</small></span></figcaption></figure><figure class="cy-q"><p>“每周都要给新渠道写开发信，写到第三封就没了灵感。”</p><figcaption class="cy-q__by"><span class="cy-q__av" style="background:#3E8E5E">贸</span><span><b>跨境贸易</b><small>常见获客困扰</small></span></figcaption></figure><figure class="cy-q"><p>“同时代理几个品牌，要分别为每个品牌找到对接的人。”</p><figcaption class="cy-q__by"><span class="cy-q__av" style="background:#C0563F">营</span><span><b>营销机构</b><small>常见获客困扰</small></span></figcaption></figure><figure class="cy-q"><p>“销售只想和有意向的人聊，不想把时间耗在筛名单上。”</p><figcaption class="cy-q__by"><span class="cy-q__av" style="background:#2F7FA8">造</span><span><b>制造业出海</b><small>常见获客困扰</small></span></figcaption></figure><figure class="cy-q"><p>“产品刚上线，需要尽快验证到底哪类客户愿意买单。”</p><figcaption class="cy-q__by"><span class="cy-q__av" style="background:#7A5BC0">创</span><span><b>初创团队</b><small>常见获客困扰</small></span></figcaption></figure><figure class="cy-q"><p>“每周都要给新渠道写开发信，写到第三封就没了灵感。”</p><figcaption class="cy-q__by"><span class="cy-q__av" style="background:#3E8E5E">贸</span><span><b>跨境贸易</b><small>常见获客困扰</small></span></figcaption></figure><figure class="cy-q"><p>“同时代理几个品牌，要分别为每个品牌找到对接的人。”</p><figcaption class="cy-q__by"><span class="cy-q__av" style="background:#C0563F">营</span><span><b>营销机构</b><small>常见获客困扰</small></span></figcaption></figure></div></div></div></section></div>
.x-dqm{--bg:#F6F5F3;--ink:#111111;--acc:#0D9467;--chip:#ECEBE9;--card:#FFFFFF;--mut:#8E8D8A;--sub:#5F5E5B;--line:#E7E5E1;--tile:#F4F4F3;
--sans:"Inter","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;--ease:cubic-bezier(.22,1,.36,1)}.x-dqm *,.x-dqm *::before,.x-dqm *::after{box-sizing:border-box;margin:0;padding:0}.x-dqm{width:100%;text-align:left;font-family:var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:clip}.x-dqm a{color:inherit;text-decoration:none}.x-dqm button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.x-dqm input{font:inherit;color:inherit}.x-dqm .cy-wrap{max-width:1080px;margin:0 auto;padding:0 24px}.x-dqm .cy-h2{font-size:clamp(28px,3vw,38px);font-weight:500;letter-spacing:-.02em;line-height:1.2;text-align:center}.x-dqm .cy-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 24px;border-radius:10px;background:#161616;color:#fff;font-size:15px;font-weight:500;transition:transform .2s var(--ease),background .2s}.x-dqm .cy-btn:hover{background:#2b2b2b}.x-dqm .cy-btn:active{transform:scale(.98)}.x-dqm .cy-btn svg{width:16px;height:16px;transition:transform .25s var(--ease)}.x-dqm .cy-btn:hover svg{transform:translateX(3px)}.x-dqm .cy-logo{display:inline-flex;align-items:center;gap:8px;font-size:20px;font-weight:600;letter-spacing:.02em}.x-dqm .cy-logo__m{width:26px;height:26px}.x-dqm .cy-tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:999px;background:var(--chip);color:var(--sub);font-size:11px;font-weight:500}@media (prefers-reduced-motion:reduce){.x-dqm *,.x-dqm *::before,.x-dqm *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.x-dqm .cy-m{display:none}}.x-dqm .cy-mq{padding:20px 0 96px}.x-dqm .cy-mq__sub{margin:12px auto 0;max-width:520px;text-align:center;color:var(--mut);font-size:15px}.x-dqm .cy-mq__rows{margin-top:40px;display:grid;gap:14px}.x-dqm .cy-mq__view{contain:inline-size;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}.x-dqm .cy-mq__track{display:flex;gap:14px;width:max-content;padding:6px 0 14px;animation:xdqmMq 70s linear infinite}.x-dqm .cy-mq__view--r .cy-mq__track{animation-direction:reverse;animation-duration:80s}.x-dqm .cy-mq__view:hover .cy-mq__track{animation-play-state:paused}@keyframes xdqmMq{to{transform:translateX(-50%)}}.x-dqm .cy-q{flex:none;display:flex;flex-direction:column;justify-content:space-between;width:312px;min-height:168px;padding:20px 20px 18px;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 22px -14px rgba(0,0,0,.14);transition:transform .3s var(--ease)}.x-dqm .cy-q:hover{transform:translateY(-3px)}.x-dqm .cy-q p{font-size:14.5px;line-height:1.65;color:#222}.x-dqm .cy-q__by{display:flex;align-items:center;gap:10px;margin-top:18px}.x-dqm .cy-q__av{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:#fff;font-size:13px;font-weight:600}.x-dqm .cy-q__by b{display:block;font-size:13.5px;font-weight:600}.x-dqm .cy-q__by small{display:block;font-size:12px;color:var(--mut)}@media (prefers-reduced-motion:reduce){.x-dqm .cy-mq__track{animation:none}}@media (max-width:760px){.x-dqm .cy-mq{padding:10px 0 64px}.x-dqm .cy-mq__rows{margin-top:28px}.x-dqm .cy-q{width:270px}}.x-dqm .cy-mq{min-height:min(860px,96vh);display:flex;flex-direction:column;justify-content:center;}订阅 Builder 查看完整源码。查看价格