The Timer component displays a visible countdown before a biometric capture event. It prepares users for the moment of capture, reducing failed attempts caused by user unreadiness.
Anatomy
0:45
The countdown ring drains as time passes. The component always renders dark-on-dark regardless of page mode — its surface, border, and text are static tokens.
Tokens
TokenRoleLayer
--timer-surfaceCell backgroundComponent--timer-borderCell border colorComponent--timer-textDigit text colorComponent--timer-font-sizeDigit font sizeComponent--radius-timerCell corner radiusSemanticComponent tokens
The color tokens for this component live in Color → Tokens, and its spacing, radius, and type map to the shared foundation scales.