# Invoice Paid
URL: https://remocn.dev/docs/product-scenes/invoice-paid

An invoice gets stamped PAID while a payout notification arrives

- Install: `npx shadcn@latest add @remocn/invoice-paid`
- Vibe: paper
- Natural length: 150f @ 30fps

## Installation

```bash
npx 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `5` | 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` | `number` | `1` | Playback speed multiplier. |
| `ground` | `GshPresetId` | — | Gradients.sh preset id for the background shader. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the background shader parameters. |

## Use when
- A finance or billing launch beat showing an invoice moving from sent to viewed to paid.
- A freelancer or invoicing app demo that ends on a payout notification landing.
- A "get paid faster" feature announcement that needs a visual payoff.

## Don't use when
- You want a checkout total changing with a promo code — use `coupon-apply`.
- The money moves phone to phone instead of a document being settled — use `money-send`.
- You need live revenue numbers and a recent activity feed — use `live-dashboard`.