DOCKBAR : le dock macOS en deux balises HTML
⏱️ Temps de lecture estimé : 3 minutes
https://dock.oooo.so/?style=macos
📌 DOCKBAR est un composant web qui reproduit le dock de macOS : une magnification au survol, des icônes qui dansent, et une API réduite à deux balises HTML. Construit avec des Web Components (en Lit), il se glisse dans n’importe quel framework, de React à Vue en passant par une page statique.
Le dock est l’une des signatures les plus copiées de macOS, et l’une des plus difficiles à bien rendre : l’effet de loupe paraît simple jusqu’au moment où l’on doit le coder. CatsJuice s’y est attelé en s’inspirant du site de Rauno Frentzen, et le résultat prend la forme d’un playground en ligne où l’on règle en direct la taille des icônes, l’espacement, l’amplitude du zoom ou la position du dock, avec trois ambiances au choix.
Côté code, l’usage tient en peu de lignes. Un dock-wrapper contient des dock-item, et chacun accepte n’importe quel contenu : une image, un bouton, un composant de votre application. Des attributs suffisent ensuite à régler le comportement : size pour la hauteur de base, maxScale pour l’amplitude du zoom, maxRange pour le rayon du survol (200 px par défaut, avec une échelle en cosinus). Un item peut même s’élargir à la demande — une barre de recherche glissée dans le dock — avec une animation dont vous pilotez la durée et l’easing.
Je trouve l’approche saine pour un composant d’interface. Dockbar manipule du DOM natif plutôt qu’une abstraction, et se contente d’émettre des événements : quand vous réorganisez le dock au glisser, il envoie on-sort avec les anciens et nouveaux index ; si l’item est lâché hors du dock, on-delete. À vous de mettre à jour l’état de l’application. Les séparateurs découpent le tout en blocs qu’on ne peut pas traverser en glissant, un détail qui sent le vrai usage.
L’add-on qui m’a fait sourire s’appelle dockbar/minimize. Il ajoute une zone où les fenêtres se replient comme sur un vrai Mac : le composant capture l’élément, l’anime avec l’effet Genie via un canvas, et un clic sur la vignette le restaure. L’API propose même un prepare() à déclencher au survol du bouton, pour que la capture ne retarde pas l’animation. L’ensemble respecte prefers-reduced-motion et fonctionne dans les quatre positions du dock.
Deux limites à connaître avant d’intégrer. Le composant ne supporte pas le rendu serveur : dans Nuxt, il faut passer par ClientOnly et un import asynchrone. Et hors bundle IIFE, le style se chargeant de façon asynchrone, un flash peut apparaître au chargement — la documentation donne le correctif CSS. Rien de bloquant, mais à prévoir. L’ensemble est sous licence MIT, distribué sur npm (npm install dockbar) ou via CDN, avec un essai possible sur Codepen.
Points clés :
- 🔍 Magnification au survol réglable : zoom x2 max, rayon de 200 px
- ↔️ Réorganisation au glisser avec événements
on-sorteton-delete - 🧞 Effet Genie pour replier les fenêtres, vignettes cliquables pour les restaurer
- 🧩 Compatible React, Vue ou page statique grâce aux Web Components
- 🎛️ Playground en ligne pour régler taille, espacement et position en direct
Sources
