캔버스 아티팩트

<div class="split">
  <div class="chat">
    <div class="msg">헤더 컴포넌트 만들어줘</div>
    <div class="msg ai">오른쪽에 만들었어요</div>
    <div class="msg" id="m2" data-hide>패딩 좀 더 넉넉하게</div>
  </div>
  <div class="panel" id="panel">
    <div class="pbar"><span>Header.tsx</span><i class="v">v1</i></div>
    <pre id="code">function Header() {
  return (
    &lt;header&gt;
      &lt;Logo /&gt;
    &lt;/header&gt;
  );
}</pre>
  </div>
</div>

.split{width:100%;height:100%;display:grid;grid-template-columns:34% 66%}
.chat{padding:12px 10px;display:grid;align-content:start;gap:7px;border-right:1px solid var(--line);overflow:hidden}
.msg{font-size:10.5px;padding:6px 8px;border-radius:9px;background:var(--surface);border:1px solid var(--line);color:var(--fg);justify-self:end;max-width:96%}
.msg.ai{justify-self:start;background:var(--bg)}
.msg[data-hide]{opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.msg[data-hide][data-show]{opacity:1;transform:none}
.panel{padding:10px 12px;overflow:hidden;display:grid;align-content:start;gap:8px}
.pbar{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;color:var(--muted);font-weight:600}
.v{font-style:normal;background:var(--line);color:var(--fg);padding:1px 7px;border-radius:999px;font-size:9.5px}
pre{margin:0;font-family:ui-monospace,monospace;font-size:10.5px;line-height:1.6;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:10px;transition:padding .3s}

const m2 = document.getElementById('m2'), code = document.getElementById('code'), v = document.querySelector('.v');
const v1 = code.textContent;
const v2 = v1.replace('<header>', '<header style={{ padding: 24 }}>');
function run() {
  code.textContent = v1; v.textContent = 'v1'; m2.removeAttribute('data-show');
  setTimeout(() => m2.setAttribute('data-show', ''), 700);
  setTimeout(() => { code.textContent = v2; v.textContent = 'v2'; }, 1300);
}
run();
setInterval(run, 4200);