Dual Row Quote Marquee
Overview
Two rows of white quote cards scroll slowly in opposite directions, fading at both ends and pausing on hover. Each card has a colorful initial avatar, a one-line scenario and a role tag. Good for user voices or pain points.
Taken from the page template Chaoyin Lead-Gen Agent Website. 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 Dual Row Quote 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 dual-row-quote-marquee
mcp › Use 8pt MCP to call get_component("dual-row-quote-marquee")
Code
Source for Dual Row Quote Marquee. Motion uses only transform and opacity and respects the Reduce motion setting.
<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;}Subscribe to Builder to see the full source.See pricing