Design Atlas
한국어
⌘ UX terms & laws

Scarcity Effect

희소성 효과

A signal that supply or time is limited pushes people to act now — "only 2 left in stock" is the textbook case.

Also known as: Scarcity principleUrgency
···
html
<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>
css
.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%}}
js
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);

Alongside social proof, this is one of Cialdini's six persuasion principles. Things perceived as rare or about to disappear feel more valuable in themselves — a cognitive bias that operates independent of the item's actual worth.

"Almost sold out," "sale ends at noon," a stock counter ticking down live — all the same mechanism. When the scarcity is real, it's useful information; when the counter silently resets to "2 left" on every refresh, it's a trust-destroying dark pattern.

The demo compares a plain button (A) with one carrying a shrinking stock count and countdown (B), and how urgently the cursor moves toward each.

When to use

Verify any stock or deadline figure comes from the real system state. Users quickly notice when the same "urgent" number survives a page refresh.