Mobile Paywall

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

Installation

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

Props13

Prop	Type	Default
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	number1 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.

appNamestring
Product name shown in the paywall and welcome screen.
Default"remocn Pro"
titlestring
Headline at the top of the paywall.
Default"Ship launch videos in minutes"
featuresPaywallFeature[]
Feature rows, each with `title`, `description` and optional `icon`.
DefaultDEFAULT_FEATURES
plans[PaywallPlan, PaywallPlan]
Two plans: the first is the one that gets tapped, the second starts selected.
DefaultDEFAULT_PLANS
ctastring
Label on the main purchase button.
Default"Start free for 7 days"
accountstring
Account email shown on the confirmation.
Default"maya@kitebase.dev"
dates[string, string, string]
Trial dates on the confirmation: start, reminder, first charge.
Default["Nov 2", "Nov 7", "Nov 9"]
lines[string, string, string]
Three lines beside the phone: paywall, confirm, welcome.
accentstring
Accent color for selection, buttons and badges.
Default"#3B5BFD"
speednumber
Playback speed multiplier.
Default1
theme"light" | "dark"
Light or dark palette.
Default"light"
groundGshPresetId
Gradients.sh preset id for the background shader.
groundParamsPartial<GradientParams>
Overrides for the background shader parameters.