Receipt button

A pay button that turns into a receipt printer: progress fill, check draw, line-by-line paper feed and a torn-off receipt.

Buttons, press, then a timeline, GSAP

Install

npm i @gsap/react clsx gsap tailwind-merge && curl -o components/receipt-button.tsx https://motion-brew.com/r/receipt-button.tsx

One self contained file for React and Tailwind CSS: receipt-button.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { ReceiptButton } from "@/components/receipt-button";

export default function Page() {
  return (
    <ReceiptButton
      currency="€"
      merchant="CORNER BAKERY"
      items={[
        { qty: 2, name: "Sourdough", price: 4.5 },
        { qty: 1, name: "Rye loaf", price: 5.2 },
      ]}
      onPay={() => charge()}
    />
  );
}

Props

Prop	Type	Default	Description
items	ReceiptItem[]	3 café items	{ qty, name, price } rows; the total is their sum
currency	string	" quot;	Currency symbol
merchant	string	"NORTH ROAST"	Shop name
tagline	string	"Coffee bar"	Line under the shop name
orderId	string	"1042"	Order number; also seeds the barcode
footer	string	"Thank you, come again"	Last line
label	ReactNode	Pay {total}	Button label before paying
paidLabel	string	"Paid"	Label once paid
processing	number	1200	Processing fill length, ms
feedSpeed	number	0.09	Seconds per printed line
color	string	"#141414"	Button color before paying
successColor	string	"#2f8a4f"	Fill and paid color
resetAfter	number \	null	3200	Reset delay after the tear, ms; null keeps the receipt
onPay	() => void		Payment started
onComplete	() => void		Receipt torn off

More buttons

Fuse button: An action button whose done state carries an undo on a burning fuse.
Magnetic button: A button that leans toward your cursor on a spring.
Hold to confirm: Hold to fill, let go to cancel.
Bell toggle: A pill toggle where a press rings the bell, crossfades the label and unfurls the pill.

All animated react button components