这是一块会掉字的弹珠板。页面铺满黑色圆钉，你在键盘上敲什么，什么字母就从顶部落下来，在钉子之间连续碰撞、翻滚，最后从底部掉出画面。字母不是图片也不是文本节点，而是按字形轮廓生成的真实多边形刚体——所以 A 的三角孔、O 的中空都参与碰撞，撞到钉子时会按真实受力方向翻转。每次撞钉还会响一声清脆的铃音，力度越大音色越亮。右上角三个按钮分别用来切换钉阵形态、开关声音、以及一次性倾泻几十个字母。鼠标按住任意一个字母还能把它拖出来甩着玩。

没人操作时它会自己每秒掉一个随机字母保持画面活着，你一开始打字就自动让位，停手几秒后再恢复。

这块文字弹珠板最有意思的四个机制

字形被真的“切”成了物理形状。脚本用 opentype.js 取出字符的矢量路径，把贝塞尔曲线离散成折线点，再交给 poly-decomp 做凸分解，最后送进 Matter.js 当复合刚体。字母的每个凹角都是有效碰撞边。
三种钉阵是三个公式，不是三张图。网格、人字、波形三套布局各自是一个返回坐标数组的函数，波形那套用正弦波同时调制钉距和钉子半径，所以钉阵会呈现明暗疏密的波纹感。
撞击声是现场合成的，没有音频文件。Web Audio 用三个正弦分音叠出钟形音色，音高从五声音阶里随机取，力度越大低通滤波器开得越大，声音就越亮。
有硬性的活体上限。字母数量到达上限后最旧的先被回收，掉出屏幕底部一定距离也立刻销毁，同一帧的发声次数还有冷却和上限，久开着不会越跑越卡。

把一个字母变成可碰撞刚体，中间要过几道关

其一，曲线要先变成折线。字体轮廓是由 M/L/Q/C/Z 指令描述的贝塞尔路径，物理引擎不认曲线，脚本按固定细分步数把二次和三次贝塞尔采样成点串：

const t = i / steps, mt = 1 - t;
x: mt * mt * x0 + 2 * mt * t * cmd.x1 + t * t * cmd.x

细分步数是精度与性能的直接权衡：步数太少字母边缘会显得棱角生硬，步数太多则顶点暴涨，凸分解和碰撞检测都会变慢。源码取了一个偏保守的值，在这个字号下肉眼几乎看不出折线。

其二，字形结果被缓存。同一个字符的轮廓解析、凸分解只做一次，之后按字符存进 Map 复用，只在生成时做坐标平移。连续快速打字时真正的开销只剩下建刚体，这也是它能顶住“一次掉五十个”而不卡的原因。

其三，没有地板。世界里只加了左右两堵墙，底部完全敞开，字母掉出去后由动画循环按 Y 坐标判定销毁。这个设计省掉了堆积体越来越多导致的求解压力，画面也永远保持通透——比“做一个地板然后定期清扫”更省心。

拿到源码后能调什么

几乎所有可玩参数都集中在文件开头的 CONFIG 对象里：字号、钉子半径、横纵钉距、边缘留白、闲置掉落间隔、字母上限，都是一眼能认出的字段，改完刷新即可。想让弹跳更疯狂，就调大钉子的 restitution（在建钉的那一段），想让字母下落更慢则改引擎的重力。

声音部分单独在 audio 配置里：静音开关、音量上限、触发所需的最小碰撞速度、每帧最多发声次数都在那儿。音阶和根音写成两个常量数组，换一组半音数就能从明亮的五声音阶换成别的调性。

钉阵想加第四种也不难：在布局对象里再加一个返回坐标数组的函数，切换按钮会自动把它排进循环。字体换成别的 TTF 只要替换目录里的字体文件并改一下取字体的那一行；注意选字重较粗的字体，细笔画切出来的刚体太薄容易穿透。

运行提示：脚本以 ES Module 引入，且需要从网络加载物理引擎与字体解析库，必须用本地服务器打开，双击 HTML 会直接空白。浏览器出于自动播放策略，通常要你先点一下页面才会出声。建议使用近两年版本的 Chrome、Edge、Firefox 或 Safari。详细运行方法请参见压缩包内的帮助文档。

关于这个打字掉落特效的常见问题

能不能换成中文字符？

技术上可行，但要把字体换成含中文字形的 TTF，并注意汉字笔画多、轮廓点数远超字母，凸分解后的刚体复杂度会高很多，建议同时降低细分步数和字母上限。用作装饰时更推荐保留字母或数字。

手机上能玩吗？

能。触摸拖拽字母是支持的（用的是 pointer 事件），画布也随窗口尺寸自适应并重建钉阵。只是移动端没有实体键盘，主要靠底部那个批量掉落按钮触发。

声音太吵，能只保留画面吗？

可以，把音频配置里的静音项默认设为 true 即可，界面上的静音按钮也会同步。若想彻底剔除声音代码，删掉碰撞事件里调用发声的那一段就行，不影响物理。

字母掉着掉着卡住不动了怎么办？

多半是钉距相对字号太小，字母被两颗钉子夹住。把配置里的横向钉距调大，或把字号调小，让字母宽度小于钉间空隙即可解决。

这套互动特效适合用在什么地方

它天然带有“输入被看见”的反馈感，很适合做品牌活动页的开场、输入框旁边的趣味彩蛋、404 页面，或是展会大屏上的观众互动装置。做成留言墙也很合适：把观众打的字变成掉落的实体，比滚动列表有记忆点得多。字形切割、凸分解、钉阵公式与合成音的完整实现都在源码里，均有注释，下载后可查看。