한글의 초성·중성·종성

<div class="stage">
  <div class="jamo-row">
    <span class="jamo" id="j1">ㅎ</span>
    <span class="jamo" id="j2">ㅏ</span>
    <span class="jamo" id="j3">ㄴ</span>
  </div>
  <div class="syllable" id="syl">한</div>
  <div class="formula" id="formula">0xAC00 + (18×21+0)×28+4 = 한</div>
</div>

.stage{display:grid;gap:10px;justify-items:center}
.jamo-row{display:flex;gap:10px;height:9vmin;align-items:center}
.jamo{font:700 6vmin/1 -apple-system,system-ui,"Apple SD Gothic Neo",sans-serif;color:var(--accent-2);transition:opacity .5s ease, transform .5s ease}
.jamo.merged{opacity:0;transform:translateY(14px) scale(.5)}
.syllable{font:800 15vmin/1 -apple-system,system-ui,"Apple SD Gothic Neo",sans-serif;color:var(--fg);opacity:0;transform:scale(.6);transition:opacity .5s ease, transform .5s ease}
.syllable.show{opacity:1;transform:scale(1)}
.formula{font:10px ui-monospace,Menlo,monospace;color:var(--muted);text-align:center;min-height:14px}

const CHO = ['ㄱ','ㄲ','ㄴ','ㄷ','ㄸ','ㄹ','ㅁ','ㅂ','ㅃ','ㅅ','ㅆ','ㅇ','ㅈ','ㅉ','ㅊ','ㅋ','ㅌ','ㅍ','ㅎ'];
const JUNG = ['ㅏ','ㅐ','ㅑ','ㅒ','ㅓ','ㅔ','ㅕ','ㅖ','ㅗ','ㅘ','ㅙ','ㅚ','ㅛ','ㅜ','ㅝ','ㅞ','ㅟ','ㅠ','ㅡ','ㅢ','ㅣ'];
const JONG = ['','ㄱ','ㄲ','ㄳ','ㄴ','ㄵ','ㄶ','ㄷ','ㄹ','ㄺ','ㄻ','ㄼ','ㄽ','ㄾ','ㄿ','ㅀ','ㅁ','ㅂ','ㅄ','ㅅ','ㅆ','ㅇ','ㅈ','ㅊ','ㅋ','ㅌ','ㅍ','ㅎ'];
const words = [
  { cho: 'ㅎ', jung: 'ㅏ', jong: 'ㄴ' },
  { cho: 'ㄱ', jung: 'ㅡ', jong: '' },
  { cho: 'ㅅ', jung: 'ㅐ', jong: 'ㄱ' },
];
function compose(w){
  const ci = CHO.indexOf(w.cho), vi = JUNG.indexOf(w.jung), fi = Math.max(JONG.indexOf(w.jong), 0);
  const code = 0xAC00 + (ci * 21 + vi) * 28 + fi;
  return { char: String.fromCharCode(code), code, ci, vi, fi };
}
const j1 = document.getElementById('j1');
const j2 = document.getElementById('j2');
const j3 = document.getElementById('j3');
const syl = document.getElementById('syl');
const formula = document.getElementById('formula');
let i = 0;
function step(){
  const w = words[i % words.length];
  const r = compose(w);
  j1.textContent = w.cho; j2.textContent = w.jung; j3.textContent = w.jong || '·';
  j1.classList.remove('merged'); j2.classList.remove('merged'); j3.classList.remove('merged');
  syl.classList.remove('show');
  syl.textContent = r.char;
  formula.textContent = '0xAC00 + (' + r.ci + '×21+' + r.vi + ')×28+' + r.fi + ' = ' + r.char;
  setTimeout(function(){
    j1.classList.add('merged'); j2.classList.add('merged'); j3.classList.add('merged');
    syl.classList.add('show');
  }, 700);
  i++;
}
step();
setInterval(step, 2400);