A device-style lock screen with rolling clock digits over a layered dusk wallpaper. Unlocking opens a frosted PIN pad that accepts the keyboard, shakes on a wrong PIN, locks out with a countdown ring after too many tries, and lifts away with an opening shackle on success.
Saturday, November 7
Maya Chen
maya.chen@northwind.io
npx shadcn@latest add https://hyperblur.dev/r/auth-flow-lock-screen.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/auth-flow-lock-screen.tsx.
import { AuthFlowLockScreen } from "@/components/hyperblur/auth-flow-lock-screen"
<AuthFlowLockScreen user="Maya Chen" pin="2580" onUnlock={() => router.push("/app")} />| Prop | Type | Default | Description |
|---|---|---|---|
| user | string | "Maya Chen" | Name under the avatar and in the welcome message. |
| string | "maya.chen@northwind.io" | Line under the name. | |
| time | string | "09:41" | Time shown before the live clock starts, as HH:MM. |
| date | string | "Saturday, November 7" | Date shown before the live clock starts. |
| live | boolean | true | Follow the device clock after mount. Set false to keep the static time and date. |
| pin | string | "2580" | PIN that unlocks the screen. Its length sets the number of dots. Check real PINs on the server through onFail and onUnlock. |
| maxAttempts | number | 3 | Wrong PINs allowed before the lockout. |
| lockoutSeconds | number | 30 | Length of the lockout. |
| onUnlock | () => void | Called after the unlock animation. | |
| onFail | (attempts: number) => void | Called on every wrong PIN with the attempt count. | |
| onSwitchUser | () => void | Called by the Switch user link. | |
| headingAs | "h1" | "h2" | "h3" | "h2" | Heading level of the clock. |
| accent | string | "#60a5fa" | Wallpaper glow and focus color. |