Biometric Login

Форма входа с анимацией сканирования отпечатка пальца. Три этапа — ожидание, сканирование, успех. Подходит для AI интерфейсов, концептов и презентаций. Чистый HTML+CSS без JavaScript.

<div class="bio-wrap">

  <div class="bio-card">

    <div class="bio-header">
      <div class="bio-logo">> BioAuth_</div>
      <div class="bio-version">v2.4.1</div>
    </div>

    <div class="bio-title">Identity Verification</div>
    <div class="bio-sub">Place your finger on the scanner</div>

    <!-- Сканер -->
    <div class="scanner-wrap">
      <div class="scanner-ring ring-1"></div>
      <div class="scanner-ring ring-2"></div>
      <div class="scanner-ring ring-3"></div>
      <div class="scanner-core">
        <div class="scanner-icon">
          <div class="finger-top"></div>
          <div class="finger-body"></div>
          <div class="scan-line"></div>
        </div>
      </div>
      <div class="scanner-progress">
        <svg viewBox="0 0 100 100" class="progress-svg">
          <circle class="progress-track" cx="50" cy="50" r="44"/>
          <circle class="progress-fill" cx="50" cy="50" r="44"/>
        </svg>
      </div>
    </div>

    <div class="bio-status">
      <span class="status-dot-bio"></span>
      <span class="status-msg">Scanning...</span>
    </div>

    <div class="bio-divider"></div>

    <div class="bio-footer">
      <div class="bio-user">
        <div class="bio-avatar">JD</div>
        <div class="bio-user-info">
          <div class="bio-name">John Doe</div>
          <div class="bio-role">Administrator</div>
        </div>
      </div>
      <div class="bio-switch">Switch</div>
    </div>

  </div>

</div>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bio-wrap {
  font-family: monospace;
  background: #020818;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 16px;
  min-height: 480px;
}

.bio-card {
  width: 100%;
  max-width: 320px;
  background: rgba(5,12,35,0.95);
  border: 1px solid rgba(0,180,255,0.2);
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-shadow:
    0 0 0 1px rgba(0,180,255,0.05),
    0 0 40px rgba(0,100,255,0.15),
    0 20px 60px rgba(0,0,0,0.6);
}

/* Шапка */
.bio-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bio-logo {
  font-size: 13px;
  font-weight: bold;
  color: #00cfff;
}

.bio-version {
  font-size: 10px;
  color: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 2px 8px;
  border-radius: 10px;
}

.bio-title {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 0.04em;
}

.bio-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.04em;
  text-align: center;
}

/* Сканер */
.scanner-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0;
}

/* Кольца */
.scanner-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0,207,255,0.15);
}

.ring-1 { width: 160px; height: 160px; animation: ring-pulse 2s ease-in-out infinite; }
.ring-2 { width: 130px; height: 130px; animation: ring-pulse 2s ease-in-out infinite 0.3s; }
.ring-3 { width: 100px; height: 100px; animation: ring-pulse 2s ease-in-out infinite 0.6s; }

@keyframes ring-pulse {
  0%, 100% { border-color: rgba(0,207,255,0.15); transform: scale(1); }
  50%       { border-color: rgba(0,207,255,0.4);  transform: scale(1.03); }
}

/* Ядро сканера */
.scanner-core {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(0,207,255,0.05);
  border: 1px solid rgba(0,207,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Иконка пальца */
.scanner-icon {
  width: 32px;
  height: 40px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.finger-top {
  width: 20px;
  height: 20px;
  border-radius: 50% 50% 0 0;
  border: 2px solid rgba(0,207,255,0.6);
  border-bottom: none;
}

.finger-body {
  width: 24px;
  height: 18px;
  border: 2px solid rgba(0,207,255,0.6);
  border-top: none;
  border-radius: 0 0 8px 8px;
}

/* Линия сканирования */
.scan-line {
  position: absolute;
  left: -8px;
  right: -8px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00cfff, transparent);
  box-shadow: 0 0 8px #00cfff;
  animation: scan 2s ease-in-out infinite;
  top: 0;
}

@keyframes scan {
  0%   { top: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* Прогресс круг */
.scanner-progress {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.progress-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.progress-track {
  fill: none;
  stroke: rgba(0,207,255,0.08);
  stroke-width: 2;
}

.progress-fill {
  fill: none;
  stroke: #00cfff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 276;
  stroke-dashoffset: 276;
  animation:

👁 2