About this snippet

A dark panel holding a wireframe face, four corner brackets and a green line that sweeps up and down across it, under an authenticating label that pulses.

The sweep is one keyframe animating translateY from above the box to below it, set to alternate so it reverses rather than jumping back to the start. The panel has overflow hidden, and that is what crops the line at the edges and sells the idea of it passing through a fixed window.

The glow is a box-shadow with a wide blur and spread on the line, plus a drop-shadow filter on the SVG face. The brackets are four squares with transparent borders and only two sides colored on each. This is presentation only, so treat it as the visual layer over whatever authentication you actually run.

Size
2.8 KB
Uses
HTML, CSS
Loads
Nothing external
Views
171

Collections

Related snippets

<div class="scanner-container">
  <div class="scanner-box">
    <div class="scan-line"></div>
    <svg class="face-wireframe" viewBox="0 0 24 24" width="120" height="120" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
      <path d="M9 3v2"></path>
      <path d="M15 3v2"></path>
      <path d="M3 9h2"></path>
      <path d="M19 9h2"></path>
      <path d="M5 19h14"></path>
      <path d="M9 15h6"></path>
      <circle cx="12" cy="12" r="9"></circle>
      <circle cx="9" cy="10" r="1"></circle>
      <circle cx="15" cy="10" r="1"></circle>
    </svg>
    <div class="corners">
      <div class="corner top-left"></div>
      <div class="corner top-right"></div>
      <div class="corner bottom-left"></div>
      <div class="corner bottom-right"></div>
    </div>
  </div>
  <h3 class="auth-text">Authenticating...</h3>
</div>
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin: 0;
  background: #020617;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.scanner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.scanner-box {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(15, 23, 42, 0.5);
  box-shadow: 0 0 40px rgba(59, 130, 246, 0.1);
}

.face-wireframe {
  color: #3b82f6;
  opacity: 0.5;
  filter: drop-shadow(0 0 8px #3b82f6);
}

.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #10b981;
  box-shadow: 0 0 20px 5px rgba(16, 185, 129, 0.6);
  z-index: 10;
  animation: scan 2.5s ease-in-out infinite alternate;
}

@keyframes scan {
  0% { transform: translateY(-10px); }
  100% { transform: translateY(210px); }
}

.corners .corner {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 3px solid transparent;
  border-radius: 4px;
}

.top-left {
  top: 10px;
  left: 10px;
  border-top-color: #3b82f6;
  border-left-color: #3b82f6;
}

.top-right {
  top: 10px;
  right: 10px;
  border-top-color: #3b82f6;
  border-right-color: #3b82f6;
}

.bottom-left {
  bottom: 10px;
  left: 10px;
  border-bottom-color: #3b82f6;
  border-left-color: #3b82f6;
}

.bottom-right {
  bottom: 10px;
  right: 10px;
  border-bottom-color: #3b82f6;
  border-right-color: #3b82f6;
}

.auth-text {
  color: #94a3b8;
  margin: 0;
  font-size: 1.125rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  animation: pulse-text 1.5s infinite alternate;
}

@keyframes pulse-text {
  0% { opacity: 0.5; }
  100% { opacity: 1; color: #3b82f6; text-shadow: 0 0 10px rgba(59, 130, 246, 0.5); }
}

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save