Anatomy

The outer section is a min-h-screen grid with lg:grid-cols-2. The left panel (hidden below lg) is a flex column using justify-between to push the logo to the top, the tagline to the middle, and the copyright to the bottom; it uses var(--color-accent) as background. The right panel centers a max-w-sm div that contains the heading, optional Google button, a divider, the email and password inputs, an optional remember/forgot row, the submit button, and a sign-up link.

How it works

The animation is minimal but precise. The max-w-sm form wrapper is a motion.div with `initial={{ opacity: 0, y: 20 }}` and `animate={{ opacity: 1, y: 0 }}`. The transition uses a named cubic-bezier ease `[0.16, 1, 0.3, 1]`, an aggressive ease-out curve that starts fast and settles softly, giving the form a natural drop-in feeling. Duration is 0.6s. Because the animation targets the wrapper rather than individual fields, the whole form enters as a unit, which reads cleaner than staggered field animations in an auth context.

How to build it in React

1. Set up the two-column grid

   Make the outer section a full-viewport grid with two equal columns above the lg breakpoint. Below lg, CSS Grid falls back to a single stacked column automatically, so the form takes the full width on mobile without any extra media queries.

   <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. Animate the form wrapper on mount

   Wrap the form content in a motion.div and declare the initial and animate states. The cubic-bezier `[0.16, 1, 0.3, 1]` is a fast ease-out that gives the animation energy without a bounce. Animate the wrapper, not individual inputs, so the form enters as a single cohesive block.

   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. Toggle optional blocks with props

   Gate the social login block behind a showSocial boolean and the remember/forgot row behind showRemember. Both default to true. This keeps the component useful across contexts, a minimal internal tool drops social login, a consumer SaaS keeps everything, without touching the markup.

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

4. Apply CSS tokens for theming

   Every color references a CSS custom property: var(--color-accent) for the left panel background and submit button, var(--color-foreground) for text, var(--color-border) for input borders and dividers. This makes the component switch themes automatically when the data-theme attribute changes on a parent element.

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

When to use it

The split layout works well for SaaS products and agencies where the login screen is a brand touchpoint. The left panel is prime space to reinforce the value proposition right before users sign in. Skip it for internal tools or dashboards where nobody cares about branding at login time, a simpler centered form is faster to scan. The layout also requires enough content for both columns to feel balanced; a left panel with just a logo and an empty tagline looks worse than a single-column design.

Used by

• Vercel, Two-column auth layout with brand messaging on the left and the login form on the right.
• Linear, Split login page with brand identity panel and email/social login form, consistent with their clean product aesthetic.
• Notion, Two-column auth screen that keeps product branding visible throughout the login flow.

FAQ