Goal-Gradient Effect — Design Atlas

.card{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:72%;max-width:220px} .slot{aspect-ratio:1;border-radius:50%;border:2px dashed var(--line);display:grid;place-items:center;font:900 14px/1 monospace;color:transparent} .slot.on{border-style:solid;border-color:var(--accent);background:var(--accent);color:#fff;animation:pop .3s ease} @keyframes pop{0%{transform:scale(.5)}70%{transform:scale(1.2)}100%{transform:scale(1)}}

const card = document.getElementById('card'); const slots = []; for (let i = 0; i < 8; i++) { const s = document.createElement('div'); s.className = 'slot'; s.textContent = '☕'; card.appendChild(s); slots.push(s); } const delays = [0, 900, 1650, 2250, 2700, 3000, 3220, 3380]; function run() { slots.forEach(s => s.classList.remove('on')); delays.forEach((d, i) => setTimeout(() => slots[i].classList.add('on'), d)); } run(); setInterval(run, 4400);

Psychologist Clark Hull started this in 1932, observing that rats ran faster through a maze the closer they got to food. In 2006, Columbia's Ran Kivetz and colleagues showed the same pattern in humans with car-wash loyalty cards — a 12-stamp card that already had 2 stamps pre-filled outperformed a "fresh" 10-stamp card, even though the number of stamps actually needed was identical.

The practical upshot: **start a progress indicator partially filled rather than at 0%**, or show distance-to-goal ("3 of 10 left") instead of a raw percentage — both create stronger motivation. It pairs with the Zeigarnik Effect (the tension of unfinished work), but this one is specifically about acceleration as the goal nears.

The stamp card below fills slowly for the first two stamps, then noticeably faster toward the end.

When to use

When designing a rewards program or onboarding progress bar, consider starting it partially filled instead of at zero.