Squircle
Librairie open source de coins lissés pour le web
Squircle dessine sur le web les coins lissés de Figma et d'iOS. Née sur FōhzShop, elle tient des centaines d'éléments à l'écran sans aucun rendu React superflu et calcule chaque forme jusqu'à onze fois plus vite que la référence.
- Rôle
- Créateur
- Période
- Octobre 2026
- Technologies
- TypeScript, React, ResizeObserver, SVG, Vitest, Playwright
Le projet
Les coins arrondis du web joignent un arc de cercle à une ligne droite, avec une rupture nette de courbure. Figma, iOS et macOS lissent cette transition, c'est ce qu'on appelle un squircle. Les navigateurs ne savent pas encore le dessiner, il faut donc calculer un tracé SVG et l'appliquer en clip-path.
Le faire pour un élément est simple. Le faire pour les 700 cartes, badges et boutons d'une page produit sans dégrader la réactivité est une autre histoire. Squircle est née de ce problème sur FōhzShop, avant d'être extraite en librairie open source. C'est aussi elle qui dessine chaque coin de ce site.
- plus rapide que figma-squircle pour calculer un tracé
- ×11
- d'images affichées avec une forme en retard
- 0 %
- ResizeObserver pour toute la page
- 1
- compressé, React compris
- 3,9 Ko
Les choix d'architecture
La taille des éléments ne passe jamais par l'état React. Un seul ResizeObserver pour toute la page reçoit les dimensions, calcule le tracé et l'écrit directement dans le style de l'élément, juste avant l'affichage. Aucun composant ne se rend à nouveau, et chaque image affichée a la bonne forme.
Les tracés sont gardés dans un cache LRU partagé, si bien que trois cents cartes de même taille ne calculent qu'un seul tracé. Les bordures, même en dégradé, tiennent sur un seul élément grâce à un pseudo-élément découpé en anneau.
La même logique est disponible en composant React, en fonction JavaScript pour n'importe quel framework et en générateur de tracé pur, utilisable côté serveur. Plus de mille cas générés aléatoirement vérifient à chaque build que les tracés correspondent à 0,005 pixel près à ceux de figma-squircle, l'implémentation de référence.
Performance
Mesures sur 1 000 squircles dans Chromium, face à @squircle-js/react 1.3, la librairie la plus utilisée. Le site du projet permet de relancer ce benchmark dans son propre navigateur.
| Mesure | squircle.js | Squircle |
|---|---|---|
| JavaScript pendant un redimensionnement | 363 ms | 83 ms |
| Thread principal pendant un redimensionnement | 523 ms | 249 ms |
| Images affichées avec une forme en retard | 100 % | 0 % |
| Montage de 1 000 éléments | 26 ms | 15 ms |
| Calcul d'un tracé dans le navigateur | 4 760 ns | 760 ns |
| Calcul d'un tracé dans Node 24 | 5 500 ns | 500 ns |
Un détour par WebAssembly
Pour accélérer le calcul des tracés, j'ai d'abord écrit une version en AssemblyScript compilée en WebAssembly, onze fois plus rapide que la référence. Le profilage a montré que le gain venait surtout de l'écriture des nombres sous forme d'octets plutôt que de chaînes de caractères.
J'ai porté cette technique en JavaScript pur. La librairie atteint la même vitesse sans binaire à charger, et fonctionne de la même façon côté serveur et dans les workers.
