Anatomie

Le wrapper racine capture onMouseMove et écrit clientX/clientY dans deux motion values de niveau supérieur. Le conteneur du dock est un flex en ligne (ou colonne) en pilule arrondie avec un fond glass-morphism. Chaque slot d'icône est un composant DockIcon qui contient un bouton, un badge de notification, un point actif et un tooltip. Un séparateur visuel et un bouton Plus fixe terminent la liste, séparés des items dynamiques par une règle de 1px.

Comment ça marche

À l'intérieur de chaque DockIcon, useTransform lit la motion value mouseX partagée (ou mouseY en vertical) et calcule la distance depuis le centre de l'icône via getBoundingClientRect. Cette distance brute alimente un useTransform qui mappe distance vers taille ([0, 100, 200] → [56, 48, 44]px). Un useSpring enveloppe la sortie avec mass 0.1, stiffness 200 et damping 15, donnant au grossissement un ressenti vif sans être brusque. Le résultat s'applique à la largeur et la hauteur de la motion.button, pour que l'icône grandisse depuis son centre sans décaler le layout.

Comment le coder en React

1. Crée les motion values de la souris au niveau du dock

   En tête du composant dock, appelle useMotionValue(0) pour X et Y. Attache un handler onMouseMove au div racine qui appelle mouseX.set(e.clientX) et mouseY.set(e.clientY). Passe les deux valeurs à chaque icône via des props.

   const mouseX = useMotionValue(0);
   const mouseY = useMotionValue(0);
   
   <div onMouseMove={(e) => { mouseX.set(e.clientX); mouseY.set(e.clientY); }}>

2. Calcule la distance pointeur-icône pour chaque item

   Dans DockIcon, attache un ref au bouton. Utilise useTransform sur mouseX (ou mouseY) avec un callback qui lit getBoundingClientRect() pour obtenir le centre de l'icône, puis retourne Math.abs(positionPointeur - centre). Cela produit une valeur de distance en direct qui se met à jour à chaque frame.

   const distance = useTransform(mouseX, (val) => {
     const bounds = ref.current?.getBoundingClientRect();
     if (!bounds) return 200;
     return Math.abs(val - (bounds.x + bounds.width / 2));
   });

3. Convertis la distance en taille avec un spring

   Utilise useTransform sur distance avec une plage d'entrée [0, 100, 200] et une plage de sortie [56, 48, 44]. Enveloppe ça dans useSpring avec une faible mass et une stiffness modérée pour que l'icône se stabilise rapidement sans rebond. Applique la motion value résultante à width et height de ta motion.button.

   const size = useSpring(
     useTransform(distance, [0, 100, 200], [56, 48, 44]),
     { mass: 0.1, stiffness: 200, damping: 15 }
   );
   
   <motion.button style={{ width: size, height: size }} />

4. Ajoute le tooltip et l'indicateur actif

   Enveloppe le tooltip dans AnimatePresence et rends-le uniquement quand isHovered est true. Utilise initial/animate/exit sur une motion.div pour un fade-scale rapide. Pour l'indicateur actif, donne à toutes les instances le même layoutId ('dock-active') afin que Framer Motion anime automatiquement le glissement du point d'un item à l'autre.

   <AnimatePresence>
     {isHovered && (
       <motion.div
         initial={{ opacity: 0, y: 4, scale: 0.9 }}
         animate={{ opacity: 1, y: 0, scale: 1 }}
         exit={{ opacity: 0, y: 4, scale: 0.9 }}
       >
         {item.label}
       </motion.div>
     )}
   </AnimatePresence>
   
   {item.active && (
     <motion.div layoutId="dock-active" className="w-1 h-1 rounded-full" />
   )}

Quand l'utiliser

Utilise ce dock dans des shells d'application où tu veux une navigation compacte et toujours visible qui ne mobilise pas une colonne de sidebar entière. Il convient aux tableaux de bord SaaS, outils créatifs, sites portfolio et tout contexte avec six à dix destinations principales à atteindre rapidement. À éviter sur les pages chargées en contenu où une sidebar persistante avec labels améliore la lisibilité, et désactive l'effet de grossissement sur mobile car la détection de proximité nécessite un vrai pointeur.

Utilisé par

• Apple macOS, Le dock grossissant originel qui a inspiré ce pattern, utilisé comme lanceur d'applications principal sur chaque Mac.
• Notion, Utilise une barre d'actions flottante compacte dans ses vues canvas qui reprend la métaphore du dock.
• Framer, L'éditeur canvas de Framer expose une barre d'outils flottante avec des icônes qui grossissent et se mettent en valeur au survol.
• Linear, La barre de commandes et la palette d'actions rapides utilisent une navigation compacte orientée icônes avec des indicateurs de sélection animés.

FAQ