48K de likes, il a cracké X ce dimanche et tout le monde se demande à quoi ça peut servir.
Cheng Lou, c'est l'ingénieur derrière react-motion (21K stars), ReasonML et le front-end de Messenger chez Meta. Il est aujourd'hui chez Midjourney où il gère tout le stack UI.
Son pattern : trouver une contrainte que tout le monde accepte depuis des années, et la supprimer.
Pretext n'est pas « juste une lib de plus qui mesure du texte ». C'est le missing piece qui fait passer le texte dynamique du statut « on se démerde » à « on peut enfin faire ce qu'on veut ».
En temps normal, quand une app web veut savoir "ce paragraphe fait combien de pixels de haut ?", elle n'a pas le choix : elle doit l'injecter dans la page, puis demander au navigateur de le mesurer.
Et le navigateur, pour mesurer un seul élément, recalcule la position de tous les éléments de la page.
-> C'est le reflow.
Fais ça 500 fois en alternant lectures et écritures, t'as 500 recalculs complets.
C'est pour ça que les grosses listes de messages ou les éditeurs de texte rament.
Pretext contourne le problème en deux temps.
D'abord, une passe de préparation : la lib prend ton texte et ta police, et mesure la largeur de chaque mot directement via le moteur de fonts du navigateur (avec canvas.measureText()), sans jamais insérer quoi que ce soit dans la page.
Elle stocke toutes ces largeurs en cache. Ça prend ~18ms pour 500 blocs de texte, et c'est fait une seule fois.
Ensuite, à chaque fois que l'interface a besoin de recalculer le layout (redimensionnement de fenêtre, scroll, affichage dynamique), Pretext fait juste de l'arithmétique avec les largeurs en cache : additionner, trouver où couper les lignes, calculer les hauteurs.
Zéro appel au navigateur, zéro reflow.
C'est cette séparation qui fait tout.
Le travail coûteux (mesurer) est fait une fois.
Le travail récurrent (positionner au resize, au scroll) devient quasi gratuit -> c'est juste des additions.
Messageries et feeds : le cas qui tue.
Quand tu as une app type Slack, Discord, WhatsApp Web avec des milliers de messages, il faut virtualiser la liste (n'afficher que ce qui est visible à l'écran).
Pour virtualiser, tu dois connaître la hauteur de chaque message avant de l'afficher.
Aujourd'hui, soit tu devines (et le scroll saute), soit tu mesures via le DOM (et ça rame).
Pretext te donne la hauteur sans rien rendre. Dans une démo partagée sur le thread X : 50 000 messages, 55ms au lieu de 11 secondes.
> Éditeurs de texte : Notion, Google Docs, VS Code. Chaque frappe, chaque resize déclenche des recalculs de layout.
Avec Pretext, tu peux prédire le rendu d'un paragraphe sans toucher au DOM. Ça rend possible des éditeurs qui restent fluides même sur des documents massifs.
> Typographie avancée et design éditorial : le text wrapping autour d'objets, les layouts multi-colonnes dynamiques, le texte qui coule autour d'une forme.
CSS Shapes fait un bout du chemin mais c'est limité et statique. Pretext permet de faire ça en temps réel, animé, à 60fps. La démo du dragon qui traverse du texte et les mots se réorganisent autour en temps réel, c'est ça.
> Apps mobiles hybrides et Canvas/WebGL : pour tout ce qui rend du texte hors du DOM classique (jeux, dataviz, apps Canvas), mesurer du texte était galère. Pretext donne une API propre pour ça.
En résumé, partout où une interface affiche beaucoup de texte dynamique et doit en connaître les dimensions sans le rendre, c'est un vrai saut.
Ça ouvre aussi la porte à du responsive "intelligent" par exemple, décider à la volée si un texte tient sur une ligne ou s'il faut passer en layout multi-colonnes, sans jamais rendre un brouillon dans le DOM pour mesurer.
Ça transforme un goulot d'étranglement fondamental du web en non-problème.
open source, 15 kB, zéro dépendance.
there’s way too much fomo around AI tools and whether designers should still use figma (again).
thing is, it doesn’t matter that much. ai is just another tool. clients don’t care if you use figma or anything else, as long as the results are great.
it’s good to stay updated, learn new stuff, and improve workflows. just don’t get paralysed by the noise.
fundamentals don’t change - get clients, overdeliver, and move fast without compromising quality.
Rive's new scripting features, combined with built-in design and animation tools, make Rive an ideal engine for building games.
It isn’t an animation tool. It’s an experience engine.
.@theatre_js changed our animation workflow completely.
Designers get After Effects-like control over the website, able to control absolutely everything. No code changes for timing adjustments, animation iteration went from hours to minutes!
Avec l'IA les barrières techniques tombent ce qui va faire la diff maintenant c'est l'UX/UI et la distribution !
Clairement avant de coder quoi que ce soit réfléchissez à comment le distribuer et définissez un vrai plan ça fait toute la différence si vous voulez pas build pendant des heures pour un projet utilisé par personne
It’s time to start sharing the shaders I’ve been making for @paper!
DotOrbit is the first one
shaders demo & docs: https://t.co/W6SO4bstlq
paper: https://t.co/87EoWMXahG
If you run into a bug or have a suggestion, feel free to dm
Turn design into code with Claude Code + @figma.
Through MCP, Claude sees your mockup at the data level—component hierarchies, design tokens, auto-layout rules—and translates it into production-ready code.
Your Friday reminder that the pattern fill tool in @figma is an absolute bop. Select any source that you want to be a pattern, and it live updates, and control the pattern type, scaling, spacing, and orientation. #FigmaTip