Password Reveal Toggle
Dots hand over to the real characters one cell at a time as the eye takes its slash.
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 { useId, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Password Reveal Toggle
*
* The dots hand over to the real characters one cell at a time, left to
* right, while the eye picks up its slash. Hiding runs the same waveAbout this pattern
Checking what you typed, without the field blinking. Each masked cell crossfades to the character it was standing in for, left to right, and hiding runs the same wave backwards so the two directions read as one gesture reversed. The eye does not swap for a different icon — its slash draws itself on. The field stays a real input whose type still switches between password and text, so managers and assistive technology behave normally; only its own glyphs are transparent, because the crossfading cells above are what gets read. Monospace cells keep a dot and its character in exactly the same box.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Settings
Concealed values reveal in place with the eye control changing state.
Related patterns
- Radio Select DotThe chosen dot springs out of its ring while the previous one lets go a little faster.
- Checkbox Check DrawThe box fills from its center and the tick strokes itself in over the fill.
- Conditional Section RevealPicking an option unfolds the extra fields it requires, the section easing its height open.