Invoice Paid

An invoice gets stamped PAID while a payout notification arrives

Installation

$ pnpm dlx shadcn@latest add @remocn/invoice-paid

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { InvoicePaid } from "@/components/remocn/invoice-paid";
 
const InvoicePaidScene = () => <InvoicePaid sender="Northwind Studio" customer="Acme Corp" number="INV-1007" theme="dark" />;
 
export const RemotionRoot = () => (
  <Composition
    id="InvoicePaid"
    component={InvoicePaidScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);

An invoice document and a status timeline appear side by side; a cursor presses Send, the timeline steps through Created, Sent, Viewed and Paid, a PAID stamp lands on the invoice, and a payout notification slides in. Pass sender, customer, lines and events to make it your own, and payoutAccount and payoutArrival for the notification. It has a theme prop and ships light and dark.

The ground is a live gradients.sh shader (GshGround), installed with the component as @remocn/gsh. Pick another look with the ground preset prop.

Props18

Prop	Type	Default
sender	string"Halcyon Studio" Business name shown as the invoice sender.
customer	string"Kitebase, Inc." Billed customer name.
customerEmail	string"ap@kitebase.com" Customer email, shown under the name.
customerAddress	string"2100 Market St, SF" Customer address line on the invoice.
number	string"INV-2041" Invoice number.
issued	string"Oct 24, 2026" Issue date text.
due	string"Nov 7, 2026" Due date text.
lines	InvoiceLine[]DEFAULT_LINES Line items, each with `description`, `qty` and `unit` price.
events	InvoiceEvent[]DEFAULT_EVENTS Four timeline entries (`title`, `detail`, `time`): created, sent, viewed, paid.
payoutAccount	string"Business Checking ••4821" Account shown in the payout notification.
payoutArrival	string"Oct 29" Arrival date text in the payout notification.
payoutFee	number5 Fee deducted from the payout, in currency units.
currency	string"$" Currency symbol prefixed to amounts.
theme	"light" \| "dark""light" Light or dark palette.
accent	string"#3B5BFD" Accent color for the timeline, buttons and stamp.
speed	number1 Playback speed multiplier.
ground	GshPresetId— Gradients.sh preset id for the background shader.
groundParams	Partial<GradientParams>— Overrides for the background shader parameters.

senderstring
Business name shown as the invoice sender.
Default"Halcyon Studio"
customerstring
Billed customer name.
Default"Kitebase, Inc."
customerEmailstring
Customer email, shown under the name.
Default"ap@kitebase.com"
customerAddressstring
Customer address line on the invoice.
Default"2100 Market St, SF"
numberstring
Invoice number.
Default"INV-2041"
issuedstring
Issue date text.
Default"Oct 24, 2026"
duestring
Due date text.
Default"Nov 7, 2026"
linesInvoiceLine[]
Line items, each with `description`, `qty` and `unit` price.
DefaultDEFAULT_LINES
eventsInvoiceEvent[]
Four timeline entries (`title`, `detail`, `time`): created, sent, viewed, paid.
DefaultDEFAULT_EVENTS
payoutAccountstring
Account shown in the payout notification.
Default"Business Checking ••4821"
payoutArrivalstring
Arrival date text in the payout notification.
Default"Oct 29"
payoutFeenumber
Fee deducted from the payout, in currency units.
Default5
currencystring
Currency symbol prefixed to amounts.
Default"$"
theme"light" | "dark"
Light or dark palette.
Default"light"
accentstring
Accent color for the timeline, buttons and stamp.
Default"#3B5BFD"
speednumber
Playback speed multiplier.
Default1
groundGshPresetId
Gradients.sh preset id for the background shader.
groundParamsPartial<GradientParams>
Overrides for the background shader parameters.