Loading page…
Loading page…
Every session starts here: monogram, display wordmark, six passcode dots, and the keypad. Passcode or Touch ID unlocks Main Vault; number keys and paste enter the same controlled value as the on-screen keypad, while Backspace or Delete correct it. A wrong code shakes the dots in danger, a right one sweeps them to success.
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.
<LockScreen filled={0}>
<Monogram size={48} />
</LockScreen>--ch-bg--ch-border-strong--ch-surface--ch-font-family-displayLocked, nothing entered — six outline dots.
<LockScreen filled={3} />--ch-fg--ch-border-strong--ch-surfaceThree of six digits — filled dots pop in on the press spring.
<LockScreen filled={6} error />--ch-danger--ch-surface--ch-bgWrong passcode — the dot row turns danger and shakes; the entry clears for another try.
<LockScreen filled={6} state="unlocking" />--ch-success--ch-surface--ch-bgCorrect passcode — dots sweep to success left to right, then the panel dismisses.
Interactive — click the panel, then type or paste digits; use Backspace/Delete to correct them. The keypad shares that same controlled value, and the sixth digit plays the unlock sweep before the demo re-locks.
<LockScreen
value={passcode}
onChange={setPasscode}
onComplete={unlock}
state={state}
onBiometric={promptBiometric}
/>--ch-surface--ch-surface-raised--ch-primary--ch-focusAny six digits unlock this demo. Keyboard and keypad can be mixed freely.
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.
<LockScreen filled={0}>
<Monogram size={48} />
</LockScreen>--ch-bg--ch-fg--ch-accent--ch-font-family-display