Immersive loginPro

• Page: https://ui.xzero.co.uk/components/blocks/login-immersive

Variant: Immersive

A glass magic link card over dusk photography that folds its envelope shut once sent.

• Access: Xzero Pro
• Registry id: login-immersive
• Source file: registry/blocks/login-immersive/login-immersive.tsx
• Built from: Button, Input
• Keywords: react magic link login, passwordless sign in, login page with background image, glass login card, email link sign in, full screen login

Use this as a full screen sign in or sign up page (pass fullScreen). Connect the email form to your magic link sender, Open mail app to a mailto or deep link, and the SSO buttons to your OAuth routes; onSignIn receives the email and method.

When to use

• A magic link sign in page with a strong brand photo behind a glass card.
• Consumer or creative products where the sign in screen carries the brand mood.

When not to use

• Use login-centered for passkey-first auth with an email code.
• Use login-split for password sign in with a quieter layout.
• Use sign-in when the form sits inside an existing page.

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/login-immersive

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { LoginImmersive } from "@/components/xzero/blocks/login-immersive/login-immersive";

export default function SignInPage() {
  return (
    <LoginImmersive
      fullScreen
      termsHref="/terms"
      privacyHref="/privacy"
      onSignIn={(email, method) => console.log(email, method)}
    />
  );
}

API reference

LoginImmersive

A glass magic link card over a full-bleed photo whose envelope folds shut once the link is sent. The photo is imported from public/media/photos/mountain-ridges.jpg; sending and SSO are simulated.

Prop	Type	Default	Description
fullScreen	boolean	false	Fill the viewport (100dvh, square corners) when the block is the whole page.
onSignIn	(email: string, method: LoginImmersiveMethod) => void	–	Called once the simulated sign in succeeds. LoginImmersiveMethod is "Magic link" | "Google" | "Apple" | "GitHub".
resendSeconds	number	30	Seconds before another link can be sent.
termsHref	string	–	Terms link. Without it the preview explains where the link would go.
privacyHref	string	–	Privacy link. Without it the preview explains where the link would go.

Accessibility

• The email field uses autoComplete="email" and SSO buttons sit in a labelled role="group".
• Busy actions use aria-disabled rather than disabled so focus is kept.
• A polite role="status" region announces when the link is sent and resend availability.

Motion

• After sending, the form gives way to an envelope that folds shut and the resend countdown rolls.
• Reduced motion replaces the fold and slides with fades.

Responsive behavior

• The card is min(100%, 420px) wide; below a 380px card width its padding and heading shrink and the SSO buttons tighten.
• Below a 520px container the top bar and footer padding shrink.
• The photo uses next/image with fill and sizes 100vw, so it covers any viewport.

Performance

• The photo loads eagerly with a blur placeholder; use a well compressed image since it is the largest asset.
• The card uses backdrop blur, which falls back to a solid surface where backdrop-filter is not supported.

Notes for AI

• Use as a full screen sign in or sign up page for magic link auth with a strong brand photo.
• Replace the imported photo with your own, connect the email form to your magic link sender, Open mail app to a mailto or deep link, and SSO to OAuth routes.
• Uses next/image; composes Xzero Button and Input.

Related

• Login and sign up: Centered: A passkey-first login card on a quiet ring backdrop that morphs through email and code.
• Login and sign up: Split: A full screen split login: an email-first form that morphs into a password step beside a photo.
• Login and sign up: Email code: A sign in card that morphs from email to a six digit code to your account.
• Login and sign up: Sign up: An account creation flow with field validation, password strength, and a clear completion state.