Anatomía

La maquetación es una fila flex con dos hijos flex que se apilan en pantallas estrechas. La columna izquierda es una lista apilada de filas de puestos, cada una mostrando título, badge de departamento, ubicación y tipo de contrato. Un icono de flecha anima su opacidad y su desplazamiento x para señalar la fila activa. La columna derecha contiene un contenedor sticky con un único slot AnimatePresence: cuando active no es nulo, se renderiza una tarjeta de detalle con la etiqueta de departamento, el título, el párrafo de descripción, una lista de requisitos animada y un anchor para postular.

Cómo funciona

Toda la interacción depende de una sola pieza de state: `const [active, setActive] = useState<number | null>(null)`. Cada fila de puesto actualiza active en mouseEnter y lo alterna al hacer clic (para usuarios táctiles). El panel de detalle se envuelve en AnimatePresence con mode="wait", que vacía el elemento saliente antes de montar el siguiente. El propio panel entra con `{ opacity: 0, x: 30 }` y sale con los mismos valores, por lo que la transición se lee como un intercambio lateral en vez de un simple fundido. Dentro del panel, cada `<li>` de requisito se escalona mediante un retardo por elemento (`delay: ri * 0.04`) para que la lista entre en cascada una vez que la tarjeta se asienta.

Cómo crearlo en React

1. Configurar el split layout y el state

   Crea un contenedor flex con dos hijos: una columna de lista de empleos (flex: 1 1 340px) y una columna de detalle (flex: 1 1 380px). Declara `const [active, setActive] = useState<number | null>(null)` en la raíz del componente. Este único entero dirige toda la parte interactiva del componente.

   const [active, setActive] = useState<number | null>(null);

2. Construir las filas de puestos con handlers de hover y clic

   Recorre tu array de empleos y renderiza una motion.div por cada entrada. Asocia `onMouseEnter={() => setActive(i)}` para escritorio y `onClick={() => setActive(active === i ? null : i)}` para alternar el panel en dispositivos táctiles. Anima el fondo de transparente a tu color alt-background cuando la fila está activa.

   onMouseEnter={() => setActive(i)}
   onClick={() => setActive(active === i ? null : i)}

3. Envolver el panel de detalle en AnimatePresence

   Coloca AnimatePresence con mode="wait" en la columna derecha. Dentro, renderiza condicionalmente una motion.div con la key `active`. Define initial/exit en `{ opacity: 0, x: 30 }` y animate en `{ opacity: 1, x: 0 }`. El cambio de key obliga a AnimatePresence a sacar el panel antiguo y entrar el nuevo cada vez que cambia el puesto activo.

   <AnimatePresence mode="wait">
     {active !== null && (
       <motion.div
         key={active}
         initial={{ opacity: 0, x: 30 }}
         animate={{ opacity: 1, x: 0 }}
         exit={{ opacity: 0, x: 30 }}
         transition={{ duration: 0.35, ease: [0.16, 1, 0.3, 1] }}
       >
         {/* job detail content */}
       </motion.div>
     )}
   </AnimatePresence>

4. Escalonar en cascada la lista de requisitos dentro del panel

   Mapea los requisitos a elementos `<motion.li>`. Dale a cada uno `initial={{ opacity: 0, x: -8 }}`, `animate={{ opacity: 1, x: 0 }}` y un retardo de transición de `ri * 0.04` segundos. Como AnimatePresence vuelve a montar el panel en cada cambio de active, la cascada se reproduce automáticamente para cada nuevo puesto.

   <motion.li
     key={ri}
     initial={{ opacity: 0, x: -8 }}
     animate={{ opacity: 1, x: 0 }}
     transition={{ duration: 0.25, delay: ri * 0.04 }}
   >

Cuándo usarlo

Recurre a este patrón cuando una empresa tiene de 4 a 12 puestos abiertos y quiere una sección de empleos dedicada en lugar de una simple página de lista. Funciona bien como sección al final de la página, junto a un bloque de cultura o de ventajas. Evítalo si tienes más de 20 puestos: una tabla filtrable o una interfaz de búsqueda escala mejor. En páginas con contenido crítico donde cada píxel cuenta, la columna del panel sticky ocupa la mitad del ancho del viewport en escritorio.

Usado por

• Notion, Usa una página de empleos con split-layout depurada donde hacer clic en un puesto revela los detalles en línea sin navegar de página.
• Linear, Lista de empleos con un diseño de fila minimalista y una vista de detalle contextual que mantiene al candidato centrado en la lista.
• Vercel, Puestos agrupados por departamento con comportamiento de expansión inline, manteniendo la experiencia de navegación en una sola página.
• Stripe, Navegador de empleos con panel dividido, filtros por departamento y una columna de detalle persistente para el puesto seleccionado.

FAQ