Urgency copy

긴급성 카피

Make a real deadline and remaining decision time clear.

···
html
<div class="deadline"><div class="fake">HURRY! <span>00:00:09</span></div><div class="real"><small>APPLICATION WINDOW</small><b>Closes Friday at 18:00</b><i></i><p>Plan your application before the stated cutoff.</p></div></div>
css
.deadline{width:84%;max-width:600px;font-family:sans-serif}.fake{display:flex;justify-content:space-between;color:var(--muted);font:800 clamp(10px,max(2vmin,1vw),17px) sans-serif;text-decoration:line-through;animation:fade 5s infinite}.real{padding:clamp(10px,2.5vmin,23px);margin-top:clamp(7px,2vmin,20px);background:var(--surface);border:2px solid var(--accent);animation:up 5s infinite}.real small{display:block;color:var(--accent);font:900 clamp(10px,max(1.5vmin,1vw),12px) sans-serif;letter-spacing:.1em}.real b{display:block;margin:.3em 0;font:850 clamp(17px,4vmin,37px)/1.1 sans-serif}.real i{display:block;width:85%;height:5px;background:var(--accent);animation:clock 5s infinite}.real p{margin:.6em 0 0;color:var(--muted);font:650 clamp(10px,max(1.9vmin,1vw),16px) sans-serif}@keyframes fade{0%,25%{opacity:1}45%,85%{opacity:.3}100%{opacity:1}}@keyframes up{0%,25%{opacity:.4;transform:translateY(5px)}45%,85%{opacity:1;transform:none}100%{opacity:.4;transform:translateY(5px)}}@keyframes clock{0%{width:90%}85%{width:35%}100%{width:90%}}@media(min-width:700px){body > *{transform:scale(1.4)}.lines p,.branches div,.cards div{cursor:pointer}}

Urgency copy helps people act on a real deadline or limited capacity. A resettable countdown creates pressure without earning trust.

The demo contrasts a generic rush message with a dated application deadline. If the deadline changes, update the copy with it.

When to use

Use it only when registration or sale availability truly has a deadline.

Open as page ↗