이머시브 스페이스

<div class="env" id="env"></div><div class="wn2" id="wn2"><span>Enter</span></div>

.env{position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,#5b3ad1,#0c0c1c 72%);opacity:0;transition:opacity 1.6s ease}
.env.on{opacity:1}
.wn2{position:absolute;width:150px;height:96px;border-radius:14px;background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;color:#e8e8f4;font-weight:700;font-size:13px;
  box-shadow:0 20px 40px rgba(0,0,0,.5);transition:width 1.6s ease,height 1.6s ease,border-radius 1.6s ease,opacity 1.6s ease}
.wn2.grow{width:100%;height:100%;border-radius:0;opacity:0}

const env=document.getElementById('env'), wn=document.getElementById('wn2');
function loop(){
  env.classList.remove('on'); wn.classList.remove('grow');
  setTimeout(()=>{ env.classList.add('on'); wn.classList.add('grow'); }, 1200);
  setTimeout(loop, 4200);
}
loop();