Serif Statement Hero
A manifesto-style hero headline in one paragraph: the opening sentence in bold sans-serif, the rest flowing on in a serif text face, each phrase fading in from blur. Large size, tight leading, made for a research lab or brand mission opener.
Taken from the page template Zhiheng AI Research Company Home. 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 Serif Statement Hero to your project in your colors.
Where to use it
Animated headlines, testimonials, emphasis copy and large-type layouts.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
Code
Source for Serif Statement Hero. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-ssh"><h1 class="x-ssh__h"><strong style="--i:0">把安全放在最前沿的 AI 研究与产品。</strong><span style="--i:1">人工智能将深刻改变这个世界。</span><span style="--i:2">知衡是一家以公共利益为宗旨的研究公司，</span><span style="--i:3">致力于让它的益处被更多人享有，</span><span style="--i:4">同时把风险降到最低。</span></h1></div>
.x-ssh{box-sizing:border-box;width:100%;padding:36px clamp(20px,5.5vw,80px) 40px;background:#faf9f5;color:#141413;-webkit-font-smoothing:antialiased}.x-ssh *{box-sizing:border-box}.x-ssh__h{max-width:1180px;margin:0;font-family:"Noto Serif SC","Noto Serif CJK SC","Songti SC","STSong",serif;font-size:clamp(28px,3.25vw,47px);font-weight:400;line-height:1.28;letter-spacing:-.005em;text-wrap:pretty}.x-ssh__h strong{font-family:"PingFang SC","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;font-weight:650;letter-spacing:-.01em}.x-ssh__h strong,.x-ssh__h span{display:inline;animation:x-ssh-in .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * .12s)}@keyframes x-ssh-in{from{opacity:0;filter:blur(6px)}}@media (max-width:600px){.x-ssh{padding:28px 20px 28px}.x-ssh__h{font-size:27px;line-height:1.32}}@media (prefers-reduced-motion:reduce){.x-ssh__h strong,.x-ssh__h span{animation:none}}