✨Effect Lab
Read the full guide完整技术长文 Text that moves: typing, per-character animation, and the terminal rain会动的文字:打字、逐字动画与终端数字雨
⌨️

Typewriter 打字机文字

A cursor character appended to a growing slice of the string, one character every 120ms. 一个不断变长的字符串切片,后面缀一个光标字符,每 120ms 长一个字。

DOMString slicesetTimeout
Live demo实时演示

Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。

How it works原理拆解

The whole effect is s.slice(0, i) plus a block character. It uses setTimeout rather than setInterval so that later you can vary the delay per character — punctuation can pause longer than letters, which is the difference between typing and machined output. 整个效果就是 s.slice(0, i) 加一个方块光标。用的是 setTimeout 而不是 setInterval,这样以后可以按字符调整间隔——标点停久一点,才像人在打字,而不是机器在输出。

What to change可以改的地方

  • 1Give punctuation a 3× delay for a natural typing rhythm.
  • 2Add a small chance of a backspace so it feels like a human correcting itself.
  • 1标点符号给 3 倍延迟,节奏立刻自然起来。
  • 2加一点小概率的退格,就像人打错字又改回来。

Source code源码

Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。

typewriter.html