▸
Motivation
Goal-Gradient Effect
The tendency to approach a goal increases with proximity to the goal.
Key Principles
- 1Show users how close they are to completing a task.
- 2Give users a head start (endowed progress) to increase motivation.
- 3Use progress bars that show real advancement.
- 4Accelerate the experience as users near completion.
Try It
Click each level to see how proximity to the goal affects motivation.
StartGoal
No progress yet — motivation is lowest at the start.
Code Pattern
tsx
1// ✅ Good: Loyalty card with endowed progress
2function LoyaltyCard({ stamps }: { stamps: number }) {
3 const total = 10;
4 const endowed = 2; // Free head start
5 const progress = stamps + endowed;
6
7 return (
8 <div>
9 <p className="text-sm mb-2">
10 {progress} of {total} stamps — {total - progress} to go!
11 </p>
12 <div className="flex gap-1">
13 {Array.from({ length: total }).map((_, i) => (
14 <div
15 key={i}
16 className={`w-8 h-8 rounded-full border-2 ${
17 i < progress
18 ? "bg-amber-500 border-amber-600"
19 : "border-gray-300"
20 }`}
21 />
22 ))}
23 </div>
24 </div>
25 );
26}Endowed progress (a head start) significantly increases completion rates.