Invoice Line Expand
A charge unfolds into the lines that make it up, with its own amount pinned in place.
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 { useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Invoice Line Expand
*
* A charge unfolds into the lines that make it up. The charge's own
* amount never moves — it stays pinned to the right of its row while theAbout this pattern
Reconciling a bill, treated as a motion problem. The charge's amount never moves: it stays pinned to the right of its row while the breakdown opens underneath, so the figure being explained is still where the eye left it. Charges open independently rather than one at a time, because comparing two charges means holding both open. Height is tweened and short — a genuine size change deserves a curve, and a spring here would bounce every billing figure below it — while the itemised lines fade in a hair apart as the panel finishes opening.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Dashboard
Invoice charges expand into their metered components without the totals shifting.