Anatomie

Le layout est une colonne centrée dans une section plein viewport. En haut, un carré d'icône contient la Wrench avec une animation de tremblement répétée. En dessous, titre et sous-titre. Le bloc countdown affiche trois cellules style card (heures, minutes, secondes) en ligne inline-flex. Une ligne de retour estimé avec l'icône Clock suit, puis une liste optionnelle de fonctionnalités en cours de mise à jour sous forme de pill tags, et enfin un ancre mailto avec l'icône Mail.

Comment ça marche

Le compte à rebours dérive d'un seul état : `remaining` (secondes totales). Un useEffect démarre un interval qui le décrémente de 1 toutes les 1000ms et se nettoie au démontage ou quand remaining atteint 0. Les heures, minutes et secondes sont calculées à chaque rendu par division entière et modulo, puis paddées à deux chiffres avec String.padStart. L'animation d'entrée utilise le hook `useInView` de Framer Motion avec `once: true` pour que le contenu monte depuis y:30 seulement lors du premier passage dans le viewport. Les engrenages de fond utilisent `animate={{ rotate: 360 }}` avec `repeat: Infinity` et `ease: "linear"` pour une rotation continue et fluide à des vitesses opposées (20s / 30s).

Comment le coder en React

1. Mettre en place l'état et l'interval du compte à rebours

   Initialise `remaining` dans useState avec les secondes totales (minutes × 60). Dans un useEffect, démarre un setInterval qui décrémente l'état de 1 chaque seconde. Retourne une fonction de nettoyage qui appelle clearInterval pour stopper le timer au démontage.

   const [remaining, setRemaining] = useState(countdownMinutes * 60);
   
   useEffect(() => {
     const interval = setInterval(() => {
       setRemaining((prev) => (prev > 0 ? prev - 1 : 0));
     }, 1000);
     return () => clearInterval(interval);
   }, []);

2. Formater les unités de temps

   Dérive les heures, minutes et secondes de `remaining` par division entière et modulo. Padde chaque valeur à deux caractères avec padStart pour que la largeur d'affichage reste stable quand les chiffres changent.

   const hours = Math.floor(remaining / 3600);
   const minutes = Math.floor((remaining % 3600) / 60);
   const seconds = remaining % 60;
   const pad = (n: number) => String(n).padStart(2, "0");

3. Animer l'entrée avec useInView

   Attache une ref au conteneur extérieur et passe-la à useInView de Framer Motion avec `once: true`. Pilote `animate` sur le wrapper de contenu : quand inView, passe de opacity 0 et y 30 à l'état final. Le bloc countdown reçoit un léger scale-up avec un délai de 0.2s pour un effet de cascade.

   const ref = useRef<HTMLDivElement>(null);
   const inView = useInView(ref, { once: true, margin: "-40px" });
   
   <motion.div
     initial={{ opacity: 0, y: 30 }}
     animate={inView ? { opacity: 1, y: 0 } : {}}
     transition={{ duration: 0.7, ease: [0.16, 1, 0.3, 1] }}
   >

4. Ajouter les engrenages de fond tournants

   Place deux divs en position absolute avec aria-hidden et pointer-events:none dans la section. Entoure chaque icône Settings d'une motion.div avec `animate={{ rotate: 360 }}` (une en sens inverse avec -360). Utilise des durées différentes et une opacité globale de 0.03 pour qu'elles lisent comme une texture sans concurrencer le contenu.

   <motion.div
     animate={{ rotate: 360 }}
     transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
     aria-hidden
   >
     <Settings style={{ opacity: 0.03 }} />
   </motion.div>

Quand l'utiliser

Utilise ce composant quand tu dois couper toute l'application pour une maintenance planifiée et que tu veux informer les utilisateurs du retour prévu. Il convient aux produits SaaS, outils internes et sites e-commerce pendant les déploiements ou migrations de base de données. Évite-le pour des pannes partielles ou des feature flags, un toast ou une bannière haute est moins intrusif dans ces cas. Évite aussi le compte à rebours si tu ne peux pas prédire la durée des travaux : un timer qui dépasse zéro érode la confiance plus vite qu'une absence de timer.

Utilisé par

• GitHub, Affiche une page de statut dédiée avec des heures de résolution estimées lors des incidents et maintenances planifiées.
• Shopify, Utilise des écrans de maintenance pleine page avec compteurs lors des mises à niveau majeures de la plateforme.
• Notion, Remplace l'app par une page de maintenance avec heure de retour estimée lors des interruptions planifiées.

FAQ