Anatomie

L'élément outer est un grid min-h-screen avec lg:grid-cols-2. Le panneau gauche (masqué sous lg) est une flex column en justify-between pour pousser le logo en haut, le tagline au milieu et le copyright en bas ; il utilise var(--color-accent) comme fond. Le panneau droit centre une div max-w-sm qui contient le titre, le bouton Google optionnel, un séparateur, les inputs email et mot de passe, une ligne optionnelle se souvenir/oublier, le bouton de soumission et un lien d'inscription.

Comment ça marche

L'animation est minimale mais précise. Le wrapper max-w-sm du formulaire est une motion.div avec `initial={{ opacity: 0, y: 20 }}` et `animate={{ opacity: 1, y: 0 }}`. La transition utilise un cubic-bezier `[0.16, 1, 0.3, 1]`, une courbe ease-out agressive qui démarre vite et s'établit doucement, donnant au formulaire un effet d'atterrissage naturel. Durée : 0.6s. Comme l'animation cible le wrapper plutôt que les champs individuels, tout le formulaire entre comme une unité, ce qui est plus lisible que des animations décalées dans un contexte d'authentification.

Comment le coder en React

1. Mettre en place le grid deux colonnes

   Fais de la section outer un grid plein viewport avec deux colonnes égales au-dessus du breakpoint lg. En dessous, CSS Grid revient automatiquement à une seule colonne empilée, donc le formulaire prend toute la largeur sur mobile sans media query supplémentaire.

   <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. Animer le wrapper du formulaire au montage

   Enveloppe le contenu du formulaire dans une motion.div et déclare les états initial et animate. Le cubic-bezier `[0.16, 1, 0.3, 1]` est un ease-out rapide qui donne de l'énergie à l'animation sans rebond. Anime le wrapper, pas les inputs individuels, pour que le formulaire entre comme un bloc cohérent.

   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. Activer les blocs optionnels via des props

   Conditionne le bloc social login à un booléen showSocial et la ligne se souvenir/oublier à showRemember. Les deux sont à true par défaut. Cela rend le composant utile dans différents contextes, un outil interne minimaliste supprime le social login, un SaaS grand public garde tout, sans toucher le markup.

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

4. Utiliser les CSS tokens pour le thème

   Chaque couleur référence une CSS custom property : var(--color-accent) pour le fond du panneau gauche et le bouton de soumission, var(--color-foreground) pour le texte, var(--color-border) pour les bordures des inputs et les séparateurs. Le composant change de thème automatiquement quand l'attribut data-theme change sur un élément parent.

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

Quand l'utiliser

Le layout split convient aux produits SaaS et agences où l'écran de connexion est un point de contact de marque. Le panneau gauche est l'endroit idéal pour renforcer la proposition de valeur juste avant que l'utilisateur se connecte. À éviter pour les outils internes ou les dashboards où personne ne se préoccupe du branding à la connexion, un formulaire centré plus simple est plus rapide à parcourir. Le layout demande aussi suffisamment de contenu pour que les deux colonnes semblent équilibrées ; un panneau gauche avec juste un logo et une tagline vide est moins bon qu'un design mono-colonne.

Utilisé par

• Vercel, Layout d'authentification deux colonnes avec message de marque à gauche et formulaire de connexion à droite.
• Linear, Page de connexion split avec panneau d'identité de marque et formulaire email/social, cohérent avec leur esthétique produit épurée.
• Notion, Écran d'authentification deux colonnes qui maintient le branding produit visible tout au long du flux de connexion.

FAQ