Receipt Unroll
The payment clears and the receipt unrolls beneath it, line items settling in behind the torn edge.
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, useRef, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Receipt Unroll
*
* The payment clears and the receipt unrolls beneath it: the paper grows
* downward on an eased height tween, the torn edge travels with it, andAbout this pattern
The screen a shopper actually reads after paying. A badge lands on the header the moment the card clears, then the paper unrolls downward on an eased height tween with its torn edge riding along the bottom, and the line items settle in a short cascade behind it. The unroll is a real size change so it tweens rather than springs — paper that bounces open reads as elastic. Only the badge is allowed a soft landing; every figure on the receipt holds one type size from the first frame to the last.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Order receipt
The post-purchase screen builds its summary lines under a cleared-payment header.
Related patterns
- Price Change RollA recalculated total rolls digit by digit in the direction the money moved.
- Review SubmitStar fills bloom from the middle, then the form folds away and the posted review rises into its place.
- Checkout Step ProgressThe finished stage folds into a one-line recap while the following one opens and the rail fills.