Connect repeat purchases and participation to meaningful rewards.
<div class="loyal"><div class="tier" id="tier">BASE</div><div class="score"><b id="points">0</b><span>/ 100 POINTS</span></div><div class="meter"><i id="fill"></i></div><small>+20 PER PURCHASE</small></div>.loyal{width:min(86%,480px);text-align:center;font:900 clamp(10px,max(1.7vmin,1vw),15px)/1.1 sans-serif}.tier{width:clamp(62px,16vmin,122px);height:clamp(62px,16vmin,122px);display:grid;place-items:center;margin:auto;border:4px solid var(--accent);border-radius:50%;color:var(--accent);font-size:clamp(11px,max(2.5vmin,1vw),22px);transition:.5s}.tier.gold{background:var(--accent-2);border-color:var(--accent-2);color:#19120d}.score{margin:clamp(10px,2.5vmin,20px)}.score b{font-size:clamp(28px,7vmin,55px)}.score span{color:var(--muted)}.meter{height:clamp(8px,2vmin,16px);background:var(--line)}.meter i{display:block;height:100%;background:var(--accent);transition:width .6s}.loyal small{display:block;margin-top:8px;color:var(--muted)}small{font-size:max(.833em,10px,1vw)}let points=0;function show(){document.querySelector('#points').textContent=points;document.querySelector('#fill').style.width=points+'%';document.querySelector('#tier').textContent=points>=100?'PLUS':'BASE';document.querySelector('#tier').classList.toggle('gold',points>=100);points=points>=100?0:points+20}show();setInterval(show,1000);A loyalty program links repeat actions to points or tier benefits. The point is to create a reason to return, not simply to accumulate a bigger number.
In the demo, each purchase adds points and crossing a threshold unlocks a tier. Real programs need clear rules for earning, using, and expiring benefits.
Rewards can raise costs without creating additional purchases. Compare incremental behavior against reward expense.
Use it to encourage repeat use while controlling reward costs.