Animated Terminal Window

<div class="term"><div class="term-bar"><span class="td r"></span><span class="td y"></span><span class="td g"></span><span class="term-t">bash</span></div><div class="term-body" id="termBody"></div></div>

body{background:#0d1426}
.term{width:380px;border-radius:12px;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.4);font-family:ui-monospace,monospace}
.term-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#22272e}
.td{width:12px;height:12px;border-radius:50%}.td.r{background:#ff5f57}.td.y{background:#febc2e}.td.g{background:#28c840}
.term-t{margin-left:8px;color:#8b949e;font-size:12px}
.term-body{background:#0d1117;padding:16px;min-height:120px;color:#c9d1d9;font-size:13px;line-height:1.8}
.term-body .pr{color:#7ee787}.term-body .cm{color:#79c0ff}
.cur{display:inline-block;width:8px;height:15px;background:#c9d1d9;animation:bl 1s steps(1) infinite;vertical-align:middle}
@keyframes bl{50%{opacity:0}}

var body=document.getElementById('termBody');
var lines=[['$ ','npm install awesome-ui'],['','added 142 packages in 3.2s'],['$ ','npm run build'],['','✓ build complete → dist/'],['$ ','']];
var li=0,ci=0;
function type(){if(li>=lines.length){body.innerHTML+='<span class="cur"></span>';return}var pr=lines[li][0],tx=lines[li][1];if(ci===0)body.innerHTML+='<div><span class="pr">'+pr+'</span><span id="cl"></span></div>';var cl=document.getElementById('cl');if(ci<tx.length){cl.textContent+=tx[ci];ci++;setTimeout(type,45)}else{cl.removeAttribute('id');li++;ci=0;setTimeout(type,400)}}
type();