Skip to content

Lock Screen

Every session starts here: monogram, display wordmark, six passcode dots, and the keypad. Passcode or Touch ID unlocks Main Vault; a wrong code shakes the dots in danger, a right one sweeps them to success. In product the panel fills the viewport — these specimens contain it in a frame.

States

All four passcode states side by side. The dots are the state machine: outline when empty, foreground when filled, danger on error, success cascade while unlocking.

idle
COLDHARBOR
<LockScreen filled={0}>
  <Monogram size={48} />
</LockScreen>
  • --ch-bg
  • --ch-border-strong
  • --ch-surface
  • --ch-font-family-display

Locked, nothing entered — six outline dots.

partial fill
COLDHARBOR
<LockScreen filled={3} />
  • --ch-fg
  • --ch-border-strong
  • --ch-surface

Three of six digits — filled dots pop in on the press spring.

error
COLDHARBOR
<LockScreen filled={6} error />
  • --ch-danger
  • --ch-surface
  • --ch-bg

Wrong passcode — the dot row turns danger and shakes; the entry clears for another try.

unlocking
COLDHARBOR
<LockScreen filled={6} state="unlocking" />
  • --ch-success
  • --ch-surface
  • --ch-bg

Correct passcode — dots sweep to success left to right, then the panel dismisses.

Live keypad

Interactive — tap digits to fill the dots; the sixth digit plays the unlock sweep and the panel re-locks. Backspace works; the fingerprint key is the biometric slot.

live
COLDHARBOR
<LockScreen filled={filled} state={state} onDigit={appendDigit} onBackspace={dropDigit} onBiometric={promptBiometric} />
  • --ch-surface
  • --ch-surface-raised
  • --ch-primary
  • --ch-focus

Any six digits unlock this demo.

Across themes

The idle panel under dark, light, and Harbor Mode — the monogram’s north tick re-points with the accent, so even the lock screen knows when you are on your own node.

COLDHARBOR
<LockScreen filled={0}>
  <Monogram size={48} />
</LockScreen>
  • --ch-bg
  • --ch-fg
  • --ch-accent
  • --ch-font-family-display