Animated OTP Verification

<div class="otp-card" id="otpCard">
  <span class="handle"></span>
  <div class="glow"></div>

  <div class="heading">
    <h1 class="title" id="otpTitle">Let's verify your number</h1>
    <p class="subtitle" id="otpSubtitle">We've sent a 4-digit code to your phone.<br>It'll auto-verify once entered.</p>
  </div>

  <div class="stage">
    <div class="otp-inputs" id="otpInputs">
      <input class="otp-box" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="1" aria-label="Digit 1">
      <input class="otp-box" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 2">
      <input class="otp-box" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 3">
      <input class="otp-box" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 4">
    </div>

    <div class="success" id="otpSuccess" aria-hidden="true">
      <svg viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5" /></svg>
    </div>
  </div>

  <p class="resend">
    Didn't receive the code?
    <button type="button" id="otpResend">Resend</button>
  </p>
</div>

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: #000;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #fff;
}

/* ---------- Carte ---------- */
.otp-card {
  position: relative;
  width: min(360px, 92vw);
  padding: 40px 28px 30px;
  border-radius: 30px;
  background: linear-gradient(180deg, #1c1c1c 0%, #121212 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .05);
  text-align: center;
  overflow: hidden;
  animation: card-in .7s cubic-bezier(.2, .9, .3, 1.2) both;
}

.handle {
  position: absolute;
  top: 12px;
  left: 50%;
  width: 38px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .15);
  transform: translateX(-50%);
}

/* Halo vert qui apparaît après la validation */
.glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 62%, rgba(34, 197, 94, .28), transparent 55%);
  opacity: 0;
  transition: opacity .8s ease;
  pointer-events: none;
}
.otp-card.is-verified .glow { opacity: 1; }

/* ---------- Textes ---------- */
.heading { position: relative; }

