Password Strength Bar
A segmented meter fills bar by bar and shifts hue as a password improves.
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 · Password Strength Bar
*
* A segmented meter whose bars fill left to right and shift hue as a
* password gets stronger, with the tier word and the hint crossfading
* underneath.About this pattern
Live feedback while someone chooses a password. Each bar scales in from its left edge in a quick left-to-right cascade, and the whole row travels through a hue scale — red, amber, olive, green — as the tier changes. The tier word and the guidance line sit in fixed slots and crossfade in place, so the type size never changes and the form never reflows under the cursor. Judgement matters more than drama here: the meter is telling the reader something factual, so it settles on its value without overshooting past it.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Settings
Password generator shows a strength scale that recolors as the recipe changes.
Related patterns
- Offline Banner DropA connection bar opens down out of the top edge, holds while the app retries, then retracts once it is back.
- Session Expiry CountdownA session-timeout dialog counts down on a draining ring with a clear stay-signed-in action.
- Validation Summary ListA rejected submit answers with the whole list of what stopped it, each entry arriving a beat apart.