Password Reset Sent
The request panel gives way to a confirmation, with the envelope settling in and its flap stroking closed.
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, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Password Reset Sent
*
* The request panel gives way to the confirmation: the envelope settles
* into place, its flap strokes in, and the reassurance text follows.About this pattern
The panel swap that ends a forgotten-password detour. Both states live in one fixed box, so the card never resizes under the change and nothing below it jumps — the outgoing panel clears upward on a quick ease-in while the arriving one translates in on a damped spring. The envelope is the only element that changes size, because it is a glyph and not a sentence, and its flap strokes closed a beat after the body lands so the picture reads as your message being sealed rather than as an icon switching on. The address is echoed back in the copy: the reassurance people actually want here is proof that the right inbox was used.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Sign-in screen
The request card becomes the confirmation in place, echoing the address back.
Related patterns
- Verify Email CheckThe pending ring strokes its way round while the link is checked, and the frame it closes on is the confirmed badge.
- Guest Mode LimitA guest hits the limit and the gate glides up over a soft fade, offering a way in.
- Login Error RecoverA refused sign-in expands its reason under the field, wipes only the password, and hands the caret back.