Sky Hero Headline
介绍
蓝天渐变首屏：顶部应用徽标，粗黑「复制一次。」配衬线斜体「随时再用。」双行大标题，下方说明文字、黑白两个下载按钮和三项卖点，底部铺一张草坡远山图，顶部有缓慢呼吸的高光。
拆自整页模板 随贴 Mac 剪贴板历史官网，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Sky Hero Headline 加进你的项目并换成你的配色。
适用场景
产品官网、SaaS 落地页和活动页的首屏：标题、副标题和主按钮决定第一印象的地方。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add sky-hero-headline
mcp › 使用 8pt MCP 调用 get_component("sky-hero-headline")
代码
Sky Hero Headline 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-shr"><div class="x-shr__glow" aria-hidden="true"></div><img class="x-shr__land" src="https://8pt.dev/api/media/e21eafd697bcecf7b9816709.webp" alt="" aria-hidden="true"><div class="x-shr__in"><span class="x-shr__badge"><img src="https://8pt.dev/api/media/0b8c42a8ad950197eb176023.webp" alt="" width="22" height="22">剪贴板历史</span><h1 class="x-shr__h"><span>复制一次。</span><em>随时再用。</em></h1><p class="x-shr__p">随贴把你复制过的文字、图片和截图整理成一面好看的时间线，按类型、来源应用和自定义分类自动归档，搜一下就能找回、马上贴出去。</p><div class="x-shr__btns"><a class="x-shr__btn x-shr__btn--dk" href="#pricing"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v11"/><path d="M7.5 10.5L12 15l4.5-4.5"/><path d="M5 19.5h14"/></svg>下载 Mac 版</a><a class="x-shr__btn x-shr__btn--lt" href="#more"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v11"/><path d="M7.5 10.5L12 15l4.5-4.5"/><path d="M5 19.5h14"/></svg>下载手机版</a></div><ul class="x-shr__meta"><li>一次买断</li><li>完全离线，注重隐私</li><li>适配较新的 Mac 系统</li></ul></div></div>
.x-shr{box-sizing:border-box;position:relative;width:100%;max-width:1200px;min-height:820px;margin:0 auto;padding:92px 24px 0;border-radius:28px;overflow:hidden;background:linear-gradient(180deg,#1638c9 0%,#1f6bff 28%,#4aa3ff 55%,#a9dcff 78%,#dff2ff 100%);color:#fff;text-align:center;font-family:"PingFang SC","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased}.x-shr *,.x-shr *::before,.x-shr *::after{box-sizing:border-box}.x-shr svg{width:1em;height:1em;flex:none}.x-shr__glow{position:absolute;left:0;top:-30%;width:100%;height:80%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.35),transparent);animation:x-shr-breathe 7s ease-in-out infinite;pointer-events:none}@keyframes x-shr-breathe{50%{opacity:.55;transform:scale(1.04)}}.x-shr__land{position:absolute;left:0;right:0;bottom:0;width:100%;height:46%;object-fit:cover;object-position:center 70%;-webkit-mask:linear-gradient(180deg,transparent 0,#000 38%);mask:linear-gradient(180deg,transparent 0,#000 38%);pointer-events:none}.x-shr__in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;max-width:720px;margin:0 auto}.x-shr__badge{display:inline-flex;align-items:center;gap:8px;font-size:17px;font-weight:600;letter-spacing:.02em;animation:x-shr-rise .8s cubic-bezier(.2,.8,.2,1) both}.x-shr__badge img{width:22px;height:22px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.2)}.x-shr__h{margin:22px 0 0;display:flex;flex-direction:column;align-items:center;line-height:1.08;font-weight:800}.x-shr__h span{font-size:clamp(44px,7vw,80px);letter-spacing:.02em;animation:x-shr-rise .8s .08s cubic-bezier(.2,.8,.2,1) both}.x-shr__h em{margin-top:6px;font-family:"Noto Serif SC","Noto Serif CJK SC","Songti SC","STSong",serif;font-style:italic;font-weight:600;font-size:clamp(42px,6.6vw,76px);letter-spacing:.04em;background:linear-gradient(90deg,#fff 30%,#d8ecff 50%,#fff 70%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:x-shr-rise .8s .16s cubic-bezier(.2,.8,.2,1) both,x-shr-shine 5s 1.2s ease-in-out infinite}@keyframes x-shr-shine{50%{background-position:-100% 0}}.x-shr__p{margin:24px 0 0;max-width:600px;font-size:17px;line-height:1.75;color:rgba(255,255,255,.92);animation:x-shr-rise .8s .24s cubic-bezier(.2,.8,.2,1) both}.x-shr__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:32px;animation:x-shr-rise .8s .32s cubic-bezier(.2,.8,.2,1) both}.x-shr__btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:54px;padding:0 26px;border-radius:16px;font-size:16px;font-weight:650;text-decoration:none;transition:transform .2s,box-shadow .2s}.x-shr__btn:hover{transform:translateY(-2px)}.x-shr__btn svg{font-size:18px}.x-shr__btn--dk{background:#050506;color:#fff;box-shadow:0 12px 30px -10px rgba(0,0,20,.6)}.x-shr__btn--lt{background:#fff;color:#0b0b0f;box-shadow:0 12px 30px -12px rgba(0,30,90,.4)}.x-shr__meta{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin:20px 0 0;padding:0;list-style:none;font-size:12px;color:rgba(10,30,80,.55);animation:x-shr-rise .8s .4s cubic-bezier(.2,.8,.2,1) both}@keyframes x-shr-rise{from{opacity:0;transform:translateY(16px)}}@media (max-width:640px){.x-shr{padding-top:72px}.x-shr__btns{flex-direction:column;align-self:stretch}.x-shr__btn{width:100%}.x-shr__p{font-size:15px}.x-shr__meta{color:rgba(255,255,255,.75)}}@media (prefers-reduced-motion:reduce){.x-shr__glow,.x-shr__badge,.x-shr__h span,.x-shr__h em,.x-shr__p,.x-shr__btns,.x-shr__meta{animation:none}.x-shr__btn{transition:none}}订阅 Builder 查看完整源码。查看价格