SSO Redirect Handoff
Both marks stay on screen while a connector draws between them and a token crosses it.
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, type ReactNode } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · SSO Redirect Handoff
*
* The seconds between leaving an app and arriving at an identity
* provider are usually a blank screen. This makes the handoff legible:About this pattern
The gap between leaving an app and landing on an identity provider is usually a white screen with a spinner, which tells the user nothing about where they are going. Here both marks are present from the first frame and a connector draws from one to the other, with a small token riding the same track a few frames behind the stroke — the redirect becomes a journey with a visible destination. Nothing overshoots: a handoff is a promise that a server is working, and springy marks make that promise look decorative. A hairline fills for the life of the redirect so a slow provider still reads as progress rather than a hang.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Sign-in screen
An interstitial that names the destination provider while the redirect resolves.
Related patterns
- Biometric PromptA fingerprint glyph strokes itself in while the device reads, then a ring settles once it accepts.
- Passkey CreateA key glyph strokes itself into existence, bow first, as the credential registers.
- Cipher ResolveA band of churning glyphs sweeps left to right, locking real characters behind it, so the value reads as decoded rather than uncovered.