← All patterns

Authentication motion patterns

Sign-in, verification and account switching. Moments where confidence in the product is either earned or lost.

React + Motion · new patterns added daily

interactive

Account Switch

React

The chosen avatar travels up into the header slot while the one it replaces goes back down into the list.

authenticationpremiumelegant

Sign-in Form Entrance

React

Heading, fields and button rise into place in one quick sequence as the screen opens.

authenticationpremiumminimal

Biometric Prompt

React

A fingerprint glyph strokes itself in while the device reads, then a ring settles once it accepts.

authenticationpremiumfuturistic
interactive

Trust This Device

React

Flipping the switch drops the device into the trusted list below, already marked.

authenticationminimalcalm

Guest Mode Limit

React

A guest hits the limit and the gate glides up over a soft fade, offering a way in.

authenticationcalmfriendly
interactive

Invite Code Accept

React

A valid invite code turns the field into the workspace tile it lets you into.

authenticationenergeticfriendly
interactive

Login Error Recover

React

A refused sign-in expands its reason under the field, wipes only the password, and hands the caret back.

authenticationcalmminimal
interactive

Logout Confirm

React

The workspace dims and settles back while the sign-out question rises over it and takes focus.

authenticationcalmpremium

Magic Link Wait

React

A soft halo breathes behind the envelope while the emailed link is outstanding and the resend timer counts down.

authenticationcalmelegant
interactive

Avatar Upload Crop

React

A picked image drops into the circular frame and settles oversized, ready to be nudged.

authenticationfriendlyelegant
interactive

OTP Code Entry

React

Six boxes: the waiting box lifts, digits settle in, and a wrong code answers with one short nudge.

authenticationfriendlyminimal

Passkey Create

React

A key glyph strokes itself into existence, bow first, as the credential registers.

authenticationfuturisticpremium

Password Match Confirm

React

The check settles into the confirm field the moment the two entries are identical.

authenticationsubtleminimal

Password Reset Sent

React

The request panel gives way to a confirmation, with the envelope settling in and its flap stroking closed.

authenticationcalmfriendly

Permission Scope List

React

A consent screen reveals each requested scope in turn and keeps the approve button inert until they have all landed.

authenticationcalmminimal
interactive

Recovery Codes Reveal

React

Blurred backup codes sharpen across the grid once revealed, then copy in one press.

authenticationpremiumminimal
interactive

Role Badge Assign

React

Granting a role slides the selection pill and settles a new badge onto the member row.

authenticationminimalpremium

Session Lock Blur

React

An idle workspace softens behind a scrim while a lock card rises over it, keeping shape but not content.

authenticationpremiumcalm

Sign-in Success Handoff

React

The panel recedes as the product assembles behind it and the avatar travels into the header.

authenticationpremiumcalm

Signup Progress Meter

React

A slim meter advances as each account requirement is satisfied, and every row marks itself as it passes.

authenticationfriendlyenergetic

Social Login Buttons

React

The separator rules draw outward from their label, then the provider buttons rise in one after the next.

authenticationfriendlyminimal

SSO Redirect Handoff

React

Both marks stay on screen while a connector draws between them and a token crosses it.

authenticationpremiumfuturistic

Suspicious Login Alert

React

A security alert holds a beat, then arrives slowly — this one is not meant to feel routine.

authenticationcalmpremium

Team Seat Join

React

A teammate joins the avatar stack while the seat count rolls and the usage bar grows.

authenticationfriendlyenergetic
interactive

Two Factor Method Switch

React

Choosing another second factor slides the selection ring, crossfades the instructions and re-arms the field.

authenticationminimalcalm

Verify Email Check

React

The pending ring strokes its way round while the link is checked, and the frame it closes on is the confirmed badge.

authenticationfriendlypremium