Ticker CTA Band
Overview
A capability ticker fading at both ends runs along the top, icons with short phrases moving at a steady pace and pausing on hover. Below, in a large warm gray block, three pebble characters wiggle in turn around a centered bold line and two blue and white buttons.
Taken from the page template Moge Team AI Workspace 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 Ticker CTA Band 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 ticker-cta-band
mcp › Use 8pt MCP to call get_component("ticker-cta-band")
Code
Source for Ticker CTA Band. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-tcb"><div class="mg-tick" aria-label="能力一览"><div class="mg-tick__t"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 13.5 6.5 5h11l2.5 8.5"/><path d="M4 13.5v5h16v-5h-4.5l-1.5 2.5h-4l-1.5-2.5Z"/></svg>页面、数据库和文档放在一起</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.4-4.4"/></svg>答案附带原文出处</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3.5c.6 4.2 2.3 5.9 6.5 6.5-4.2.6-5.9 2.3-6.5 6.5-.6-4.2-2.3-5.9-6.5-6.5 4.2-.6 5.9-2.3 6.5-6.5Z"/><path d="M18.5 15.5v4"/><path d="M16.5 17.5h4"/></svg>智能体全天候运行</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="3.5"/><path d="m8.5 12 2.5 2.5 4.5-5"/></svg>权限可以细到单个页面</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17"/><path d="M12 3.5c2.4 2.4 3.5 5.2 3.5 8.5s-1.1 6.1-3.5 8.5c-2.4-2.4-3.5-5.2-3.5-8.5s1.1-6.1 3.5-8.5Z"/></svg>多语言界面随时切换</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="6" width="12" height="12" rx="2.5"/><path d="m15.5 10.5 5-3v9l-5-3"/></svg>会议自动转写成纪要</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 13.5 6.5 5h11l2.5 8.5"/><path d="M4 13.5v5h16v-5h-4.5l-1.5 2.5h-4l-1.5-2.5Z"/></svg>页面、数据库和文档放在一起</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.4-4.4"/></svg>答案附带原文出处</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3.5c.6 4.2 2.3 5.9 6.5 6.5-4.2.6-5.9 2.3-6.5 6.5-.6-4.2-2.3-5.9-6.5-6.5 4.2-.6 5.9-2.3 6.5-6.5Z"/><path d="M18.5 15.5v4"/><path d="M16.5 17.5h4"/></svg>智能体全天候运行</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="3.5"/><path d="m8.5 12 2.5 2.5 4.5-5"/></svg>权限可以细到单个页面</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17"/><path d="M12 3.5c2.4 2.4 3.5 5.2 3.5 8.5s-1.1 6.1-3.5 8.5c-2.4-2.4-3.5-5.2-3.5-8.5s1.1-6.1 3.5-8.5Z"/></svg>多语言界面随时切换</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="6" width="12" height="12" rx="2.5"/><path d="m15.5 10.5 5-3v9l-5-3"/></svg>会议自动转写成纪要</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 13.5 6.5 5h11l2.5 8.5"/><path d="M4 13.5v5h16v-5h-4.5l-1.5 2.5h-4l-1.5-2.5Z"/></svg>页面、数据库和文档放在一起</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.4-4.4"/></svg>答案附带原文出处</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3.5c.6 4.2 2.3 5.9 6.5 6.5-4.2.6-5.9 2.3-6.5 6.5-.6-4.2-2.3-5.9-6.5-6.5 4.2-.6 5.9-2.3 6.5-6.5Z"/><path d="M18.5 15.5v4"/><path d="M16.5 17.5h4"/></svg>智能体全天候运行</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="3.5"/><path d="m8.5 12 2.5 2.5 4.5-5"/></svg>权限可以细到单个页面</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17"/><path d="M12 3.5c2.4 2.4 3.5 5.2 3.5 8.5s-1.1 6.1-3.5 8.5c-2.4-2.4-3.5-5.2-3.5-8.5s1.1-6.1 3.5-8.5Z"/></svg>多语言界面随时切换</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="6" width="12" height="12" rx="2.5"/><path d="m15.5 10.5 5-3v9l-5-3"/></svg>会议自动转写成纪要</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 13.5 6.5 5h11l2.5 8.5"/><path d="M4 13.5v5h16v-5h-4.5l-1.5 2.5h-4l-1.5-2.5Z"/></svg>页面、数据库和文档放在一起</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.4-4.4"/></svg>答案附带原文出处</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3.5c.6 4.2 2.3 5.9 6.5 6.5-4.2.6-5.9 2.3-6.5 6.5-.6-4.2-2.3-5.9-6.5-6.5 4.2-.6 5.9-2.3 6.5-6.5Z"/><path d="M18.5 15.5v4"/><path d="M16.5 17.5h4"/></svg>智能体全天候运行</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="3.5"/><path d="m8.5 12 2.5 2.5 4.5-5"/></svg>权限可以细到单个页面</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17"/><path d="M12 3.5c2.4 2.4 3.5 5.2 3.5 8.5s-1.1 6.1-3.5 8.5c-2.4-2.4-3.5-5.2-3.5-8.5s1.1-6.1 3.5-8.5Z"/></svg>多语言界面随时切换</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="6" width="12" height="12" rx="2.5"/><path d="m15.5 10.5 5-3v9l-5-3"/></svg>会议自动转写成纪要</span></div></div> <section class="mg-cta" id="start"><div class="mg-cta__peb"><svg class="mg-peb " viewBox="0 0 92 92" width="56" height="56" aria-hidden="true" style="transform:rotate(-6deg)"><path d="M14 54c-4-22 12-42 34-42s36 16 32 38-18 32-38 30S17 72 14 54Z" fill="#FFC94D"/><path d="M22 40c3-12 12-19 22-20" fill="none" stroke="#fff" stroke-opacity=".55" stroke-width="4" stroke-linecap="round"/><g class="mg-peb__eyes"><ellipse cx="37" cy="46" rx="3.6" ry="4.6" fill="#191918"/><ellipse cx="56" cy="46" rx="3.6" ry="4.6" fill="#191918"/></g><path d="M41 58q5 4 10 0" fill="none" stroke="#191918" stroke-width="2.6" stroke-linecap="round"/><path d="M16 62 6 70" stroke="#FFC94D" stroke-width="7" stroke-linecap="round"/><path d="M78 58l9 5" stroke="#FFC94D" stroke-width="7" stroke-linecap="round"/></svg><svg class="mg-peb " viewBox="0 0 92 92" width="56" height="56" aria-hidden="true" style="transform:rotate(0deg)"><path d="M14 54c-4-22 12-42 34-42s36 16 32 38-18 32-38 30S17 72 14 54Z" fill="#8FD3B6"/><path d="M22 40c3-12 12-19 22-20" fill="none" stroke="#fff" stroke-opacity=".55" stroke-width="4" stroke-linecap="round"/><g class="mg-peb__eyes"><ellipse cx="37" cy="46" rx="3.6" ry="4.6" fill="#191918"/><ellipse cx="56" cy="46" rx="3.6" ry="4.6" fill="#191918"/></g><circle cx="46" cy="59" r="3" fill="#191918"/><path d="M16 62 6 70" stroke="#8FD3B6" stroke-width="7" stroke-linecap="round"/><path d="M78 58l9 5" stroke="#8FD3B6" stroke-width="7" stroke-linecap="round"/></svg><svg class="mg-peb " viewBox="0 0 92 92" width="56" height="56" aria-hidden="true" style="transform:rotate(6deg)"><path d="M14 54c-4-22 12-42 34-42s36 16 32 38-18 32-38 30S17 72 14 54Z" fill="#F59AA8"/><path d="M22 40c3-12 12-19 22-20" fill="none" stroke="#fff" stroke-opacity=".55" stroke-width="4" stroke-linecap="round"/><g class="mg-peb__eyes"><ellipse cx="37" cy="46" rx="3.6" ry="4.6" fill="#191918"/><ellipse cx="56" cy="46" rx="3.6" ry="4.6" fill="#191918"/></g><path d="M40 59h12" stroke="#191918" stroke-width="2.6" stroke-linecap="round"/><path d="M16 62 6 70" stroke="#F59AA8" stroke-width="7" stroke-linecap="round"/><path d="M78 58l9 5" stroke="#F59AA8" stroke-width="7" stroke-linecap="round"/></svg></div><h2>今天就动手。</h2><div class="mg-cta__b"><a class="mg-btn mg-btn--pri" href="#top">开始使用墨格</a><a class="mg-btn mg-btn--white" href="#top">预约演示</a></div></section></div>
.x-tcb{--bg:#FFFFFF;--ink:#191918;--acc:#0075DE;--accs:#E6F3FE;--soft:#F6F5F4;--card:#F9F9F8;--line:#E6E5E3;--mut:#787774;
--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-tcb *,.x-tcb *::before,.x-tcb *::after{box-sizing:border-box;margin:0;padding:0}.x-tcb{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-tcb a{color:inherit;text-decoration:none}.x-tcb button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.x-tcb .mg-wrap{max-width:1240px;margin:0 auto;padding:0 32px}.x-tcb .mg-h2{font-size:clamp(30px,3.4vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1.15}.x-tcb .mg-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 16px;border-radius:9px;font-size:15px;font-weight:500;white-space:nowrap;transition:background .2s,transform .2s var(--ease)}.x-tcb .mg-btn:active{transform:scale(.97)}.x-tcb .mg-btn--pri{background:var(--acc);color:#fff}.x-tcb .mg-btn--pri:hover{background:#005BAB}.x-tcb .mg-btn--sec{background:var(--accs);color:#005BAB}.x-tcb .mg-btn--sec:hover{background:#D5EAFC}.x-tcb .mg-btn--white{background:#fff;color:#005BAB}.x-tcb .mg-btn--white:hover{background:#F0F7FE}.x-tcb .mg-logo{display:inline-flex;align-items:center;gap:8px;font-size:18px;font-weight:700}.x-tcb .mg-logo__m{width:28px;height:28px}.x-tcb .mg-logo--big{font-size:26px;gap:10px}.x-tcb .mg-logo--big .mg-logo__m{width:40px;height:40px}.x-tcb .mg-peb{display:block;overflow:visible}.x-tcb .mg-peb__eyes{animation:xtcbBlink 5s infinite;transform-origin:center 46px;transform-box:view-box}@keyframes xtcbBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}@media (prefers-reduced-motion:reduce){.x-tcb *,.x-tcb *::before,.x-tcb *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.x-tcb .mg-tick{contain:inline-size;overflow:hidden;border-top:1px solid var(--line);padding:16px 0;background:#fff;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}.x-tcb .mg-tick__t{display:flex;gap:44px;width:max-content;animation:xtcbTick 40s linear infinite}.x-tcb .mg-tick:hover .mg-tick__t{animation-play-state:paused}@keyframes xtcbTick{to{transform:translateX(-50%)}}.x-tcb .mg-tick span{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#5F5E5B;white-space:nowrap}.x-tcb .mg-tick svg{width:17px;height:17px;color:#A3A29E}.x-tcb .mg-cta{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:500px;padding:80px 24px;background:var(--soft);text-align:center}.x-tcb .mg-cta h2{font-size:clamp(34px,3.6vw,48px);font-weight:800;letter-spacing:-.03em}.x-tcb .mg-cta__b{display:flex;gap:10px;margin-top:18px}.x-tcb .mg-cta__peb{display:flex;gap:4px;margin-bottom:18px}.x-tcb .mg-cta__peb .mg-peb{animation:xtcbBob 4s ease-in-out infinite}.x-tcb .mg-cta__peb .mg-peb:nth-child(2){animation-delay:.5s}.x-tcb .mg-cta__peb .mg-peb:nth-child(3){animation-delay:1s}@media (max-width:860px){.x-tcb .mg-cta{min-height:380px;padding:56px 18px}}.x-tcb .mg-wrap{width:100%}.x-tcb{min-height:min(860px,96vh);display:flex;flex-direction:column;justify-content:center;background:#F6F5F4;justify-content:flex-start}.x-tcb .mg-cta{flex:1;background:#F6F5F4 radial-gradient(#DEDCD8 1.3px,transparent 1.5px) 0 0/22px 22px}.x-tcb .mg-cta h2{font-size:56px}.x-tcb .mg-cta__peb .mg-peb{width:84px;height:84px}Subscribe to Builder to see the full source.See pricing