Biometric Prompt
A fingerprint glyph strokes itself in while the device reads, then a ring settles once it accepts.
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 · Biometric Prompt
*
* The fingerprint glyph strokes itself in while the device reads you,
* then an accent ring settles around it once the identity is accepted.About this pattern
The moment a device decides whether you are you, given a shape. The ridges stroke themselves in from the outside inward, which makes the glyph read as being assembled by the reader rather than switched on, and the pacing is the only thing that says work is happening — there is no separate indicator to contradict the result later. Acceptance arrives as a single ring settling around the glyph and the ridges taking the accent color; one settle, no rebound, because a security confirmation that wobbles reads as uncertain. The outcome is written out as well as drawn, so a screen reader and a reduced-motion reader get the same answer.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Sign-in screen
A glyph that reads as the sensor itself, resolving into a single accepted state.
Related patterns
- Passkey CreateA key glyph strokes itself into existence, bow first, as the credential registers.
- SSO Redirect HandoffBoth marks stay on screen while a connector draws between them and a token crosses it.
- Cipher ResolveA band of churning glyphs sweeps left to right, locking real characters behind it, so the value reads as decoded rather than uncovered.