Recovery Codes Reveal
Blurred backup codes sharpen across the grid once revealed, then copy in one press.
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, useRef, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Recovery Codes Reveal
*
* Backup codes are the one screen where hiding content is the feature.
* The codes are laid out and legible as shapes from the first frame, butAbout this pattern
Backup codes are the rare screen where hiding the content is the feature. The grid is laid out and readable as shapes from the first frame, so the user understands what they are about to expose, and the reveal sharpens the codes in place instead of swapping one panel for another. Blur is the property that animates because blur is the point, kept to a short ease — a code that sits half-legible is worse than one that is hidden. Codes are text, so they translate and sharpen but never scale, and there is no spring anywhere in the pattern: an overshooting blur would be unreadable mid-flight. The copy control holds its width so confirming never shoves the guidance beside it.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Two-factor prompt
A one-time handover screen with a grid of codes and a single copy action.
Related patterns
- Role Badge AssignGranting a role slides the selection pill and settles a new badge onto the member row.
- Cipher ResolveA band of churning glyphs sweeps left to right, locking real characters behind it, so the value reads as decoded rather than uncovered.
- Login Error RecoverA refused sign-in expands its reason under the field, wipes only the password, and hands the caret back.