Aesthetic-Usability Effect

<div class="stage">
  <div class="pane">
    <div class="form ugly"><div class="f"></div><div class="f"></div><button>go</button></div>
    <div class="stars" id="s1">★☆☆☆☆</div>
  </div>
  <div class="pane">
    <div class="form nice"><div class="f"></div><div class="f"></div><button>Continue</button></div>
    <div class="stars" id="s2">★☆☆☆☆</div>
  </div>
</div>

.stage{width:94%;height:88%;display:flex;gap:6%;align-items:center}
.pane{flex:1;display:grid;justify-items:center;gap:10px}
.form{width:100%;display:grid;gap:6px}
.ugly{padding:4px}
.ugly .f{height:16px;border:1px solid #999;background:#eee}
.ugly button{border:1px solid #666;background:#ccc;padding:4px;font-size:11px}
.nice{padding:14px;border-radius:12px;background:var(--surface);border:1px solid var(--line);box-shadow:0 8px 20px rgba(0,0,0,.08)}
.nice .f{height:18px;border-radius:6px;background:var(--bg);border:1px solid var(--line)}
.nice button{border:0;border-radius:8px;background:var(--accent);color:#fff;padding:8px;font-weight:700;font-size:12px}
.stars{font-size:13px;letter-spacing:2px;color:var(--line)}
.stars.on{color:#f5a623}

const s1 = document.getElementById('s1'), s2 = document.getElementById('s2');
function anim(el, n) {
  let i = 0;
  const t = setInterval(() => {
    i++;
    el.textContent = '★'.repeat(i) + '☆'.repeat(5 - i);
    el.classList.add('on');
    if (i >= n) clearInterval(t);
  }, 220);
}
function run() {
  s1.textContent = '☆☆☆☆☆'; s2.textContent = '☆☆☆☆☆';
  setTimeout(() => anim(s1, 2), 300);
  setTimeout(() => anim(s2, 5), 300);
}
run();
setInterval(run, 3200);