那些刷屏的文字动画背后，都是这个15KB的神库
那些在 X 上刷屏的文字动画，底层用的都是它
最近 X（推特）上经常刷到一类视频——文字像液体一样绕着图形流动、字母颗粒炸裂飞散、整段散文拼成俄罗斯方块。点进评论区，经常有人问「用什么做的」，博主往往只回一句：Pretext。
这个库最近火到 48k GitHub Stars，两千多万人围观。背后的开发者是 Cheng Lou——React 核心团队成员、ReasonML 作者、在 Midjourney 工作过的那种级别的大神。他开源 Pretext 的帖子里说：
AI 时代，文本布局和测量是解锁更有趣用户界面的最后一个、也是最大的瓶颈。
前端圈被这个问题卡了 30 年，终于被他用一种暴力美学的思路给解了。
它到底是什么
Pretext 是一个 15KB、零依赖的 TypeScript 库，专门做一件事：不靠 DOM，精确测量多行文字的布局。
原理很巧妙：通过 Canvas 调用浏览器自己的字体引擎做精确测量，完全绕过了 getBoundingClientRect 这种触发重排（reflow）的性能杀手。官方实测：比传统 DOM 测量快 500 倍，支持所有语言、emoji、CJK、阿拉伯文混排。
这听起来像底层技术，但它被做成了一个 Skill，放在 Claude 的 Hermes Agent 里，专门用来创作视觉作品——而不是写页面布局。
适合做什么
- 文字绕流：文字像液体一样绕着一个旋转的图形流动，常见于 Hero 区和动态封面
- 动力学字体：每个字有独立的物理属性——破碎、聚集、飘散，像粒子一样运动
- 文字游戏：用真实单词做俄罗斯方块、Breakout 障碍物，文本本身就是游戏几何
- ASCII 艺术视频：用散文而非等宽字符生成视觉动态效果
- 精密 shrink-wrap UI：精确知道一段文字在任意宽度下占用多高，做高性能虚拟列表
不适合做什么
静态 SVG/HTML 页面（CSS 就能解决）、通用富文本编辑器、纯 Canvas 画图没有文字角色的场景——这些有更合适的工具。
创作标准：不能出 hello world
Skill 对产出有强制要求：
- 深色背景 + 暖色核心 + 有意选择的配色方案，不是随机渐变
- 用 Proportional 字体（Inter、Helvetica Neue、Iowan Old Style），不是等宽字体
- 用真实文本（诗歌、代码、宣言），不是 Lorem ipsum
- 打开即 완성，不能有加载状态或空白帧
一句话：Pretext 返回数字，你来画。数字是起点，不是终点。
怎么用
安装只需一行：
npm install @chenglou/pretext或者直接 CDN 引入，无需构建。
完整演示和源码在这里：
https://github.com/chenglou/pretext
里面有一整套 demos，覆盖文字绕流、虚拟列表、字体粒子等场景。克隆下来跑 bun start，打开 /demos/index 就能看到所有效果。
想让 AI 帮你生成 Pretext 作品？直接说「用 pretext 做一个文字绕流动画」，配合 Claude Code 或 Cursor，效果会超出预期。
评论区
登录后可评论。