희소성 효과

<div class="stage">
  <div class="pane"><div class="tag">A</div>
    <button class="btn">Add to cart</button>
    <div class="cur" id="c1">&#10148;</div>
  </div>
  <div class="pane"><div class="tag">B</div>
    <div class="urgent" id="stock">Only 4 left</div>
    <button class="btn">Add to cart</button>
    <div class="cur" id="c2">&#10148;</div>
  </div>
</div>

.stage{width:94%;height:88%;display:flex;gap:6%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;gap:8px;overflow:hidden}
.tag{position:absolute;top:8px;left:10px;font:700 11px/1 monospace;color:var(--muted)}
.btn{border:0;border-radius:9px;padding:9px 18px;background:var(--accent);color:#fff;font-weight:700;font-size:12px}
.urgent{font:800 11px/1 monospace;color:var(--accent-2);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}
.cur{position:absolute;font-size:14px;color:var(--fg);transform:rotate(-45deg)}
#c1{animation:calm 2.6s ease-in-out infinite}
#c2{animation:rush .9s ease-out infinite}
@keyframes calm{0%,100%{left:16%;top:80%}55%{left:50%;top:52%}100%{left:50%;top:52%}}
@keyframes rush{0%{left:16%;top:80%}70%,100%{left:50%;top:48%}}

const nums = [4, 3, 3, 2];
const el = document.getElementById('stock');
let i = 0;
setInterval(() => { i = (i + 1) % nums.length; el.textContent = 'Only ' + nums[i] + ' left'; }, 1500);