Cipher Resolve
A band of churning glyphs sweeps left to right, locking real characters behind it, so the value reads as decoded rather than uncovered.
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 { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Cipher Resolve
*
* A masked secret resolves left to right through a band of churning
* glyphs. Behind the band the real characters are locked; ahead of itAbout this pattern
The moment a credential comes back from the server — an API key, an access token, a licence — and the interface has to put it on screen. Uncovering it with a fade says the value was always there under a lid, which is the wrong picture: it was fetched, and a short decode says so. Three states move across the string in one direction. Behind the front the real characters are locked in the page's own ink; inside a narrow band they churn through the key's own alphabet in the accent colour, so the band is legible as a band and not as noise; ahead of it the value is still dots. Two decisions keep it usable rather than decorative. The separators that give a key its shape — underscores, dashes, spaces — never scramble, because they are structure rather than secret and a value whose shape jitters is one nobody can scan. And the line is monospaced with tabular figures, so no invented glyph is ever a different width from the character it stands in for and the row cannot reflow while it is being read. Under prefers-reduced-motion the press locks the whole value in a single frame, because the value, not the sweep, is the information.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Settings
The API key row decodes in place when the developer asks for it; the key below stays masked.
- Onboarding flow
A key issued during setup decodes into the card, so it reads as freshly generated.
Related patterns
- Passkey CreateA key glyph strokes itself into existence, bow first, as the credential registers.
- Biometric PromptA fingerprint glyph strokes itself in while the device reads, then a ring settles once it accepts.
- Recovery Codes RevealBlurred backup codes sharpen across the grid once revealed, then copy in one press.