Pretext : la librairie de 15KB qui casse internet et réinvente le texte sur le web
Un tweet. 20 millions de vues. 18 000 stars GitHub en 3 jours.
Cheng Lou, ingénieur chez Midjourney et créateur de React Motion, vient de publier une librairie qui pourrait changer la façon dont on affiche du texte sur le web.
Le tweet qui a tout déclenché
Le 28 mars 2026, Cheng Lou poste un message sur X qui va devenir l'un des tweets tech les plus viraux de l'année :
My dear front-end developers: I have crawled through depths of hell to bring you one of the more important foundational pieces of UI engineering.
En accompagnement : une vidéo de démo. Du texte qui se réorganise en temps réel autour d'obstacles en mouvement. Des logos, des orbes flottantes. Le tout à 60 images par seconde, sans un seul lag.
Le tweet explose :
- 21,7 millions de vues
- 62 000 likes
- 10 000 reposts
- 18 000+ stars GitHub en 3 jours
La communauté développeur mondiale s'enflamme. En quelques heures, des dizaines de développeurs produisent leurs propres démos — chacune plus spectaculaire que la précédente :
Pretext — qu'est-ce que c'est, concrètement ?
Pretext est une librairie TypeScript de 15KB, zéro dépendance, qui mesure et positionne du texte multilingue sans jamais toucher au DOM du navigateur.
Pretext contourne le problème : il utilise le Canvas API pour mesurer le texte une seule fois, puis fait tout le reste en arithmétique pure.
Résultat :
300 à 600 fois plus rapide que la méthode classique.
Comment ça marche
Pretext fonctionne en deux phases :
- prepare() — Analyse le texte une fois. Segmentation, mesure de chaque mot via Canvas, mise en cache. Coût : ~19ms pour 500 blocs de texte.
- layout() — Calcule la position de chaque ligne par simple arithmétique. Coût : ~0.09ms. On peut appeler cette fonction à chaque frame d'animation sans aucun impact sur les performances.
Construit avec l'IA
Fait notable — et c'est ce qui nous intéresse particulièrement chez MrAutomate — Pretext a été développé en grande partie avec Claude et Codex.
Cheng Lou n'a pas simplement “demandé à l'IA d'écrire du code”. Il a construit une boucle de vérification : l'IA génère, puis les résultats sont comparés au rendu réel des navigateurs sur des milliers de cas.
- Des milliers de largeurs de conteneur testées
- Des textes en thaï, chinois, coréen, japonais, arabe
- Des emojis et du texte bidirectionnel
- Le texte intégral de The Great Gatsby comme corpus de test
L'IA n'est pas l'auteur. C'est le crash-test.
Cette méthodologie — génération + vérification automatisée — est exactement ce qu'on recommande chez MrAutomate pour intégrer l'IA dans des processus métier. Le résultat parle de lui-même : une librairie qui fait mieux que 30 ans de développement navigateur sur un problème spécifique. Développée en un mois, par une seule personne.
Les démos qui ont rendu tout le monde fou
Ce qui a vraiment fait exploser Pretext, ce ne sont pas les specs techniques. Ce sont les démos visuelles.
The Editorial Engine
Des orbes lumineuses se déplacent dans un layout multi-colonnes style magazine. Le texte se réorganise en continu autour des obstacles — pull quotes, images, formes libres.Zéro mesure DOM. Le genre de mise en page qui prenait des centaines de millisecondes, ici à 60fps.
Dynamic Layout
Un layout éditorial complet — le texte se réorganise autour de logos (OpenAI, Claude) comme dans un magazine de luxe. Chaque caractère repositionné frame par frame.
Au-delà du spectacle — les vrais cas d'usage
Comme le souligne Den Odell , les démos flashy ne sont pas le vrai sujet. Les cas d'usage concrets sont encore plus impactants :
- Scroll virtuel — 500 messages de chat ? Pretext calcule la hauteur de chacun sans les rendre. Scroll fluide, uniquement les messages visibles.
- Bulles de chat — Calculer la largeur optimale d'une bulle multilingue sans gaspillage d'espace.
- Masonry layouts — Prédire la hauteur de centaines de cartes sans les insérer dans le DOM.
- Accordéons — Animer l'ouverture/fermeture sans le “saut” classique dû au calcul de hauteur.
Et nous, on l'utilise
Chez MrAutomate, on ne se contente pas de parler de Pretext — on l'utilise.
Le hero de ce site est construit avec Pretext : le texte se réorganise en temps réel autour de badges flottants, avec un layout calculé frame par frame. Zéro reflow DOM.
C'est exactement ce qu'on fait pour nos clients : identifier les technologies de pointe qui ont un impact réel, et les intégrer là où elles créent de la valeur.