TEXT EFFECT
打字机Typewriter
文字逐字敲出，末尾带闪烁光标。Magic UI 的 Typing Animation、Aceternity 的 Typewriter Effect 都是同族。
效果预览
Design faster
适合用在哪
AI 对话产品的「正在生成」、终端/命令行风格标题、轮播多条 slogan。
容易踩的坑
- 用 ch 单位控制宽度对中文和比例字体不准，最后一个字会被截半。
- white-space:nowrap 导致长文案在移动端溢出容器被裁掉。
- 光标闪烁频率高于每秒 3 次，存在光敏风险且令人烦躁。
设计提示词 · Prompt
打字机（Typewriter）：用一个 overflow:hidden、white-space:nowrap 的容器包裹文本，宽度用动画从 0 到文本长度（如 15ch）控制，配 steps(字符数) 让宽度按字符跳变而非平滑增长，形成逐字敲出的错觉；光标是 2px 宽、与文本等高的竖条，用 step-end 的 0.9s 无限循环切换 opacity 来做闪烁。总时长 4-4.4s，中途保持完整再回到起点循环。多行文案用 JS 轮换更佳。
Typewriter: wrap the text in a container with overflow:hidden and white-space:nowrap, animating its width from 0 to the text length (e.g. 15ch), with steps(character count) so the width jumps per character instead of growing smoothly, creating the illusion of characters being typed; the caret is a 2px-wide vertical bar as tall as the text, toggling opacity with a step-end 0.9s infinite loop to blink. Total duration 4-4.4s, holding the full text midway before looping back to the start. For multiple lines of copy, rotating with JS works better.
常见搭配
同一页面里经常和「打字机」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="tx-type">
<span class="tx-type__t" style="--n:13;--w:13ch">Design faster</span>
<i class="tx-type__c"></i>
</div>
</div>