Sign-in Form Entrance
Heading, fields and button rise into place in one quick sequence as the screen opens.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Sign-in Form Entrance
*
* Heading, fields, button and footer rise into place in one quick
* sequence as the sign-in screen opens.
*About this pattern
The first screen most users see, so it sets the tone for everything after it. Each row of the form travels a short distance up and lands on a near-critically damped spring, one shortly after the next, which walks the eye from the heading down to the primary button. The sequence is deliberately fast: returning users sign in daily and a slow entrance turns a chore into a wait. Rows carry text, so they translate and fade only — nothing scales, nothing rebounds.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Sign-in screen
Auth surfaces built on speed and restraint rather than flourish.
Related patterns
- Sign-in Success HandoffThe panel recedes as the product assembles behind it and the avatar travels into the header.
- Login Error RecoverA refused sign-in expands its reason under the field, wipes only the password, and hands the caret back.
- Biometric PromptA fingerprint glyph strokes itself in while the device reads, then a ring settles once it accepts.