# Mobile Paywall
URL: https://remocn.dev/docs/product-scenes/mobile-paywall

A phone paywall selects a plan and shows a Welcome to Pro confirmation

- Install: `npx shadcn@latest add @remocn/mobile-paywall`
- Vibe: clean
- Natural length: 225f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/mobile-paywall
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { MobilePaywall } from "@/components/remocn/mobile-paywall";

const MobilePaywallScene = () => <MobilePaywall appName="Orbit Pro" title="Unlock every feature" cta="Start free for 7 days" theme="dark" />;

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

A phone slides in and a paywall sheet lists features and two plans. The second plan starts selected, the first is tapped, the CTA is double-clicked to pay, and a Welcome confirmation lists the trial dates. Pass `appName`, `title`, `features`, `plans` and `lines` (the headline beside the phone) to make it yours. 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 |
|---|---|---|---|
| `appName` | `string` | `"remocn Pro"` | Product name shown in the paywall and welcome screen. |
| `title` | `string` | `"Ship launch videos in minutes"` | Headline at the top of the paywall. |
| `features` | `PaywallFeature[]` | `DEFAULT_FEATURES` | Feature rows, each with `title`, `description` and optional `icon`. |
| `plans` | `[PaywallPlan, PaywallPlan]` | `DEFAULT_PLANS` | Two plans: the first is the one that gets tapped, the second starts selected. |
| `cta` | `string` | `"Start free for 7 days"` | Label on the main purchase button. |
| `account` | `string` | `"maya@kitebase.dev"` | Account email shown on the confirmation. |
| `dates` | `[string, string, string]` | `["Nov 2", "Nov 7", "Nov 9"]` | Trial dates on the confirmation: start, reminder, first charge. |
| `lines` | `[string, string, string]` | — | Three lines beside the phone: paywall, confirm, welcome. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for selection, buttons and badges. |
| `speed` | `number` | `1` | Playback speed multiplier. |
| `theme` | `"light" \| "dark"` | `"light"` | 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 subscription app launch beat showing the paywall, plan pick and trial start.
- A mobile product video that needs to show how easy upgrading to Pro is.
- A pricing or monetization update where the free-trial confirmation is the payoff.

## Don't use when
- You want a full pricing table comparing several tiers on a web page — use `pricing-reveal`.
- The flow is a payment amount and receipt rather than a plan upgrade — use `money-send`.
- You need a web checkout with a promo code — use `coupon-apply`.