Price Page

A list of fine-print pricing lines drops away one by one until a huge price and a note remain.

Installation

$ pnpm dlx shadcn@latest add @remocn/price-page

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { PricePage } from "@/components/remocn/price-page";
 
const PricePageScene = () => <PricePage lines={["Starter, Pro, Team, Enterprise", "Per seat, per month", "Overage fees may apply"]} price="Free." />;
 
export const RemotionRoot = () => (
  <Composition
    id="PricePage"
    component={PricePageScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);

A small label tops a stack of fine-print pricing lines; the lines drop out one by one in a scrambled order until the list is gone, then a huge price lands and a note fades in beneath it. Pass lines, price and note. The timing stretches to the composition length, so give it about 180 frames. It ships light and dark through theme.

Props8

Prop	Type	Default
label	string"Pricing" Small label above the list.
lines	string[]DEFAULT_LINES Fine-print lines that exit one by one.
price	string"Free." The huge price that remains.
note	string"That’s the whole pricing page." Closing line under the price.
accent	string— Color of the price; defaults to the theme accent.
background	string— Stage background color; overrides the theme ground.
speed	number1 Playback speed multiplier.
theme	"dark" \| "light""dark" Light or dark palette.

labelstring
Small label above the list.
Default"Pricing"
linesstring[]
Fine-print lines that exit one by one.
DefaultDEFAULT_LINES
pricestring
The huge price that remains.
Default"Free."
notestring
Closing line under the price.
Default"That’s the whole pricing page."
accentstring
Color of the price; defaults to the theme accent.
backgroundstring
Stage background color; overrides the theme ground.
speednumber
Playback speed multiplier.
Default1
theme"dark" | "light"
Light or dark palette.
Default"dark"