Password Strength is a hover gated auth visual: a scripted passphrase types itself character by character while a four segment meter climbs from very weak to strong, character rules check off, and a crack time chip updates with the score. The lock emblem turns green on completion, holds, clears, and loops while hovered. Built with Framer Motion and React. A convincing signup form mockup for auth product pages.
Installation
Install dependencies.
Copy and paste the following code into your project.
Unlock the full library
Get all pro blocks, components & illustrations, and production-ready Next.js + Tailwind templates.
Update the import paths to match your project setup.
Usage
import PasswordStrength from "@/components/pro/blocks/password-strength";<PasswordStrength />Behavior
Hover the card to run the typing sequence. A scripted password types itself character-by-character; the lock emblem's ring and four-segment meter fill (very weak → weak → medium → strong) with the stage color, and the crack-time chip under the lock updates with the score. When the password completes, the lock turns green — it holds for a moment, clears, and loops while hovered.