KQ-1716 · COOLING/LOCK

Cooling Lock

A lockout panel for after repeated failed sign-ins: frost covers a ring round the lock and thaws clockwise from the top as the wait runs down, in six-armed flakes that shrink on snap and leave a slipping droplet as the front passes, bristling hoarfrost that shortens at the front, or a glaze that drains as one arc. When the last of it melts the shackle lifts on snap and the copy gives way on glide to the sign-in form with the address kept; a new lockout freezes the ring back over on glide before the wait starts again, and a very long one points to support. Unlock by email is always offered, the countdown is announced at sensible marks, and focus moves to the password field when the form returns.

KQ-1716 · COOLING/LOCK

Too many tries

5 failed sign-ins forrae@fieldline.dev

Try again in

locked · 30 s cooldown · Fieldline

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/cooling-lock

Props

attempts: number; default 5; Failed sign-ins that caused the lock.
cooldown: number; default 60000; How long the lock lasts, in ms.
lockedAt: number; default now; When the lock began, ms since the epoch. A new value starts a new lockout and the frost grows back.
now: number; default defaultCoolingNow; The moment the remaining time is measured from, ms since the epoch; the clock is never read during render.
email: string; default "rae@fieldline.dev"; The account being signed in to; kept for the retry and the unlock link.
onRetry: (retry: { email, password }) => boolean | void | Promise<boolean | void>; default —; The retry was sent. Return or resolve false, or reject, to refuse it; an Error's message is shown.
onUnlockByEmail: (email: string) => void | Promise<void>; default —; Unlock by email was pressed; a promise holds it as sending.
onThaw: () => void; default —; The wait ran out and the form came back.
supportAfter: number; default 3600000; Lockouts longer than this, in ms, point to support instead of counting down.
supportHref: string; default "#support"; Where Contact support goes on a long lockout.
appName: string; default "Fieldline"; The product's name, in the sentences.
frostStyle: "crystal" | "rime" | "glaze"; default "crystal"; The frost's material: six-armed flakes, bristling hoarfrost, or a smooth glaze of ice.
density: number; default 0.6; How dense and thick the frost is, 0.2 to 1: flake and spike counts and the band's width.
tone: "calm" | "firm" | "stern"; default "firm"; The voice and the lock's colour: calm cobalt, firm ink, or stern red.
disabled: boolean; default false; The retry and the unlock link are unavailable.
className: string; default —; Classes for the outer section.

Prop	Type	Default	Description
attempts	number	5	Failed sign-ins that caused the lock.
cooldown	number	60000	How long the lock lasts, in ms.
lockedAt	number	now	When the lock began, ms since the epoch. A new value starts a new lockout and the frost grows back.
now	number	defaultCoolingNow	The moment the remaining time is measured from, ms since the epoch; the clock is never read during render.
email	string	"rae@fieldline.dev"	The account being signed in to; kept for the retry and the unlock link.
onRetry	(retry: { email, password }) => boolean \| void \| Promise<boolean \| void>	—	The retry was sent. Return or resolve false, or reject, to refuse it; an Error's message is shown.
onUnlockByEmail	(email: string) => void \| Promise<void>	—	Unlock by email was pressed; a promise holds it as sending.
onThaw	() => void	—	The wait ran out and the form came back.
supportAfter	number	3600000	Lockouts longer than this, in ms, point to support instead of counting down.
supportHref	string	"#support"	Where Contact support goes on a long lockout.
appName	string	"Fieldline"	The product's name, in the sentences.
frostStyle	"crystal" \| "rime" \| "glaze"	"crystal"	The frost's material: six-armed flakes, bristling hoarfrost, or a smooth glaze of ice.
density	number	0.6	How dense and thick the frost is, 0.2 to 1: flake and spike counts and the band's width.
tone	"calm" \| "firm" \| "stern"	"firm"	The voice and the lock's colour: calm cobalt, firm ink, or stern red.
disabled	boolean	false	The retry and the unlock link are unavailable.
className	string	—	Classes for the outer section.