와이어프레임

<div class="stage">
  <div class="frame" id="frame">
    <div class="badge" id="badge">WIREFRAME</div>
    <div class="nav"><span class="dot"></span></div>
    <div class="hero"><div class="x"></div></div>
    <div class="lines">
      <div class="ln w1"></div>
      <div class="ln w2"></div>
      <div class="ln w3"></div>
    </div>
    <button class="cta" id="cta">Continue</button>
  </div>
</div>

.stage{width:76%;height:92%;max-width:320px}
.frame{position:relative;width:100%;height:100%;border:1px solid var(--line);border-radius:12px;background:var(--surface);
  padding:7% 7%;box-sizing:border-box;display:flex;flex-direction:column;gap:5%;overflow:hidden}
.badge{position:absolute;top:8px;right:10px;font:700 9px/1 monospace;color:var(--muted);letter-spacing:.04em}
.nav{height:9%;border-radius:4px;background:var(--line);display:flex;align-items:center;padding:0 8px;transition:background .5s}
.dot{width:10px;height:10px;border-radius:50%;background:var(--muted);opacity:.4;transition:.5s}
.hero{position:relative;flex:1;border-radius:6px;background:var(--line);overflow:hidden;transition:background .6s}
.x{position:absolute;inset:0;transition:opacity .5s}
.x::before,.x::after{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--muted)}
.x::before{transform:rotate(21deg)}
.x::after{transform:rotate(-21deg)}
.lines{display:flex;flex-direction:column;gap:8%}
.ln{height:11%;border-radius:3px;background:var(--line);transition:background .5s,opacity .5s}
.ln.w1{width:100%}.ln.w2{width:82%}.ln.w3{width:56%}
.cta{height:14%;border-radius:4px;background:var(--line);border:none;color:transparent;font:700 12px/1 sans-serif;transition:all .5s;display:grid;place-items:center}
.frame.hi .nav{background:var(--surface);box-shadow:inset 0 -1px 0 var(--line)}
.frame.hi .dot{background:var(--accent);opacity:1}
.frame.hi .hero{background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.frame.hi .x{opacity:0}
.frame.hi .ln{background:var(--fg);opacity:.65}
.frame.hi .cta{background:var(--accent);color:#fff;border-radius:20px}

const frame = document.getElementById('frame');
const badge = document.getElementById('badge');
let hi = false;
function toggle() {
  hi = !hi;
  frame.classList.toggle('hi', hi);
  badge.textContent = hi ? 'MOCKUP' : 'WIREFRAME';
}
setInterval(toggle, 2200);