Magic Link Wait
A soft halo breathes behind the envelope while the emailed link is outstanding and the resend timer counts down.
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 · Magic Link Wait
*
* A soft halo breathes behind the envelope for as long as the emailed
* link is outstanding, while the resend timer counts itself down.About this pattern
Passwordless sign-in leaves someone on a page with nothing to do, which is exactly the situation an idle screen has to handle gracefully. Two halos share one slow easeInOut breath, the outer softer and a beat behind, so the glow has depth rather than reading as a disc that keeps expanding — and the cycle never ticks or jumps, because a marker that pretends to advance invents progress the product does not have. The resend timer carries the only real information on the page, so it is set in tabular figures and simply changes value; when it reaches zero the button recolors in place instead of moving. Reduced motion keeps the halo and stops the breath.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Sign-in screen
Quiet waiting state for a link that will do the signing in.
Related patterns
- Password Reset SentThe request panel gives way to a confirmation, with the envelope settling in and its flap stroking closed.
- Guest Mode LimitA guest hits the limit and the gate glides up over a soft fade, offering a way in.
- Permission Scope ListA consent screen reveals each requested scope in turn and keeps the approve button inert until they have all landed.