Upsell Slide In
A complementary item opens the layout beneath the cart instead of covering 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 { useEffect, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Upsell Slide In
*
* A complementary item opens beneath the cart summary rather than over
* it: nothing the shopper was reading is covered, nothing they wereAbout this pattern
An uninvited element gets the gentlest entrance in the library. The offer opens downward under the cart summary rather than overlaying it, so nothing the shopper was reading is covered and no control they were reaching for moves under their finger. Both answers are the same size — declining costs exactly the effort of accepting — and the subtotal answers the choice by crossfading in a fixed slot. Height is tweened, the card settles once, and nothing pulses to ask again.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Cart
Cart pages open a suggested-item row beneath the summary rather than as an overlay.
Related patterns
- Gift Card ApplyA single sheen crosses the card while the balance eases down and the amount due settles to zero.
- Variant Swatch SwitchChoosing a colorway crossfades the product while one selection ring travels to the swatch.
- Cart Badge CountThe cart badge rolls each changed digit in the direction of the change and settles once.