Shipping Option Select
One plate travels to the chosen speed while the arrival estimate restates itself and the total follows.
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 { useId, useState } from "react";
import type { KeyboardEvent as ReactKeyboardEvent } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Shipping Option Select
*
* One plate travels to the speed you picked while the arrival dateAbout this pattern
Choosing a delivery speed changes three things, and they have to agree. A single marker plate travels to the picked row on a shared layout animation rather than one plate fading out while another fades in, so the eye never loses the selection. The arrival sentence restates itself inside a fixed cell, which means a longer estimate cannot push the total around. The total rolls in the direction the money went — up for a faster speed, down for a slower one — at a constant type size. Arrow keys move the selection, and the plate travels for keyboard users too.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Checkout
Changing the delivery speed restates the promised date above the order summary.
Related patterns
- Cart Item RemoveA removed line collapses its own height and gap while the survivors travel up and the total falls.
- Order Tracking ProgressA shipment walks its stages while the connector fills from stop to stop.
- Cart Quantity StepperStepping the quantity rolls the count and both totals in the direction of the change.