Verify Email Check
The pending ring strokes its way round while the link is checked, and the frame it closes on is the confirmed badge.
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 { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Verify Email Check
*
* The pending ring strokes its way round while the link is checked, and
* the moment it closes it becomes the confirmed badge.About this pattern
The page an emailed activation link lands on has two states and about a second between them, which is exactly long enough to do badly. Here the waiting indicator and the confirmation are the same ring: it strokes its way round while the link is checked, and the frame it finishes on is the badge outline, recolored, with a tinted disc arriving underneath. Nothing is swapped out, so there is no seam where a loader disappears and a result pops in — and no second flourish, because a confirmation that celebrates twice reads as unsure the first time. Both headings sit in one fixed slot at the same size, so the card never resizes and the type only ever crossfades.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Sign-in screen
A single card that checks the link and reports the outcome in place.
Related patterns
- Password Reset SentThe request panel gives way to a confirmation, with the envelope settling in and its flap stroking closed.
- Biometric PromptA fingerprint glyph strokes itself in while the device reads, then a ring settles once it accepts.
- Sign-in Form EntranceHeading, fields and button rise into place in one quick sequence as the screen opens.