Card Create

A phone app prints a new debit card, cycles finishes, engraves a name and adds it to the wallet

Installation

$ pnpm dlx shadcn@latest add @remocn/card-create

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { CardCreate } from "@/components/remocn/card-create";
 
const CardCreateScene = () => (
  <CardCreate holder="Alex Rivera" last4="9034" accent="#3B5BFD" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="CardCreate"
    component={CardCreateScene}
    durationInFrames={370}
    fps={30}
    width={1280}
    height={720}
  />
);

A phone slot prints a new card, a cursor taps through finish swatches, the holder name is engraved, the card flips and its full number scrambles into view, then it joins the wallet stack with a toast. Five caption lines beside the phone mark each beat. Pass holder, last4, colors with matching finishes, and lines to make it yours. The theme prop 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.

Props10

Prop	Type	Default
holder	string"Maya Chen" Name engraved on the new card.
last4	string"4821" Last four digits of the card number.
colors	string[]— Swatch colors. The card prints in the first, then taps through the next three.
finishes	string[]— Finish names matching each swatch color, in the same order.
accent	string"#3B5BFD" Accent color for taps, highlights and buttons.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"light" \| "dark""dark" Light or dark phone and background styling.
lines	[string, string, string, string, string]— Five caption lines beside the phone, one per beat.
ground	GshPresetId— Preset id for the shader background.
groundParams	Partial<GradientParams>— Overrides for the shader background parameters.

holderstring
Name engraved on the new card.
Default"Maya Chen"
last4string
Last four digits of the card number.
Default"4821"
colorsstring[]
Swatch colors. The card prints in the first, then taps through the next three.
finishesstring[]
Finish names matching each swatch color, in the same order.
accentstring
Accent color for taps, highlights and buttons.
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"light" | "dark"
Light or dark phone and background styling.
Default"dark"
lines[string, string, string, string, string]
Five caption lines beside the phone, one per beat.
groundGshPresetId
Preset id for the shader background.
groundParamsPartial<GradientParams>
Overrides for the shader background parameters.