Money Send

A phone payment screen confirms Sent to Maya with a receipt

Installation

$ pnpm dlx 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.

Props10

Prop	Type	Default
recipient	string"Maya Chen" Full name; the first name is used in "Sent to …".
amount	number120 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	number1 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.

recipientstring
Full name; the first name is used in "Sent to …".
Default"Maya Chen"
amountnumber
Whole amount, typed digit by digit on the keypad.
Default120
currencystring
ISO code, shown in the currency pill. USD, EUR, GBP and JPY get a symbol.
Default"USD"
notestring
Letters are typed on the keyboard; a trailing emoji is picked from the suggestion bar.
Default"Dinner 🍜"
lines[string, string, string]
Three lines beside the phone: amount, note, sent.
accentstring
Accent color for the send button and confirmation.
Default"#3B5BFD"
speednumber
Playback speed multiplier.
Default1
theme"light" | "dark"
Light or dark palette.
Default"dark"
groundGshPresetId
Gradients.sh preset id for the background shader.
groundParamsPartial<GradientParams>
Overrides for the background shader parameters.