Anatomía

La sección se compone de dos partes. Arriba, un bloque de cabecera centrado contiene un badge pill con un punto verde pulsante etiquetado 'Live', un titular grande y un párrafo de subtítulo. Debajo, una columna flex de 480 px de ancho renderiza cada notificación como una card: un círculo avatar de color de 36 px a la izquierda, una columna derecha con el nombre del remitente, un timestamp relativo alineado a la derecha, y el texto del mensaje truncado a una sola línea mediante text-overflow:ellipsis.

Cómo funciona

Dos hooks `useEffect` gestionan el ciclo de vida. El primero se ejecuta al montar para rellenar el array visible con las dos primeras notificaciones, dando de inmediato la apariencia de una stack poblada. El segundo establece un intervalo recurrente a `intervalMs` (2 000 ms por defecto) que llama a `addNotif`, la cual añade la siguiente notificación al principio de la lista y la trunca a `maxVisible`. Un tercer intervalo se dispara cada segundo para llamar a `forceUpdate` y refrescar los timestamps relativos sin tocar los datos. `AnimatePresence mode='popLayout'` de Framer Motion gestiona las transiciones visuales: los nuevos elementos entran desde abajo (`y: 20, opacity: 0, scale: 0.97`), los existentes suben mediante la prop `layout`, y los salientes se van hacia arriba (`y: -16, opacity: 0, scale: 0.96`), todos impulsados por una curva de Bézier cúbica `[0.16, 1, 0.3, 1]` cercana a un spring.

Cómo crearlo en React

1. Definir la estructura de los datos e inicializar el estado

   Cada notificación necesita un `id`, unos `initials`, un `name`, un `message`, un `color` y un `timestamp` en segundos (usado para que los tiempos relativos parezcan espaciados). Al montar, pre-rellena con los dos primeros elementos para que la stack nunca esté vacía en el primer renderizado.

   useEffect(() => {
     setVisible(
       notifications.slice(0, 2).map((n, i) => ({
         ...n,
         id: Date.now() - i * 100,
         spawnedAt: Date.now() - (i + 1) * 6000,
       }))
     );
     setTick(2);
   }, []);

2. Hacer rotar las notificaciones en un intervalo

   Usa un `setInterval` para añadir el siguiente elemento de tu array en cada tick. Trunca el resultado a `maxVisible` para que la lista no crezca de forma ilimitada. Sigue el índice actual con un contador `tick` incrementado en cada llamada.

   const addNotif = useCallback(() => {
     setVisible((prev) => {
       const item = {
         ...notifications[tick % notifications.length],
         id: Date.now(),
         spawnedAt: Date.now(),
       };
       return [item, ...prev].slice(0, maxVisible);
     });
     setTick((t) => t + 1);
   }, [notifications, tick, maxVisible]);
   
   useEffect(() => {
     const t = setInterval(addNotif, intervalMs);
     return () => clearInterval(t);
   }, [addNotif, intervalMs]);

3. Animar con AnimatePresence y layout

   Envuelve la lista en `<AnimatePresence initial={false} mode='popLayout'>`. Dale a cada `motion.div` una `key` estable (usa `id`, no el índice del array), la prop `layout`, además de los variants `initial`, `animate` y `exit`. La prop `layout` gestiona automáticamente el reposicionamiento hacia arriba, sin cálculo de posición manual.

   <AnimatePresence initial={false} mode="popLayout">
     {visible.map((notif) => (
       <motion.div
         key={notif.id}
         layout
         initial={{ opacity: 0, y: 20, scale: 0.97 }}
         animate={{ opacity: 1, y: 0, scale: 1 }}
         exit={{ opacity: 0, y: -16, scale: 0.96 }}
         transition={{ layout: { duration: 0.3 }, opacity: { duration: 0.25 } }}
       >
         {/* card content */}
       </motion.div>
     ))}
   </AnimatePresence>

4. Mantener los timestamps vivos con un segundo intervalo

   La visualización del tiempo relativo ('hace 3s', 'hace 2min') debe actualizarse cada segundo sin disparar una actualización completa de los datos. Añade un intervalo separado que llame a un setter de estado ficticio para forzar un re-render cada segundo. El cálculo del timestamp lee entonces `Date.now()` actualizado en cada render.

   const [, forceUpdate] = useState(0);
   useEffect(() => {
     const t = setInterval(() => forceUpdate((n) => n + 1), 1000);
     return () => clearInterval(t);
   }, []);

Cuándo usarlo

Recurre a este patrón en landing pages de marketing donde necesitas transmitir actividad de plataforma y prueba social sin datos en tiempo real, registros SaaS, compras de e-commerce, inscripciones a cursos. Funciona mejor encima de una sección de precios o antes de un CTA principal. Evítalo en dashboards o en la UI de producto, donde datos ficticios en bucle confundirían a usuarios que esperan información real. En móvil se renderiza bien, pero mantén los mensajes cortos porque el truncado a una sola línea hace perder contexto en pantallas estrechas.

Usado por

• Fomo, Un producto SaaS dedicado a la prueba social que muestra notificaciones de compra y registro en tiempo real como cards toast superpuestas en los sitios de los clientes.
• Proof, Herramienta de optimización de conversión cuya interfaz principal es un feed de notificaciones en bucle que muestra los registros y acciones recientes a los nuevos visitantes.
• Gumroad, Marketplace de creadores que muestra notificaciones de compra en directo en las páginas de producto para reforzar la percepción de demanda.
• TrustPulse, Plugin de WordPress y WooCommerce que inyecta pilas de notificaciones de actividad animadas (compras, registros, reseñas) para aumentar las conversiones.

FAQ