# Immersive login

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

- 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:

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

```bash
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

```tsx
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](https://ui.xzero.co.uk/components/blocks/sign-in/markdown): A passkey-first login card on a quiet ring backdrop that morphs through email and code.
- [Login and sign up: Split](https://ui.xzero.co.uk/components/blocks/sign-in/markdown): A full screen split login: an email-first form that morphs into a password step beside a photo.
- [Login and sign up: Email code](https://ui.xzero.co.uk/components/blocks/sign-in/markdown): A sign in card that morphs from email to a six digit code to your account.
- [Login and sign up: Sign up](https://ui.xzero.co.uk/components/blocks/sign-in/markdown): An account creation flow with field validation, password strength, and a clear completion state.