Laser Scanner Beam Input Field

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="laser-input-632"><input type="text" placeholder="Passcode..."><div class="beam"></div></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.laser-input-632 { position: relative; width: 190px; margin: auto; overflow: hidden; border-radius: 8px; }
.laser-input-632 input { width: 100%; background: #18181b; border: 1px solid #3f3f46; border-radius: 8px; padding: 10px 14px; font-family: monospace; font-size: 10px; color: #38bdf8; outline: none; box-sizing: border-box; }
.laser-input-632 .beam { position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.4), transparent); pointer-events: none; animation: scan-beam-632 2.5s infinite; }
@keyframes scan-beam-632 { 0% { left: -100%; } 100% { left: 200%; } }