React View Transition

<div class="scene"><div class="guide"><span>LIST</span><span>DETAIL</span></div><div class="slot left"></div><div class="slot right"></div><div class="card" id="card"><i></i><b>Project 01</b><small id="size">preview</small></div><div class="label">same card, new location and size</div></div>

.scene{width:min(94vw,800px);height:min(86vh,320px);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:clamp(9px,2.4vmin,20px);font:500 clamp(15px,4vmin,18px)/1.3 var(--font-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif)}.scene b,.scene strong{font-weight:700}.label{color:var(--muted)}.code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.pill{border:1px solid var(--line);border-radius:8px;padding:.4em .65em;background:var(--bg)}.active{border-color:var(--accent)!important;color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 10%,var(--surface))!important}.guide{display:flex;justify-content:space-between;color:var(--muted);font:700 clamp(12px,3vmin,15px) ui-monospace,monospace}.slot{position:absolute;top:28%;height:45%;border:1px dashed var(--line);border-radius:9px}.left{left:8%;width:30%}.right{right:8%;width:48%}.card{position:absolute;top:32%;left:10%;width:26%;height:36%;background:var(--accent);color:var(--bg);border-radius:8px;padding:.5em;display:flex;flex-direction:column;justify-content:center;gap:3px;transition:all .85s cubic-bezier(.2,.7,.2,1);box-shadow:0 9px 20px #0002}.card.expanded{left:54%;top:30%;width:42%;height:41%}.card i{width:25%;height:20%;background:color-mix(in srgb,var(--bg) 30%,transparent);border-radius:3px}.card small{opacity:.8}.label{position:absolute;bottom:5%;left:0;right:0;text-align:center}

let open=false;function tick(){open=!open;document.getElementById("card").classList.toggle("expanded",open);document.getElementById("size").textContent=open?"detail":"preview"}tick();setInterval(tick,1500)