Gift Card Apply
A single sheen crosses the card while the balance eases down and the amount due settles to zero.
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 · Gift Card Apply
*
* Applying a gift code sends a single sheen across the card and eases
* the balance down to what is left, while the amount due settles toAbout this pattern
Redeeming a stored balance at checkout. The sheen is a receipt for the tap rather than decoration, so it makes exactly one pass and never loops. The figures ease rather than spring: an amount of money that overshoots shows a value the customer was never charged, however briefly, so the balance and the amount due are tweened with tabular figures that keep their width, weight and baseline the whole way. The credit row opens beneath the order total as the count runs, which is what ties the two numbers together.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Checkout
Redeeming a card animates the stored balance down to its new value on the card face.
Related patterns
- Variant Swatch SwitchChoosing a colorway crossfades the product while one selection ring travels to the swatch.
- Address AutocompleteChoosing a suggestion closes the list from the bottom up and fills the fields in reading order.
- Upsell Slide InA complementary item opens the layout beneath the cart instead of covering it.