Login Error Recover
A refused sign-in expands its reason under the field, wipes only the password, and hands the caret back.
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 { useEffect, useRef, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Login Error Recover
*
* A rejected sign-in expands its reason under the password field, wipes
* the password and nothing else, and puts the caret back where the nextAbout this pattern
Most sign-in failures are a typo, so the interesting part of this pattern is not the refusal — it is the handover to the next attempt. The reason opens the space it needs on a short ease-out rather than a spring, because a spring drags the sentence past its resting line and back while someone is trying to read it. The address survives untouched, only the secret is wiped, and re-keying the emptied box makes it fade back up once as proof it was cleared. The caret is already in it by the time the reason finishes opening. Nothing is shaken: the message says what happened, and a jolt on top of it reads as scolding.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Sign-in screen
Only the password step is reset; the identifier already entered is kept.
Related patterns
- Password Reset SentThe request panel gives way to a confirmation, with the envelope settling in and its flap stroking closed.
- Sign-in Form EntranceHeading, fields and button rise into place in one quick sequence as the screen opens.
- Trust This DeviceFlipping the switch drops the device into the trusted list below, already marked.