Login and sign up
ProSign in and sign up pages, from a compact code card to full screen split and immersive layouts.
ImmersiveA glass magic link card over dusk photography that folds its envelope shut once sent.
- 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.
- 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
Pro source and install commands unlock with a Pro plan.
Usage
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.
import { LoginImmersive } from "@/components/arc/blocks/login-immersive/login-immersive"; export default function SignInPage() { return ( <LoginImmersive fullScreen termsHref="/terms" privacyHref="/privacy" onSignIn={(email, method) => console.log(email, method)} /> );}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.
fullScreenbooleanfalseFill 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".resendSecondsnumber30Seconds before another link can be sent.termsHrefstring–Terms link. Without it the preview explains where the link would go.privacyHrefstring–Privacy link. Without it the preview explains where the link would go.- 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.
- 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.
- 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.
- 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
Give your coding assistant the Markdown reference instead of screenshots.
- 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 Arc Button and Input.
The full library index for assistants is at /llms.txt.
