Scarcity effect

희소성 효과

A genuinely limited supply can shift when people decide.

···
html
<div class="stock"><div class="head"><b>WORKSHOP SEATS</b><span><em id="left">04</em> LEFT</span></div><div class="seats"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="foot">BOOKINGS UPDATE AVAILABILITY</div></div>
css
@media(min-width:700px){body>div{transform:scale(1.45)}}.stock{width:min(86%,470px);font:800 clamp(10px,max(2vmin,1vw),16px)/1.2 sans-serif}.head{display:flex;justify-content:space-between;align-items:center;gap:10px}.head span{background:var(--accent);color:white;padding:6px 9px;white-space:nowrap}.head em{font-style:normal}.seats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(5px,2vmin,12px);margin:clamp(14px,4vmin,30px) 0}.seats i{height:clamp(22px,7vmin,52px);background:var(--line);border-radius:6px 6px 2px 2px;transition:background .3s,transform .3s}.seats i.free{background:var(--accent-2);transform:translateY(-3px)}.foot{border-top:2px solid var(--fg);padding-top:8px;color:var(--muted);letter-spacing:.06em;font-size:clamp(10px,max(1.5vmin,1vw),12px)}
js
const seats=[...document.querySelectorAll('.seats i')];const label=document.querySelector('#left');let count=4;function paint(){seats.forEach((seat,i)=>seat.classList.toggle('free',i>=8-count));label.textContent=String(count).padStart(2,'0')}paint();setInterval(()=>{count=count<=1?4:count-1;paint()},1100);

Scarcity can make a limited resource feel more valuable or urgent. A limitation matters most when its cause is clear, such as genuine stock or available seats.

In the demo, a booking changes both the seat grid and remaining count. The important mechanism is that the message reflects actual availability rather than an arbitrary countdown.

Avoid fabricated counts and timers that reset without cause. Show cancellation terms and restock possibilities when they matter to the decision.

When to use

Show availability only when seats or stock are genuinely constrained.

Open as page ↗