Bundle Savings Highlight
Items select in turn, a bracket draws down their edge, and the combined saving arrives after 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 { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Bundle Savings Highlight
*
* Three items select themselves in turn, a bracket draws down their
* left edge to say "these belong together", and the combined saving
* arrives once the grouping is established. The order is the argument:About this pattern
The block that argues three things are really one purchase. Order carries the argument: each item marks itself, a bracket strokes down their shared edge to assert the grouping, and only then does the saving appear — reveal the number first and it is a claim about nothing in particular. The tick marks are vector art and may bloom in; the prices beside them are tabular figures that never scale, because a price that pops is a price nobody trusts. One settle each, nothing repeats.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Product page
A grouped set of products shows one combined price beneath the individual items.
