Anatomía

El layout es una única columna centrada dentro de una sección a viewport completo. Arriba, un recuadro cuadrado de icono contiene el icono Wrench con una animación de vibración repetida. Debajo se sitúan el título y el subtítulo. El bloque de cuenta atrás renderiza tres celdas estilo card (horas, minutos, segundos) como una fila inline-flex. Le sigue una línea de regreso estimado con el icono Clock, después una lista opcional de funcionalidades en proceso de actualización renderizadas como pill tags y, por último, un ancla mailto con el icono Mail al final.

Cómo funciona

La cuenta atrás deriva de un único estado: `remaining` (segundos totales). Un useEffect arranca un interval que lo reduce en 1 cada 1000ms y se limpia al desmontar el componente o cuando remaining llega a 0. Las horas, minutos y segundos se calculan en cada render a partir del valor remaining con división entera y módulo, luego se rellenan a dos dígitos con String.padStart. La animación de entrada usa el hook `useInView` de Framer Motion con `once: true` para que el contenido suba con fundido desde y:30 solo la primera vez que la sección entra en el viewport. Los engranajes de fondo usan `animate={{ rotate: 360 }}` con `repeat: Infinity` y `ease: "linear"` para una rotación continua y fluida a velocidades opuestas (20s / 30s).

Cómo crearlo en React

1. Configurar el estado y el interval de la cuenta atrás

   Inicializa `remaining` en useState con los segundos totales (minutos × 60). En un useEffect, arranca un setInterval que reduce el estado en 1 cada segundo. Devuelve una función de limpieza que llama a clearInterval para que el temporizador se detenga al desmontar el componente.

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

2. Formatear las unidades de tiempo

   Deriva las horas, minutos y segundos a partir del valor remaining usando división entera y módulo. Rellena cada uno a dos caracteres con padStart para que el ancho de la pantalla se mantenga estable cuando cambian los dígitos.

   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. Animar la entrada con useInView

   Adjunta una ref al contenedor exterior y pásala a useInView de Framer Motion con `once: true`. Controla `animate` en el wrapper de contenido: cuando inView, pasa de opacity 0 e y 30 al estado final. El bloque de cuenta atrás recibe un ligero scale-up con un retraso de 0.2s para un efecto en cascada.

   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. Añadir los engranajes de fondo giratorios

   Coloca dos divs en posición absolute con aria-hidden y pointer-events:none dentro de la sección. Envuelve cada icono Settings en una motion.div con `animate={{ rotate: 360 }}` (uno en sentido contrario con -360). Usa duraciones diferentes y una opacidad global de 0.03 para que se lean como textura sin competir con el contenido.

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

Cuándo usarlo

Usa este componente cuando necesites desactivar toda tu aplicación por mantenimiento programado y quieras que los usuarios sepan cuándo volverá. Encaja con productos SaaS, herramientas internas y sitios de e-commerce durante despliegues o migraciones de base de datos. Evítalo para caídas parciales o feature flags: un toast o una banner superior resulta menos intrusivo en esos casos. Evita también la cuenta atrás si realmente no puedes predecir cuándo terminarán los trabajos: mostrar un temporizador que pasa de cero erosiona la confianza más rápido que no poner ninguno.

Usado por

• GitHub, Muestra una página de estado dedicada con horas de resolución estimadas durante incidentes y mantenimientos programados.
• Shopify, Usa pantallas de mantenimiento a página completa con temporizadores de cuenta atrás durante las actualizaciones mayores de la plataforma.
• Notion, Reemplaza la app por una página de mantenimiento y publica horas de regreso estimadas durante las interrupciones programadas.

FAQ