前端大神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 本人也希望大家能看到項目背后的價值，而不是一味質疑用途。因為技術發展與轉型中，既需積累領域經驗，更要避免經驗帶來的過擬合，保持開放視野，方能看到技術更多的可能性。

如果你還沒玩過這個項目，快去試試吧！