# Card Create
URL: https://remocn.dev/docs/product-scenes/card-create

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

- Install: `npx shadcn@latest add @remocn/card-create`
- Vibe: premium
- Natural length: 352f @ 30fps

## Installation

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `1` | 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. |

## Use when
- A fintech launch beat showing how fast a user can issue and personalise a virtual or physical card.
- A mobile banking or spend-management demo that needs a tactile, step-by-step card setup.
- A vertical or square social cut where a phone mockup carries the story, with a caption line per step.

## Don't use when
- The moment is sending money, not issuing a card — use `money-send`, which confirms a payment with a receipt.
- You want the phone to land on a subscription upsell — use `mobile-paywall`, which selects a plan and confirms.