前端大神Cheng Lou新项目火了!文字绕图玩法,Bad Apple新版火出圈

编辑｜张倩

同人歌曲「Bad Apple」2009 年那个黑白色剪影风格的 MV，如今在 Youtube 上播放量已经过亿。

但最近两天，这个 MV 又有了个受欢迎的新版本：

视频链接：https://mp.weixin.qq.com/s/tjzWyvA8Am1PbS0dEd7xpw

视频来自x用户@Kevin

这种看上去非常炫酷的文字环绕、流动效果，源自最近两天在 X 上非常火的一个前端项目 ——Pretext。

这个项目由前端大神 Cheng Lou 开源，是一个纯 JavaScript/TypeScript 的文本排版库，能在完全不触碰 DOM 的情况下实现极速、精确的文本测量与布局，速度大约是传统方案的数百倍。

在开源项目的推文中，Cheng Lou 自称「曾经历了地狱般的挣扎」，带来的是「未来几年内 UI 工程中最重要的基础设施之一」，而且明确说 API 设计得「AI-friendly」，让 AI 编程助手能直接用。

Cheng Lou：React 核心团队成员，参与 ReactJS 的早期开发；主导了 ReasonML（后来演变为 ReScript）的开发；目前在 Midjourney 工作，参与 AI 图像生成平台的开发。

由于重新定义了网页上的文字渲染方式，项目发布即爆火，相关玩法已经在推特上疯传，GitHub star 量已经超过一万。

项目链接：https://github.com/chenglou/pretext

除了文章开头呈现的 Bad Apple 歌词动态位移动画，还有发光小龙绕文字玩耍：

能实时展示胡克定律的物理「课本」：

小球打文字小游戏：

加入重力感应的手机玩法：

在相关推文中，Cheng Lou 也解释了他做这个项目的核心动机 ——「文本布局与测量一直是解锁更有趣 UI 的最后一个、也是最大的瓶颈，尤其是在 AI 时代。解决了这个问题，我们就不再需要在 GL 落地页的炫酷和博客文章的实用性之间二选一了。」

Cheng Lou 还提到，这个引擎体积很小（只有几 KB），能理解浏览器的各种问题，支持你需要的所有语言，包括韩文混 RTL 阿拉伯文以及平台特定的 emoji。

为了完成这个项目，他把浏览器的标准基准数据给到 Claude Code 和 Codex 这两个工具，让它们在各类关键的容器宽度下，对照这些基准反复检测、优化调整，这套流程整整跑了好几周才完成。

就像 Django 框架联合创始人 Simon Willison 所说，这个项目的难得之处在于，它解决了在不触碰 DOM 的情况下计算一段自动换行文本高度的问题。通常的做法是把文本渲染出来再测量尺寸，但这非常耗时。Pretext 用了一系列巧妙的技巧让这个过程快得多，从而在浏览器应用中实现了各种全新的文本渲染效果。

Simon Willison 进一步解释说，Pretext 工作原理的关键在于它如何将计算分成调用 prepare（） 函数，再调用多次 layout（） 函数。

prepare（） 函数将输入文本拆分为多个段（实际上是单词，但也可以考虑软连字符、非拉丁字符序列和表情符号），并通过屏幕画布测量这些内容，然后缓存结果。这方法相对昂贵，但只运行一次。layout（） 函数随后可以在浏览器中模拟单词换行逻辑，计算文本在指定宽度下会占用多少行的换行，并测量整体高度。

不过，在狂欢之余，有人发出质疑，说看不出来除了娱乐，这个项目还有什么用。

还有人说自己 15 年前就看到苹果在 iPad 上做过类似的事：

不过也有人指出，这不是重点，重点是：苹果的 Pages / Keynote 是封闭的原生应用，只能在 Apple 生态里用，而 Pretext 是开源、纯 TypeScript、跨浏览器（Chrome/Safari/Firefox） 的 web 解决方案。而且，它让任何前端开发者都能通过 JS 轻松调用，实现以前 CSS 做不到的高性能动态布局。所以，这不是「又一个炫技 demo」，而是替换 CSS 文本测量底层的基础设施。

Cheng Lou 本人也希望大家能看到项目背后的价值，而不是一味质疑用途。因为技术发展与转型中，既需积累领域经验，更要避免经验带来的过拟合，保持开放视野，方能看到技术更多的可能性。

如果你还没玩过这个项目，快去试试吧！