Typewriter Heading
介绍
标题末尾的关键词逐字打出、停顿、逐字删除，循环多个词。光标闪烁，字符用 opacity 出现，不抖动。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Typewriter Heading 加进你的项目并换成你的配色。
适用场景
标题动效、客户证言、强调文案和大字排版。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add typewriter-heading
mcp › 使用 8pt MCP 调用 get_component("typewriter-heading")
代码
Typewriter Heading 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-type"> <small>8pt 组件</small> <h3>为<span class="x-type__w" aria-live="polite"></span><span class="x-type__caret" aria-hidden="true"></span><br>而设计</h3> </div>
.x-type{display:grid;gap:10px;color:var(--d-fg,#fff);text-align:left;width:min(320px,100%)}
.x-type small{font:600 11px/1 ui-monospace,monospace;letter-spacing:.12em;color:var(--d-muted,#9b9ba8)}
.x-type h3{margin:0;font:800 clamp(30px,5vw,44px)/1.1 var(--d-font,system-ui,sans-serif);letter-spacing:-.04em}
.x-type__w{margin-left:.15em;background:linear-gradient(90deg,var(--d-accent,#4D74FF),#9ef0ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.x-type__w i{font-style:normal;animation:x-type-in .12s ease-out}
@keyframes x-type-in{from{opacity:0}}
.x-type__caret{display:inline-block;width:3px;height:.9em;margin-left:4px;vertical-align:-.08em;border-radius:2px;background:var(--d-accent,#4D74FF);animation:x-type-blink 1s steps(1) infinite}
@keyframes x-type-blink{50%{opacity:0}}const init = (root) => {
const w = root.querySelector('.x-type__w');
const words = ['设计师', 'Claude Code', '小团队', '下周上线'];
let wi = 0, ci = 0, del = false, timer;
if (matchMedia('(prefers-reduced-motion: reduce)').matches) { w.textContent = words[0]; return; }
const tick = () => {
const s = words[wi];
if (!del) { ci++; w.innerHTML = [...s.slice(0, ci)].map(c => `<i>${c === ' ' ? ' ' : c}</i>`).join(''); if (ci === s.length) { del = true; timer = setTimeout(tick, 1400); return; } timer = setTimeout(tick, 90); }
else { ci--; w.lastElementChild && w.lastElementChild.remove(); if (ci === 0) { del = false; wi = (wi + 1) % words.length; timer = setTimeout(tick, 300); return; } timer = setTimeout(tick, 45); }
};
timer = setTimeout(tick, 400);
return () => clearTimeout(timer);
…订阅 Builder 查看完整源码。查看价格