How Cheng Lou’s Pretext Library Powers the Viral Bad Apple Text‑Wrap Effect

The classic 2009 black‑and‑white silhouette MV of the fan‑made song “Bad Apple” has amassed over a hundred million views on YouTube, and a new version of the animation has recently gone viral.

That new version is built with Pretext, an open‑source library created by front‑end veteran Cheng Lou. Pretext is written in pure JavaScript/TypeScript and can perform ultra‑fast, precise text measurement and layout without ever touching the DOM, delivering speeds that are said to be hundreds of times faster than conventional approaches.

In the project's announcement, Cheng Lou describes Pretext as “one of the most important pieces of UI infrastructure for the coming years” and emphasizes that its API is deliberately designed to be “AI‑friendly,” allowing AI coding assistants to call it directly.

The repository (https://github.com/chenglou/pretext) has quickly attracted attention, surpassing ten thousand stars on GitHub, and the library has already been used to create a variety of eye‑catching effects.

Beyond the Bad Apple lyric animation, the demos include a glowing dragon that circles text, a physics‑textbook illustration of Hooke’s law, a small‑ball‑versus‑text game, and a gravity‑sensing mobile interaction.

Cheng Lou explains that the core motivation was the long‑standing bottleneck of text layout and measurement, which limits the creation of more engaging UI, especially in the AI era. Solving this problem removes the need to choose between flashy GL landing pages and practical blog layouts.

Technically, Pretext’s engine is only a few kilobytes in size yet understands the quirks of browsers and supports all languages, including Korean, RTL Arabic, and platform‑specific emoji. The workflow splits the computation into two stages: prepare() breaks the input into segments (words, soft hyphens, non‑Latin sequences, emojis), measures them on a canvas, and caches the results—a relatively expensive step that runs once; layout() then simulates word‑wrap logic for a given width, calculating line breaks and total height efficiently.

To ensure correctness, Cheng fed standard browser benchmark data into Claude Code and Codex, running repeated checks and optimizations across key container widths for several weeks.

Simon Willison, co‑founder of Django, praised Pretext for solving the problem of computing the height of automatically wrapped text without rendering it, a task that traditionally requires costly DOM measurement. He highlighted the importance of the prepare() / layout() separation.

Some critics questioned the utility beyond entertainment, noting that Apple’s Pages/Keynote offered similar closed‑source capabilities on iPad. The article counters that Pretext is open‑source, cross‑browser (Chrome, Safari, Firefox), and enables any front‑end developer to invoke high‑performance dynamic layout via JavaScript—effectively replacing the CSS text‑measurement layer.

Cheng Lou encourages readers to try the project themselves, emphasizing that embracing open, adaptable tools is essential for future UI innovation.