Add to Cart Fly
The product tile arcs from the card into the cart glyph, and the badge ticks over on arrival.
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 { useRef, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Add to Cart Fly
*
* The product tile leaves the card on an arc, shrinks into the cart
* glyph, and only then does the badge tick over — the count changesAbout this pattern
The buy moment, made legible. Pressing the buy control sends a copy of the product tile along an arc toward the cart glyph, shrinking as it goes, and the badge only changes once the tile has landed. Tying the count to an arrival rather than to the press answers the question shoppers actually ask — where did the thing I just bought go — which matters most in grids where several items are added in a row. The tile travels and shrinks; the number itself rolls and crossfades without ever changing size.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Product page
Adding from a product page bumps the cart badge as the item registers.
Related patterns
- Cart Badge CountThe cart badge rolls each changed digit in the direction of the change and settles once.
- Coupon ApplyA valid code folds into a chip, a discount line opens in the summary, and the total falls.
- Wishlist Heart FillThe heart fills from its own center on one soft settle, and drains back out on a plain ease.