The new project of front-end guru Cheng Lou has become popular. The "text wrapping around the image" gameplay is amazing, and the new version of "Bad Apple" has gone viral.

The fan song "Bad Apple"'s black-and-white silhouette-style MV from 2009 has now exceeded 100 million views on YouTube.

But in the past two days, this MV has a new popular version:

The video is from user @Kevin on X.

This very cool-looking text wrapping and flowing effect comes from a front-end project called Pretext that has been very popular on X in the past two days.

This project was open-sourced by front-end guru Cheng Lou. It is a pure JavaScript/TypeScript text layout library that can achieve extremely fast and accurate text measurement and layout without touching the DOM at all. Its speed is about hundreds of times that of traditional solutions.

In the tweet about the open-source project, Cheng Lou said he "had gone through hellish struggles" and that this is "one of the most important infrastructures in UI engineering in the next few years." He also clearly stated that the API is designed to be "AI-friendly" so that AI programming assistants can use it directly.

Cheng Lou: A core member of the React team, participated in the early development of ReactJS; led the development of ReasonML (which later evolved into ReScript); currently works at Midjourney and participates in the development of the AI image generation platform.

Since it redefines the way text is rendered on the web, the project became an instant hit after its release. The related gameplay has spread like wildfire on Twitter, and the number of GitHub stars has exceeded 10,000.

Project link: https://github.com/chenglou/pretext

In addition to the dynamic moving animation of the Bad Apple lyrics presented at the beginning of the article, there is also a glowing little dragon playing around the text:

A physics "textbook" that can display Hooke's Law in real-time:

A small ball hitting text mini-game:

A mobile gameplay with gravity sensing:

In the related tweet, Cheng Lou also explained his core motivation for doing this project - "Text layout and measurement have always been the last and biggest bottleneck in unlocking more interesting UIs, especially in the AI era. By solving this problem, we no longer need to choose between the coolness of GL landing pages and the practicality of blog articles."

Cheng Lou also mentioned that this engine is very small (only a few KB), can understand various browser issues, and supports all languages you need, including Korean mixed with RTL Arabic and platform-specific emojis.

To complete this project, he provided the browser's standard benchmark data to the two tools, Claude Code and Codex, and let them repeatedly test and optimize against these benchmarks under various key container widths. This process took several weeks to complete.

As Simon Willison, the co-founder of the Django framework, said, the difficulty of this project lies in that it solves the problem of calculating the height of a line-wrapped text without touching the DOM. The usual approach is to render the text and then measure its size, which is very time-consuming. Pretext uses a series of clever techniques to make this process much faster, thus achieving various new text rendering effects in browser applications.

Simon Willison further explained that the key to Pretext's working principle lies in how it divides the calculation into calling the prepare() function and then calling the layout() function multiple times.

The prepare() function splits the input text into multiple segments (actually words, but can also consider soft hyphens, non-Latin character sequences, and emojis), measures these contents through the screen canvas, and then caches the results. This method is relatively expensive but only runs once. The layout() function can then simulate the word wrapping logic in the browser, calculate how many lines the text will take up when wrapped at a specified width, and measure the overall height.

However, amidst the excitement, some people questioned what use this project has besides entertainment.

Some people also said that they saw Apple do something similar on the iPad 15 years ago:

However, some people pointed out that this is not the point. The point is that Apple's Pages/Keynote are closed native applications that can only be used in the Apple ecosystem, while Pretext is an open-source, pure TypeScript, cross-browser (Chrome/Safari/Firefox) web solution. Moreover, it allows any front-end developer to easily call it through JS to achieve high-performance dynamic layouts that CSS couldn't do before. So, this is not "just another flashy demo" but an infrastructure that replaces the underlying CSS text measurement.

Cheng Lou himself hopes that people can see the value behind the project rather than blindly questioning its use. In the process of technological development and transformation, we need to accumulate domain experience, but also avoid overfitting caused by experience and maintain an open perspective to see more possibilities of technology.

This article is from the WeChat official account "MachineHeart" (ID: almosthuman2014), edited by Zhang Qian. It is published by 36Kr with authorization.