# Money Send
URL: https://remocn.dev/docs/product-scenes/money-send

A phone payment screen confirms Sent to Maya with a receipt

- Install: `npx shadcn@latest add @remocn/money-send`
- Vibe: clean
- Natural length: 230f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/money-send
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { MoneySend } from "@/components/remocn/money-send";

const MoneySendScene = () => <MoneySend recipient="Sam Rivera" amount={85} currency="EUR" note="Concert tickets 🎟" />;

export const RemotionRoot = () => (
  <Composition
    id="MoneySend"
    component={MoneySendScene}
    durationInFrames={260}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A phone opens on a keypad where the amount is typed digit by digit, then the note is typed on the keyboard with an emoji picked from the suggestion bar. Send flies the payment off, a progress ring spins, and a Sent confirmation shows a receipt. Pass `recipient`, `amount`, `currency` and `note`, and `lines` for the headline beside the phone. It has a `theme` prop and ships light and dark (dark by default).

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 |
|---|---|---|---|
| `recipient` | `string` | `"Maya Chen"` | Full name; the first name is used in "Sent to …". |
| `amount` | `number` | `120` | Whole amount, typed digit by digit on the keypad. |
| `currency` | `string` | `"USD"` | ISO code, shown in the currency pill. USD, EUR, GBP and JPY get a symbol. |
| `note` | `string` | `"Dinner 🍜"` | Letters are typed on the keyboard; a trailing emoji is picked from the suggestion bar. |
| `lines` | `[string, string, string]` | — | Three lines beside the phone: amount, note, sent. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for the send button and confirmation. |
| `speed` | `number` | `1` | Playback speed multiplier. |
| `theme` | `"light" \| "dark"` | `"dark"` | Light or dark palette. |
| `ground` | `GshPresetId` | — | Gradients.sh preset id for the background shader. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the background shader parameters. |

## Use when
- A fintech or payments launch beat showing how fast sending money is.
- A mobile product demo that types an amount, adds a note and ends on a receipt.
- A peer-to-peer payments announcement where "sent in a second" is the message.

## Don't use when
- The scene is a subscription upgrade with plan cards — use `mobile-paywall`.
- You are settling a business invoice on a desktop layout — use `invoice-paid`.
- You need a stock or portfolio screen with a chart — use `stock-scrub`.