Sky Hero Headline
Overview
A blue-sky gradient hero: app badge on top, a bold Copy once. paired with a serif italic Use anytime. across two lines, then copy, black and white download buttons and three selling points, over a grassy hills image with a slowly breathing highlight at the top.
Taken from the page template Suitie Mac Clipboard History 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 Sky Hero Headline 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 sky-hero-headline
mcp › Use 8pt MCP to call get_component("sky-hero-headline")
Code
Source for Sky Hero Headline. Motion uses only transform and opacity and respects the Reduce motion setting.
<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}}Subscribe to Builder to see the full source.See pricing