Pill Word Hero
介绍
超粗黑体两行大标题，句中嵌一枚浅蓝胶囊，圆点呼吸、胶囊里的词上下滚动轮换；两侧各有一只原创扁平小圆石角色轻轻晃动，下方一句说明和蓝、浅蓝两枚按钮。
拆自整页模板 墨格 团队 AI 工作台官网，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Pill Word Hero 加进你的项目并换成你的配色。
适用场景
产品官网、SaaS 落地页和活动页的首屏：标题、副标题和主按钮决定第一印象的地方。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add pill-word-hero
mcp › 使用 8pt MCP 调用 get_component("pill-word-hero")
代码
Pill Word Hero 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<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);
…订阅 Builder 查看完整源码。查看价格