밀러의 법칙

<div class="stack">
  <div class="row"><span class="tag">A</span><div class="digits" id="d1">8195556423</div></div>
  <div class="row"><span class="tag">B</span><div class="digits chunked"><b>819</b><i>-</i><b>555</b><i>-</i><b>6423</b></div></div>
</div>

.stack{width:90%;display:grid;gap:26px}
.row{position:relative;display:flex;align-items:center;gap:14px}
.tag{font:700 11px/1 monospace;color:var(--muted);width:14px}
.digits{position:relative;font:700 clamp(16px,4.4vmin,26px)/1 monospace;letter-spacing:.12em;color:var(--muted);display:flex}
.digits span.hl{color:var(--fg)}
.chunked b{color:var(--fg);padding:2px 4px;border-radius:4px;animation:pulse 2.4s ease-in-out infinite}
.chunked b:nth-child(1){animation-delay:0s}
.chunked b:nth-child(3){animation-delay:.5s}
.chunked b:nth-child(5){animation-delay:1s}
.chunked i{color:var(--line);font-style:normal;padding:0 2px}
@keyframes pulse{0%,60%,100%{background:transparent}20%,40%{background:var(--accent);color:var(--surface);border-radius:4px}}

const d1 = document.getElementById('d1');
d1.innerHTML = d1.textContent.split('').map(c => '<span>' + c + '</span>').join('');
const spans = [...d1.children];
let i = 0;
setInterval(() => { spans.forEach(s => s.classList.remove('hl')); spans[i % spans.length].classList.add('hl'); i++; }, 240);