OTP Verification

<!-- one ring, four boxes -->
<span class="code__cursor"></span>

<label class="slot">
  <input inputmode="numeric"
         autocomplete="one-time-code">
  <span class="slot__win">
    <span class="slot__digit"></span>
  </span>
  <svg class="slot__spark">
    <rect pathLength="1"/>
  </svg>
</label>

/* the dash IS the electron:
one lit segment on a dark track,
chased around the border by dashoffset */
.slot__arc {
  stroke-dasharray: .13 .87;
  stroke-dashoffset: 1;
}

/* the ring glides, not blinks */
.code__cursor {
  transition: transform .46s;
}

// FLIP: measure every box,
// fly it to the row centre,
// outermost pair leaving first
const dx = cx - (r.left + r.width / 2);

slot.animate([
  { transform: 'none' },
  { transform: `translate(${dx}px) scale(.34)` }
], { 
  delay, 
  duration: 640 
});