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
Account Switch
ReactThe chosen avatar travels up into the header slot while the one it replaces goes back down into the list.
Sign-in Form Entrance
ReactHeading, fields and button rise into place in one quick sequence as the screen opens.
Biometric Prompt
ReactA fingerprint glyph strokes itself in while the device reads, then a ring settles once it accepts.
Trust This Device
ReactFlipping the switch drops the device into the trusted list below, already marked.
Guest Mode Limit
ReactA guest hits the limit and the gate glides up over a soft fade, offering a way in.
Invite Code Accept
ReactA valid invite code turns the field into the workspace tile it lets you into.
Login Error Recover
ReactA refused sign-in expands its reason under the field, wipes only the password, and hands the caret back.
Logout Confirm
ReactThe workspace dims and settles back while the sign-out question rises over it and takes focus.
Magic Link Wait
ReactA soft halo breathes behind the envelope while the emailed link is outstanding and the resend timer counts down.
Avatar Upload Crop
ReactA picked image drops into the circular frame and settles oversized, ready to be nudged.
OTP Code Entry
ReactSix boxes: the waiting box lifts, digits settle in, and a wrong code answers with one short nudge.
Passkey Create
ReactA key glyph strokes itself into existence, bow first, as the credential registers.
Password Match Confirm
ReactThe check settles into the confirm field the moment the two entries are identical.
Password Reset Sent
ReactThe request panel gives way to a confirmation, with the envelope settling in and its flap stroking closed.
Permission Scope List
ReactA consent screen reveals each requested scope in turn and keeps the approve button inert until they have all landed.
Recovery Codes Reveal
ReactBlurred backup codes sharpen across the grid once revealed, then copy in one press.
Role Badge Assign
ReactGranting a role slides the selection pill and settles a new badge onto the member row.
Session Lock Blur
ReactAn idle workspace softens behind a scrim while a lock card rises over it, keeping shape but not content.
Sign-in Success Handoff
ReactThe panel recedes as the product assembles behind it and the avatar travels into the header.
Signup Progress Meter
ReactA slim meter advances as each account requirement is satisfied, and every row marks itself as it passes.
Social Login Buttons
ReactThe separator rules draw outward from their label, then the provider buttons rise in one after the next.
SSO Redirect Handoff
ReactBoth marks stay on screen while a connector draws between them and a token crosses it.
Suspicious Login Alert
ReactA security alert holds a beat, then arrives slowly — this one is not meant to feel routine.
Team Seat Join
ReactA teammate joins the avatar stack while the seat count rolls and the usage bar grows.
Two Factor Method Switch
ReactChoosing another second factor slides the selection ring, crossfades the instructions and re-arms the field.
Verify Email Check
ReactThe pending ring strokes its way round while the link is checked, and the frame it closes on is the confirmed badge.