Coupon Apply
A valid code folds into a chip, a discount line opens in the summary, and the total falls.
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 · Coupon Apply
*
* A valid code stops being something you typed and becomes something you
* have: the field folds into a chip, a discount line opens in theAbout this pattern
Three things have to happen the moment a code is accepted, and they have to happen in an order the eye can follow. The field crossfades into a chip in the same row, so nothing below it jumps; a discount line opens under the subtotal on a short eased height tween; and the total rolls downward — the new figure arriving from above and pushing the old one out of the slot, at a constant type size. Removing the code reverses all three. The chip carries its own remove control, which means the code stops being text you have to retype and becomes an object you can take off.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Checkout
An accepted code becomes a removable chip and adds its own line to the summary.
Related patterns
- Add to Cart FlyThe product tile arcs from the card into the cart glyph, and the badge ticks over on arrival.
- Wishlist Heart FillThe heart fills from its own center on one soft settle, and drains back out on a plain ease.
- Cart Quantity StepperStepping the quantity rolls the count and both totals in the direction of the change.