Reward Claim
Claiming moves the voucher out of the offer and into the wallet, whose count ticks as it lands.
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 { useEffect, useRef, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Reward Claim
*
* Pressing claim does not make a reward appear out of nowhere — it moves
* the one already on screen into the place rewards are kept. The voucherAbout this pattern
Pressing claim does not conjure a reward — it relocates the one already on screen. The voucher leaves the offer on a shallow arc, and the wallet count ticks at the moment it arrives rather than on the press, so the number changes because something landed in it. Three details keep it honest. The voucher only translates and fades: it carries an amount, and an amount that shrinks on its way across the screen stops being money and starts being a particle. The slot it leaves keeps its size, so nothing in the card jumps as the reward goes. And the action crossfades between a literal accent fill and a theme-derived resting surface using two stacked layers, because those two colours cannot be interpolated by any engine. The wallet acknowledges the arrival with one tint that comes up and goes again — not a bounce, and not a flash.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Achievements
A redeemable offer moving into the rewards wallet with the balance updating on arrival.
Related patterns
- Points EarnA credit chip lifts off the activity that earned it and the balance absorbs it on arrival.
- Loyalty Card CompleteThe final punch lands on a loyalty card, the card lifts, and a reward strip unfolds beneath it.
- Daily Goal MetThe day's tile turns over from its running total to its completed face.