BENCHO : 32 composants d’interface à manipuler avant de prendre le code
⏱️ Temps de lecture estimé : 3 minutes
📌 BENCHO est une bibliothèque de blocs d’interface qui vivent dans la page : vous les pressez, les glissez, les réglez en direct, puis récupérez le code. Rien ici n’est une capture d’écran.
La plupart des galeries de composants montrent des images. Une miniature soignée, un GIF qui boucle, et l’illusion s’arrête là. Au moment d’intégrer, l’effet ne réagit pas tout à fait comme annoncé. Bencho prend le problème à l’envers : chaque composant s’exécute réellement sous vos yeux, et le site assume sa promesse en une phrase — nothing here is a screenshot.
Le catalogue se parcourt par geste. Chaque bloc affiche le verbe qui le déclenche : presser, survoler, glisser, faire défiler, taper. On y croise des standards du genre traités avec soin — un « slide to confirm », un « pull to refresh », une liste à réordonner — et des pièces plus caractérisées : un toggle liquide, une barre de commande appelée au clavier, un dock grossissant sous le curseur, une carte qui s’incline quand vous la survolez.
Le vrai différenciateur s’appelle le Bench. Un canvas infini où vous déposez les blocs qui vous intéressent, les disposez comme sur un établi, les réglez sur place. La disposition vous suit d’une visite à l’autre : ce que vous avez ajouté, où vous l’avez posé, jusqu’à l’endroit où vous regardiez — tout est conservé. De quoi comparer deux variantes d’un même composant côte à côte, sans remonter la page en cherchant.
À côté, la section Finds rassemble des interactions repérées sur le web, chacune créditée de son auteur — des gestes signés David Haz ou Hakim El Hattab, jusqu’à un nuage qui se teinte, signé Apple. Moins une documentation qu’un carnet d’inspiration, précieux pour étudier ce qui fait qu’un détail d’interface paraît juste.
Je trouve l’approche particulièrement saine pour qui fabrique des interfaces : manipuler une micro-interaction dans son navigateur en dit bien plus qu’une vidéo, et pouvoir régler les paramètres avant de récupérer le code évite de partir sur une base mal calibrée. La nuance : Bencho couvre des détails d’interface, pas des mises en page complètes. C’est un recueil de gestes, pas un design system. Le catalogue promet de nouveaux blocs chaque semaine — à vérifier sur la durée.
- 🖱️ 32 composants vivants, classés par geste : presser, glisser, taper
- 🎛️ Réglage des paramètres en direct, puis code à récupérer
- 🖼️ Bench : canvas infini qui garde vos blocs, leur place et vos réglages
- 🔍 Finds : interactions du web créditées, un carnet d’inspiration à part
Si vous dessinez des interfaces, réservez dix minutes : le site se visite comme on joue.
