Pill Word Hero
Overview
An extra-bold two-line headline with a light blue pill inside the sentence: its dot breathes and the word in it rolls through alternatives. An original flat pebble character sways on each side, with a line of copy and blue and light blue buttons below.
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 Pill Word Hero to your project in your colors.
Where to use it
The hero of a product site, SaaS landing page or campaign page: where the headline, subhead and primary button make the first impression.
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 pill-word-hero
mcp › Use 8pt MCP to call get_component("pill-word-hero")
Code
Source for Pill Word Hero. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-pwh"><section class="mg-hero" id="hero"><div class="mg-hero__peb1"><svg class="mg-peb " viewBox="0 0 92 92" width="96" height="96" aria-hidden="true" style="transform:rotate(-8deg)"><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></div><div class="mg-hero__peb2"><svg class="mg-peb " viewBox="0 0 92 92" width="80" height="80" aria-hidden="true" style="transform:rotate(10deg)"><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></div> <h1>让人和智能体<br>在同一处 <span class="mg-pill"><i></i><span class="mg-pill__w"><span class="is-on">协作</span><span>规划</span><span>交付</span></span></span>。</h1> <p class="mg-hero__p">为团队量身打造的 AI：读懂项目上下文、给出有出处的答案，还能把重复的活儿自动做完。</p> <div class="mg-hero__cta"><a class="mg-btn mg-btn--pri" href="#start">开始使用墨格</a><a class="mg-btn mg-btn--sec" href="#start">预约演示</a></div></section></div>
.x-pwh{--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-pwh *,.x-pwh *::before,.x-pwh *::after{box-sizing:border-box;margin:0;padding:0}.x-pwh{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-pwh a{color:inherit;text-decoration:none}.x-pwh button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.x-pwh .mg-wrap{max-width:1240px;margin:0 auto;padding:0 32px}.x-pwh .mg-h2{font-size:clamp(30px,3.4vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1.15}.x-pwh .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-pwh .mg-btn:active{transform:scale(.97)}.x-pwh .mg-btn--pri{background:var(--acc);color:#fff}.x-pwh .mg-btn--pri:hover{background:#005BAB}.x-pwh .mg-btn--sec{background:var(--accs);color:#005BAB}.x-pwh .mg-btn--sec:hover{background:#D5EAFC}.x-pwh .mg-btn--white{background:#fff;color:#005BAB}.x-pwh .mg-btn--white:hover{background:#F0F7FE}.x-pwh .mg-logo{display:inline-flex;align-items:center;gap:8px;font-size:18px;font-weight:700}.x-pwh .mg-logo__m{width:28px;height:28px}.x-pwh .mg-logo--big{font-size:26px;gap:10px}.x-pwh .mg-logo--big .mg-logo__m{width:40px;height:40px}.x-pwh .mg-peb{display:block;overflow:visible}.x-pwh .mg-peb__eyes{animation:xpwhBlink 5s infinite;transform-origin:center 46px;transform-box:view-box}@keyframes xpwhBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}@media (prefers-reduced-motion:reduce){.x-pwh *,.x-pwh *::before,.x-pwh *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.x-pwh .mg-hero{position:relative;padding:56px 24px 34px;text-align:center;overflow-x:clip}.x-pwh .mg-hero h1{font-size:clamp(44px,6.4vw,92px);font-weight:900;letter-spacing:-.04em;line-height:1.06}.x-pwh .mg-pill{position:relative;display:inline-flex;align-items:center;gap:.16em;height:1.12em;padding:0 .26em 0 .2em;margin:0 .04em;border-radius:.6em;background:var(--accs);font-weight:500;vertical-align:-.08em;overflow:hidden}.x-pwh .mg-pill i{flex:none;width:.26em;height:.26em;border-radius:50%;background:var(--acc);animation:xpwhPulse 2.2s ease-in-out infinite}@keyframes xpwhPulse{50%{transform:scale(.7);opacity:.6}}.x-pwh .mg-pill__w{position:relative;display:inline-block;height:1.12em;line-height:1.12em;text-align:left}.x-pwh .mg-pill__w span{display:block;transition:transform .55s var(--ease),opacity .4s}.x-pwh .mg-pill__w span:not(.is-on){position:absolute;left:0;top:0;opacity:0;transform:translateY(80%)}.x-pwh .mg-pill__w span.is-out{opacity:0;transform:translateY(-80%)}.x-pwh .mg-hero__p{margin-top:22px;font-size:clamp(16px,1.4vw,19px);color:#37352F}.x-pwh .mg-hero__cta{display:flex;justify-content:center;gap:10px;margin-top:22px}.x-pwh .mg-hero__peb1{position:absolute;right:calc(50% - 470px);top:20px;animation:xpwhBob 4s ease-in-out infinite}.x-pwh .mg-hero__peb2{position:absolute;left:calc(50% - 520px);top:120px;animation:xpwhBob 4.6s ease-in-out .8s infinite}@keyframes xpwhBob{50%{transform:translateY(-8px) rotate(-4deg)}}@media (max-width:860px){.x-pwh .mg-hero{padding:34px 18px 26px}.x-pwh .mg-hero h1{font-size:42px}.x-pwh .mg-hero__peb1{right:8px;top:14px}.x-pwh .mg-hero__peb1 .mg-peb{width:58px;height:58px}.x-pwh .mg-hero__peb2{display:none}.x-pwh .mg-hero__cta{flex-direction:column;align-items:stretch;max-width:320px;margin-left:auto;margin-right:auto}.x-pwh .mg-hero__cta .mg-btn{height:44px}
}.x-pwh .mg-wrap{width:100%}.x-pwh{background:#FFFFFF radial-gradient(#E3E2DF 1.3px,transparent 1.5px) 0 0/22px 22px}.x-pwh .mg-hero{min-height:min(860px,96vh);display:flex;flex-direction:column;justify-content:center;}.x-pwh .mg-hero__peb1{top:120px}.x-pwh .mg-hero__peb2{top:250px}(root) => {
const el = (root.matches && root.matches('.mg-hero')) ? root : root.querySelector('.mg-hero');
if (!el) return;
const ws = [...el.querySelectorAll('.mg-pill__w span')];
let i = 0;
const iv = setInterval(() => {
const a = ws[i]; i = (i + 1) % ws.length; const b = ws[i];
a.classList.add('is-out'); a.classList.remove('is-on');
b.classList.remove('is-out'); b.classList.add('is-on');
setTimeout(() => a.classList.remove('is-out'), 600);
}, 2600);
return () => clearInterval(iv);
…Subscribe to Builder to see the full source.See pricing