Pricing Reveal

A pricing table highlights the Pro plan and strikes the old price for the new one

Installation

$ pnpm dlx shadcn@latest add @remocn/pricing-reveal

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { PricingReveal } from "@/components/remocn/pricing-reveal";
 
const PricingRevealScene = () => <PricingReveal heading="Pricing that scales with you." discountLabel="−20% this week" badgeLabel="Best value" />;
 
export const RemotionRoot = () => (
  <Composition
    id="PricingReveal"
    component={PricingRevealScene}
    durationInFrames={105}
    fps={30}
    width={1280}
    height={720}
  />
);

Three plan cards rise in with their features, then the featured plan lifts, strikes its old price and rolls in the new one with a discount tag and a Most picked badge, and its button is pressed. Pass plans (set featured and was on the one to highlight), heading, discountLabel and badgeLabel. 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.

Props11

Prop	Type	Default
plans	PricingPlan[]DEFAULT_PLANS Plan cards with `name`, `price`, `period`, `features`, `cta`; `featured` and `was` mark the highlight.
currency	string"$" Currency symbol shown before prices.
discountLabel	string"−35% launch week" Tag text shown next to the new price.
badgeLabel	string"Most picked" Badge text above the featured plan.
eyebrow	string"Billed monthly · cancel anytime" Small line above the heading.
heading	string"Simple pricing for every launch." Main heading above the plan cards.
theme	"light" \| "dark""light" Light or dark palette.
accent	string"#3B5BFD" Accent color for the featured plan and tag.
speed	number1 Playback speed multiplier.
ground	GshPresetId— Gradients.sh preset id for the background shader.
groundParams	Partial<GradientParams>— Overrides for the background shader parameters.

plansPricingPlan[]
Plan cards with `name`, `price`, `period`, `features`, `cta`; `featured` and `was` mark the highlight.
DefaultDEFAULT_PLANS
currencystring
Currency symbol shown before prices.
Default"$"
discountLabelstring
Tag text shown next to the new price.
Default"−35% launch week"
badgeLabelstring
Badge text above the featured plan.
Default"Most picked"
eyebrowstring
Small line above the heading.
Default"Billed monthly · cancel anytime"
headingstring
Main heading above the plan cards.
Default"Simple pricing for every launch."
theme"light" | "dark"
Light or dark palette.
Default"light"
accentstring
Accent color for the featured plan and tag.
Default"#3B5BFD"
speednumber
Playback speed multiplier.
Default1
groundGshPresetId
Gradients.sh preset id for the background shader.
groundParamsPartial<GradientParams>
Overrides for the background shader parameters.