A vault unlock screen with a cutaway pin-tumbler padlock: each typed character sets a pin at the shear line, a key slides in on submit and the shackle springs open to reveal the vault contents. Wrong or short passwords shake the lock.
npx shadcn@latest add https://hyperblur.dev/r/auth-lock-reveal.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/auth-lock-reveal.tsx.
import { AuthLockReveal } from "@/components/hyperblur/auth-lock-reveal"
<AuthLockReveal vaultName="Finance vault" onUnlock={async (password) => (await fetch("/api/reauth", { method: "POST", body: password })).ok} />| Prop | Type | Default | Description |
|---|---|---|---|
| vaultName | string | "Finance vault" | Name of the protected area, used in the headings and the lock button. |
| account | { name: string; email: string } | { name: "Daniel Reyes", email: "daniel@harbor.co" } | Signed-in account confirming the unlock. |
| items | { name: string; meta: string }[] | 3 recent items | Items revealed once the vault opens. |
| minLength | number | 6 | Shortest password accepted before the lock shakes. |
| defaultPassword | string | "" | Prefills the password, useful for previews of the pins. |
| onUnlock | (password: string) => boolean | void | Promise<boolean | void> | Verify the password here. Return or resolve false to shake the lock; a rejection shows its message. | |
| onLock | () => void | Called when the vault is locked again. | |
| onSwitchAccount | () => void | Called by the Not you button. | |
| accent | string | "#e6b450" | Pins, key, glow and button color. |