Biometric Scanner

Stable

Interactive biometric authentication sensor featuring a continuous optical laser sweep beam, radial progress telemetry, feature nodal locks, and fingerprint, retina, facial, or DNA scan modes.

Installation

$pnpm add @siberui/react

Import

tsx
import { BiometricScanner } from '@siberui/react';

Basic Usage & Optical Laser Scanner

Click-to-trigger optical biometric reader with continuous laser hairline beam traversal and telemetry readout.

PRIMARY BIOMETRIC SENSOR[OPT.01]
CLICK TO SCAN
tsx
<BiometricScanner
  mode="fingerprint"
  label="PRIMARY BIOMETRIC SENSOR"
  signal="cyan"
  onScanComplete={(success) => console.log('Scan result:', success)}
/>

Sensor Modes (Fingerprint, Retina, Facial, DNA)

Select one of 4 dedicated biometric authentication vectors via mode: "fingerprint", "retina", "facial", or "dna".

FINGERPRINT SENSOR[OPT.01]
CLICK TO SCAN
RETINAL OCULAR SCAN[OPT.02]
CLICK TO SCAN
FACIAL TOPOLOGY[OPT.03]
CLICK TO SCAN
DNA HELIX SEQUENCER[OPT.04]
CLICK TO SCAN
tsx
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 w-full">
  <BiometricScanner mode="fingerprint" signal="cyan" label="FINGERPRINT SENSOR" />
  <BiometricScanner mode="retina" signal="violet" label="RETINAL OCULAR SCAN" />
  <BiometricScanner mode="facial" signal="green" label="FACIAL TOPOLOGY" />
  <BiometricScanner mode="dna" signal="amber" label="DNA HELIX SEQUENCER" />
</div>

Interaction Mechanics (Click vs Hold-to-Scan)

Set triggerType="hold" to require continuous press-and-hold interaction to fill the verification progress buffer. Releasing early aborts the scan.

CLICK TO TRIGGER[OPT.02]
CLICK TO SCAN
HOLD TO VERIFY (2.4s)[OPT.01]
HOLD TO SCAN
tsx
<div className="flex flex-col sm:flex-row gap-8 items-center justify-center w-full">
  <BiometricScanner
    mode="retina"
    triggerType="click"
    signal="cyan"
    label="CLICK TO TRIGGER"
  />

  <BiometricScanner
    mode="fingerprint"
    triggerType="hold"
    holdDuration={2400}
    signal="amber"
    label="HOLD TO VERIFY (2.4s)"
  />
</div>

Composite Level-5 Security Checkpoint

Composite mission defense checkpoint embedding biometric telemetry inside a ChamferCard housing.

AIR-LOCK // GATE_04

CLEARANCE CHECKPOINT

LEVEL-5

Present physical biometric verification to disengage orbital lockdown.

RETINA VALIDATION NODE[OPT.02]
CLICK TO SCAN
STATUS:WAITING_FOR_BIOMETRIC
tsx
<ChamferCard signal="cyan" glow tag="AIR-LOCK // GATE_04" statusDot="cyan" className="max-w-md mx-auto w-full">
  <ChamferCardHeader>
    <div className="flex items-center justify-between">
      <div className="flex items-center gap-2">
        <ShieldCheck className="h-4 w-4 text-cyan-400" />
        <ChamferCardTitle>CLEARANCE CHECKPOINT</ChamferCardTitle>
      </div>
      <Badge variant="glass" dot dotColor="cyan">LEVEL-5</Badge>
    </div>
    <ChamferCardDescription>
      Present physical biometric verification to disengage orbital lockdown.
    </ChamferCardDescription>
  </ChamferCardHeader>

  <ChamferCardContent className="flex flex-col items-center justify-center py-4">
    <BiometricScanner
      mode="retina"
      signal="cyan"
      label="RETINA VALIDATION NODE"
      onScanComplete={(success) => setAuthStatus(success ? 'ACCESS_GRANTED // OVERRIDE_OK' : 'ACCESS_DENIED // RE-SCAN')}
    />
  </ChamferCardContent>

  <ChamferCardFooter className="flex items-center justify-between text-xs font-mono">
    <span className="text-slate-400">STATUS:</span>
    <span className={authStatus.includes('GRANTED') ? 'text-emerald-400 font-bold' : 'text-cyan-400'}>
      {authStatus}
    </span>
  </ChamferCardFooter>
</ChamferCard>

API Reference

PROPERTIES (7)← swipe to inspect →
PropertyDescriptionTypeDefault
mode
Biometric vector graphic model ("fingerprint", "retina", "facial", "dna").
"fingerprint" | "retina" | "facial" | "dna"
"fingerprint"
triggerType
Trigger mechanism: one-tap timed scan vs continuous press-and-hold.
"click" | "hold"
"click"
signal
Laser beam, progress halo, and HUD telemetry accent color.
"cyan" | "violet" | "green" | "amber" | "rose"
"cyan"
scanDuration
Total duration for click-mode verification in milliseconds.
number
1500
holdDuration
Required hold time for hold-mode verification in milliseconds.
number
1200
simulatedSuccessRate
Probability of successful scan resolution (0.0 to 1.0).
number
1.0
onScanComplete
Callback fired when scan sequence finishes with boolean success outcome.
(success: boolean) => void
-

Accessibility

  • Keyboard Trigger: Fully interactive via keyboard focus with Space or Enter keys.
  • Screen Readers: Live status updates are announced politely via aria-live="polite".