Anatomía

La sección exterior es un grid min-h-screen con lg:grid-cols-2. El panel izquierdo (oculto por debajo de lg) es una flex column con justify-between para empujar el logo arriba, el tagline al centro y el copyright abajo; usa var(--color-accent) como fondo. El panel derecho centra una div max-w-sm que contiene el título, el botón opcional de Google, un separador, los inputs de email y contraseña, una fila opcional de recordar/olvidé, el botón de envío y un enlace de registro.

Cómo funciona

La animación es mínima pero precisa. El wrapper max-w-sm del formulario es un motion.div con `initial={{ opacity: 0, y: 20 }}` y `animate={{ opacity: 1, y: 0 }}`. La transición usa un cubic-bezier `[0.16, 1, 0.3, 1]`, una curva ease-out agresiva que arranca rápido y se asienta con suavidad, dando al formulario una sensación natural de aterrizaje. Duración: 0.6s. Como la animación apunta al wrapper en lugar de a los campos individuales, todo el formulario entra como una unidad, lo que se lee más limpio que animaciones escalonadas en un contexto de autenticación.

Cómo crearlo en React

1. Configurar el grid de dos columnas

   Haz de la sección exterior un grid a viewport completo con dos columnas iguales por encima del breakpoint lg. Por debajo, CSS Grid vuelve automáticamente a una única columna apilada, así que el formulario ocupa todo el ancho en mobile sin ninguna media query adicional.

   <section className="min-h-screen grid lg:grid-cols-2">
     {/* left panel */}
     <div className="hidden lg:flex flex-col justify-between p-12"
          style={{ background: "var(--color-accent)" }}>
       ...
     </div>
     {/* right panel */}
     <div className="flex items-center justify-center p-8">
       ...
     </div>
   </section>

2. Animar el wrapper del formulario al montar

   Envuelve el contenido del formulario en un motion.div y declara los estados initial y animate. El cubic-bezier `[0.16, 1, 0.3, 1]` es un ease-out rápido que da energía a la animación sin rebote. Anima el wrapper, no los inputs individuales, para que el formulario entre como un bloque cohesionado.

   const ease: [number, number, number, number] = [0.16, 1, 0.3, 1];
   
   <motion.div
     initial={{ opacity: 0, y: 20 }}
     animate={{ opacity: 1, y: 0 }}
     transition={{ duration: 0.6, ease }}
     className="w-full max-w-sm"
   >

3. Alternar los bloques opcionales con props

   Condiciona el bloque de social login a un booleano showSocial y la fila de recordar/olvidé a showRemember. Ambos están en true por defecto. Esto mantiene el componente útil en distintos contextos, una herramienta interna minimalista descarta el social login, un SaaS de consumo lo conserva todo, sin tocar el markup.

   {showSocial && (
     <>
       <button ...>Continuer avec Google</button>
       <div className="flex items-center gap-3 my-6">...</div>
     </>
   )}

4. Aplicar los CSS tokens para el theming

   Cada color referencia una CSS custom property: var(--color-accent) para el fondo del panel izquierdo y el botón de envío, var(--color-foreground) para el texto, var(--color-border) para los bordes de los inputs y los separadores. Esto hace que el componente cambie de tema automáticamente cuando el atributo data-theme cambia en un elemento padre.

   <input
     type="email"
     style={{
       background: "var(--color-background-alt)",
       color: "var(--color-foreground)",
       border: "1px solid var(--color-border)",
     }}
   />

Cuándo usarlo

El layout split funciona bien para productos SaaS y agencias donde la pantalla de login es un punto de contacto de marca. El panel izquierdo es un espacio ideal para reforzar la propuesta de valor justo antes de que el usuario inicie sesión. Evítalo en herramientas internas o dashboards donde a nadie le importa el branding en el momento del login, un formulario centrado más simple se escanea más rápido. El layout también requiere suficiente contenido para que ambas columnas se sientan equilibradas; un panel izquierdo con solo un logo y una tagline vacía se ve peor que un diseño de una sola columna.

Usado por

• Vercel, Layout de autenticación de dos columnas con mensaje de marca a la izquierda y formulario de login a la derecha.
• Linear, Página de login split con panel de identidad de marca y formulario email/social, coherente con su estética de producto limpia.
• Notion, Pantalla de autenticación de dos columnas que mantiene el branding del producto visible durante todo el flujo de login.

FAQ