Serif Statement Hero
介绍
一整段宣言式首屏标题：开头一句用粗体无衬线强调，后文接衬线正文字体自然续写，句段依次由模糊渐显，大字号紧凑行距，适合研究机构或品牌使命的开场陈述。
拆自整页模板 知衡 AI 研究公司首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Serif Statement Hero 加进你的项目并换成你的配色。
适用场景
标题动效、客户证言、强调文案和大字排版。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add serif-statement-hero
mcp › 使用 8pt MCP 调用 get_component("serif-statement-hero")
代码
Serif Statement Hero 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<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}}订阅 Builder 查看完整源码。查看价格