Loyalty Card Complete
The final punch lands on a loyalty card, the card lifts, and a reward strip unfolds beneath it.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Loyalty Card Complete
*
* The completion beat of a punch-card loyalty program. Seven stamps
* fade in on a short stagger, the eighth lands on a single
* over-damped spring with one soft settle, the card lifts on anAbout this pattern
The completion beat of a punch-card program, at home in a wallet, at checkout, or on a post-purchase screen. Seven stamps fade in on a short stagger as context; the eighth is the event and lands on the file's only spring, over-damped so it settles once with no wobble. The card then lifts on an eased shift and the reward strip expands by height tween, because an opening is really a size change and springs would overshoot it. The reward copy never moves and never scales, it only fades in after the strip is still. What keeps it calm is that every beat is single and finite: one spring, two tweens, then the composition holds. Under reduced motion the order survives and the travel goes: the stamp simply appears and the strip simply opens.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Achievements
A wallet card takes its final punch: the stamp lands, the card lifts, and the earned-reward strip unfolds beneath it.
- Order receipt
The receipt's loyalty panel completes its last punch before the reward line unfolds under the card.
Related patterns
- Podium RevealA podium settles at the close of a contest: the winner rises onto the top step on one spring while a spotlight ring lands beneath them.
- Reward ClaimClaiming moves the voucher out of the offer and into the wallet, whose count ticks as it lands.
- Points EarnA credit chip lifts off the activity that earned it and the balance absorbs it on arrival.