.title {
  margin: 8px 0 10px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.subtitle {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #6f6f6f;
}

.title, .subtitle { transition: opacity .3s ease, transform .3s ease, filter .3s ease; }
.heading.is-swapping .title,
.heading.is-swapping .subtitle { opacity: 0; transform: translateY(-6px); filter: blur(4px); }

/* ---------- Cases du code ---------- */
.stage {
  position: relative;
  height: 64px;
  margin: 38px 0 34px;
}

.otp-inputs {
  display: flex;
  justify-content: center;
  gap: 12px;
  transition: opacity .35s ease, transform .45s cubic-bezier(.6, -.3, .4, 1);
}

.otp-box {
  width: 54px;
  height: 58px;
  border-radius: 14px;
  border: 1.5px solid #3a3a3a;
  background: #181818;
  color: #fff;
  font-family: inherit;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  caret-color: #fb923c;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
  animation: box-in .5s cubic-bezier(.2, .9, .3, 1.3) both;
}
.otp-box:nth-child(1) { animation-delay: .15s; }
.otp-box:nth-child(2) { animation-delay: .22s; }
.otp-box:nth-child(3) { animation-delay: .29s; }
.otp-box:nth-child(4) { animation-delay: .36s; }

/* Case active : contour orange lumineux */
.otp-box:focus {
  border-color: #f97316;
  background: #1d1714;
  box-shadow: 0 0 0 4px rgba(249, 115, 22, .14), 0 0 22px rgba(249, 115, 22, .25);
}

.otp-box.is-filled { border-color: #4a4a4a; }
.otp-box.pop { animation: pop .28s cubic-bezier(.3, 1.6, .5, 1); }

/* Code incomplet : petite secousse */
.otp-inputs.shake { animation: shake .4s ease; }

/* Validation : les cases se rassemblent puis disparaissent */
.otp-card.is-checking .otp-box { border-color: #f97316; box-shadow: 0 0 18px rgba(249, 115, 22, .25); }
.otp-card.is-verified .otp-inputs { opacity: 0; transform: scale(.4); pointer-events: none; }

/* ---------- Coche de succès ---------- */
.success {
  position: absolute;
  top: 0;
  left: 50%;
  width: 60px;
  height: 60px;
  margin-left: -30px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  border: 1.5px solid #22c55e;
  background: #141a15;
  box-shadow: 0 0 0 5px rgba(34, 197, 94, .1), 0 0 34px rgba(34, 197, 94, .45);
  opacity: 0;
  transform: scale(.3) rotate(-25deg);
  transition: opacity .4s ease .25s, transform .55s cubic-bezier(.2, 1.4, .4, 1) .25s;
}
.success svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}
.otp-card.is-verified .success { opacity: 1; transform: scale(1) rotate(0); }
.otp-card.is-verified .success svg { animation: draw .45s ease .7s forwards; }

/* ---------- Renvoyer le code ---------- */
.resend {
  position: relative;
  margin: 0;
  font-size: 13px;
  color: #6f6f6f;
}
.resend button {
  margin-left: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.resend button:disabled { color: #555; cursor: default; }
.resend button:not(:disabled):hover { text-decoration: underline; }

/* ---------- Animations ---------- */
@keyframes card-in {
  from { opacity: 0; transform: translateY(24px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes box-in {
  from { opacity: 0; transform: translateY(14px) scale(.85); }
  to { opacity: 1; transform: none; }
}
@keyframes pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.14); }
  100% { transform: scale(1); }
}
@keyframes shake {
  20%, 60% { transform: translateX(-7px); }
  40%, 80% { transform: translateX(7px); }
}
@keyframes draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

// Animated OTP Verification — vanilla JS (aucune bibliothèque)
const card = document.getElementById('otpCard');
const boxes = [...document.querySelectorAll('.otp-box')];
const inputsWrap = document.getElementById('otpInputs');
const heading = document.querySelector('.heading');
const title = document.getElementById('otpTitle');
const subtitle = document.getElementById('otpSubtitle');
const resendBtn = document.getElementById('otpResend');

const LENGTH = boxes.length;
let timer = null;

const code = () => boxes.map((b) => b.value).join('');

function setDigit(box, value) {
  box.value = value;
  box.classList.toggle('is-filled', value !== '');
  if (value) {
    box.classList.remove('pop');
    void box.offsetWidth; // relance l'animation
    box.classList.add('pop');
  }
}

function focusBox(index) {
  const box = boxes[Math.max(0, Math.min(LENGTH - 1, index))];
  box.focus();
  box.select();
}

function swapText(newTitle, newSubtitle) {
  heading.classList.add('is-swapping');
  setTimeout(() => {
    title.textContent = newTitle;
    subtitle.textContent = newSubtitle;
    heading.classList.remove('is-swapping');
  }, 300);
}

function verify() {
  if (code().length !== LENGTH) return;
  card.classList.add('is-checking');
  boxes.forEach((b) => b.blur());

  // Simulation de l'appel au serveur (remplacez par votre API).
  setTimeout(() => {
    card.classList.remove('is-checking');
    card.classList.add('is-verified');
    swapText('Verified successfully', 'Your phone number has been verified.');
  }, 650);
}

boxes.forEach((box, i) => {
  box.addEventListener('input', () => {
    const digits = box.value.replace(/\D/g, '');
    if (!digits) { setDigit(box, ''); return; }
    // Plusieurs chiffres d'un coup (saisie automatique du SMS) : on répartit.
    [...digits].slice(0, LENGTH - i).forEach((d, k) => setDigit(boxes[i + k], d));
    const next = Math.min(i + digits.length, LENGTH - 1);
    if (code().length === LENGTH) verify(); else focusBox(next);
  });

  box.addEventListener('keydown', (e) => {
    if (e.key === 'Backspace' && !box.value && i > 0) {
      e.preventDefault();
      setDigit(boxes[i - 1], '');
      focusBox(i - 1);
    } else if (e.key === 'ArrowLeft') {
      e.preventDefault(); focusBox(i - 1);
    } else if (e.key === 'ArrowRight') {
      e.preventDefault(); focusBox(i + 1);
    } else if (e.key === 'Enter' && code().length < LENGTH) {
      inputsWrap.classList.remove('shake'); void inputsWrap.offsetWidth; inputsWrap.classList.add('shake');
    }
  });

  box.addEventListener('focus', () => box.select());

  box.addEventListener('paste', (e) => {
    e.preventDefault();
    const digits = (e.clipboardData.getData('text') || '').replace(/\D/g, '').slice(0, LENGTH);
    digits.split('').forEach((d, k) => setDigit(boxes[k], d));
    if (code().length === LENGTH) verify(); else focusBox(digits.length);
  });
});

// « Resend » : remise à zéro + compte à rebours de 30 s.
function startCountdown(seconds) {
  clearInterval(timer);
  let left = seconds;
  resendBtn.disabled = true;
  resendBtn.textContent = `Resend in ${left}s`;
  timer = setInterval(() => {
    left -= 1;
    if (left <= 0) {
      clearInterval(timer);
      resendBtn.disabled = false;
      resendBtn.textContent = 'Resend';
    } else {
      resendBtn.textContent = `Resend in ${left}s`;
    }
  }, 1000);
}

resendBtn.addEventListener('click', () => {
  const wasVerified = card.classList.contains('is-verified');
  card.classList.remove('is-verified', 'is-checking');
  boxes.forEach((b) => setDigit(b, ''));
  if (wasVerified) swapText("Let's verify your number", "We've sent a 4-digit code to your phone.\nIt'll auto-verify once entered.");
  setTimeout(() => focusBox(0), wasVerified ? 450 : 0);
  startCountdown(30);
});

subtitle.style.whiteSpace = 'pre-line';
setTimeout(() => focusBox(0), 500);