Monthly Yearly Toggle
Switching the billing period slides one thumb and rolls every plan price together.
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 { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Monthly Yearly Toggle
*
* Switching the billing period moves one thumb across the control and
* rolls every price on the page at the same instant, so the plans stayAbout this pattern
Plans are only comparable if they change together. One thumb slides across the period control on a shared layout animation, and every price rolls in the same direction on the same beat — a short cascade down the list, at one constant type size — so the reader is never comparing a settled number against a moving one. The savings badge arrives a beat after the prices have landed, which is the only order in which it can be read. Nothing scales: a price that grows to make a point is a price nobody trusts.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Billing page
A period control above the plan columns restates every seat price at once.
Related patterns
- Bundle Savings HighlightItems select in turn, a bracket draws down their edge, and the combined saving arrives after it.
- Invoice Line ExpandA charge unfolds into the lines that make it up, with its own amount pinned in place.
- Plan Card SpotlightThe light rides the border instead of washing the fill, so the card can say it is the one you are on without getting between you and the price.