Screens / Login

Login

Signing in, signing up and verifying, as art-directed scenes. It is the screen people see most and want to spend the least time on, so the delight has to earn its place and never get in the way. Each scene below is a working screen. Open one to try it, see its art direction, and copy the code.

Lamp pullSign in

Coming home at night: you switch on the light, and the room (and your account) appears.

ElevatorSign in

Signing in is going up: you call the elevator, it rises to your floor, and the doors open onto your space.

Vault dialVerify

Your code is the combination; the account is the vault.

Paper planeSign in

Your sign-in link is a letter you post by air mail, and the inbox is the destination.

Password gardenSign up

A strong password is a garden you grow: rules are seeds, strength is sunrise.

Night owlSign in

A night watchman who politely looks away while you whisper the password.

Key rackSign in

Signing in is checking in: your account is a room, and the front desk keeps your key waiting.

ConstellationSign in

Your sign-in is a small act of creation: the letters you type become stars, and finishing makes them a constellation.

Every scene keeps these

Never gate sign-in behind the interaction: the form works the moment the page loads, and any focus or typing skips the show.
A real <form> with <label>s, type="email"/"password", and autocomplete="username" + "current-password" (or "new-password" on sign-up, "one-time-code" for codes) so password managers, passkeys and SMS autofill work.
Keyboard path: Tab moves email, password, submit in order; Enter submits.
Errors in plain words next to the field, announced (aria-live), with focus moved to the field to fix. Don't clear what they typed.
Answer the submit within 100ms (pending state, button disabled while the request runs).
Respect prefers-reduced-motion: the delight becomes a still state, never a blocker.
Any character or effect is decorative: aria-hidden, and text contrast never depends on it.