Password Dial ties a typing password field to a needle gauge: masked dots fill the input while the gauge sweeps from weak to strong and a breach check chip flips to a clear state. It runs on a loop. Built with Framer Motion and React. Card copy is prop driven, suited to password and breach detection feature sections.
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 PasswordDial from "@/components/pro/blocks/password-dial";
<PasswordDial />;Props
| Prop | Type | Default | Description |
|---|---|---|---|
cardTitle | string | "Passwords" | Title shown in the card overlay. |
cardDescription | string | "Simple and secure password authentication with breach detection." | Description shown in the card overlay. |