Anatomía

La sección tiene tres zonas apiladas. Arriba, un encabezado centrado con un badge opcional, un título h2 y un párrafo de subtítulo, revelados por un único fade-up whileInView. Debajo, la barra de pestañas pill: un contenedor redondeado con un borde contiene los botones uno al lado del otro; cada botón se posiciona en relative para que el div indicador pueda colocarse en absolute inset. El indicador activo se renderiza únicamente dentro del botón activo, de modo que el sistema de layout de Framer Motion puede animarlo entre los siblings. La zona de contenido es una cuadrícula de dos columnas en desktop: texto (título, descripción, fila de stats opcional) a la izquierda, placeholder visual a la derecha.

Cómo funciona

El indicador pill usa layoutId='pill-indicator' en una motion.div renderizada condicionalmente dentro de cada botón. Cuando la pestaña activa cambia, el indicador antiguo se desmonta y el nuevo se monta, Framer Motion detecta el layoutId compartido y anima la transición entre las dos posiciones mediante un spring (stiffness 400, damping 30). El indicador se sitúa detrás del label mediante z-index y lleva un 12% de opacidad sobre el color accent, para que el texto siga siendo legible. Los intercambios de contenido usan AnimatePresence mode='wait': el panel saliente sube y se desvanece antes de que el panel entrante se deslice desde abajo, ambos impulsados por una constante EASE [0.16, 1, 0.3, 1] para una sensación ágil y natural.

Cómo crearlo en React

1. Configurar el estado y los datos

   Guarda el id de la pestaña activa con useState, inicializado con el id de la primera pestaña. Mantén la lista de pestañas como prop para que el componente siga siendo puramente presentacional. Cada pestaña lleva un id, un label, un nombre de icono Lucide opcional, un título, una descripción y un array de stats opcional.

   const [activeTab, setActiveTab] = useState(tabs[0]?.id ?? "");
   const current = tabs.find((t) => t.id === activeTab);

2. Construir la barra pill deslizante

   Renderiza cada pestaña como un botón nativo dentro de un contenedor flex redondeado. Dentro del botón activo, renderiza una motion.div con layoutId='pill-indicator' posicionada en absolute con inset:0. Framer Motion la animará entre los botones que se vuelven activos, dándote el efecto de deslizamiento sin ningún cálculo manual.

   {isActive && (
     <motion.div
       layoutId="pill-indicator"
       style={{ position: "absolute", inset: 0, borderRadius: "var(--radius-full)", background: "var(--color-accent)", opacity: 0.12 }}
       transition={{ type: "spring", stiffness: 400, damping: 30 }}
     />
   )}

3. Animar el panel de contenido

   Envuelve el bloque de contenido en AnimatePresence con mode='wait' y asígnale current.id como key. Esto garantiza que el contenido saliente se vaya por completo antes de que aparezca el contenido entrante, evitando solapamientos. Usa un fade con desplazamiento en y: initial y:16, animate y:0, exit y:-10 con tu cubic-bezier EASE para una sensación direccional cuidada.

   const EASE = [0.16, 1, 0.3, 1] as const;
   
   <AnimatePresence mode="wait">
     {current && (
       <motion.div
         key={current.id}
         initial={{ opacity: 0, y: 16 }}
         animate={{ opacity: 1, y: 0 }}
         exit={{ opacity: 0, y: -10 }}
         transition={{ duration: 0.35, ease: EASE }}
       >
         {/* content */}
       </motion.div>
     )}
   </AnimatePresence>

4. Añadir iconos y stats opcionales

   Resuelve los iconos Lucide dinámicamente a partir del nombre de icono almacenado en cada pestaña. Renderiza las stats como flex row debajo de la descripción cuando estén presentes. Las stats usan el color accent para el valor y un color atenuado para el label, creando un anclaje visual rápido sin librería de gráficos.

   function getIcon(name?: string) {
     if (!name) return null;
     return (LucideIcons as unknown as Record<string, React.ElementType>)[name] ?? null;
   }

Cuándo usarlo

Usa este patrón en secciones de resumen de funcionalidades, páginas de soluciones o niveles de precios donde tienes de tres a cinco opciones distintas que presentar y quieres mantener el espacio vertical compacto. Funciona bien justo después de un hero o de una fila de stats. Evítalo si tienes más de seis pestañas, la barra pill se ajusta mal en pantallas pequeñas, y descártalo cuando el contenido de cada panel es demasiado similar; los usuarios dejan de cambiar de pestaña si no perciben una diferencia real entre los paneles.

Usado por

• Stripe, Usa pestañas pill segmentadas para alternar entre las categorías de productos en sus principales páginas de marketing.
• Notion, Aparecen barras de pestañas estilo pill en las secciones de comparación de funcionalidades y de soluciones por equipo del sitio de marketing.
• Linear, Selectores de pestañas animados con indicadores deslizantes presentan las funcionalidades de workflow en la landing page del producto.
• Loom, Controles segmentados alternan entre los paneles de casos de uso en las páginas de soluciones y de precios.

FAQ