Passkey Create
A key glyph strokes itself into existence, bow first, as the credential registers.
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 { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Passkey Create
*
* Registering a passkey is a cryptographic non-event: nothing is typed,
* nothing is sent, and the moment is over before it registers. Drawing
* the key from its parts gives the user something to watch that isAbout this pattern
Creating a passkey is a cryptographic non-event: nothing is typed, nothing is sent, and it is over before the user notices it started. Drawing the key from its parts gives them something honest to watch — a credential being assembled on the device. The strokes arrive in the order a hand would draw them, bow then shaft then teeth, so the glyph finishes at its tip rather than fading in whole. A single ring expands as the last tooth lands; it holds no text, which is why it is the one element here allowed to change size. The caption rows then rise on a spring that settles without a rebound.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Two-factor prompt
A confirmation screen that names the site and device the credential belongs to.
Related patterns
- Biometric PromptA fingerprint glyph strokes itself in while the device reads, then a ring settles once it accepts.
- Cipher ResolveA band of churning glyphs sweeps left to right, locking real characters behind it, so the value reads as decoded rather than uncovered.
- SSO Redirect HandoffBoth marks stay on screen while a connector draws between them and a token crosses it.