# Pricing Reveal
URL: https://remocn.dev/docs/product-scenes/pricing-reveal

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

- Install: `npx shadcn@latest add @remocn/pricing-reveal`
- Vibe: clean
- Natural length: 81f @ 30fps

## Installation

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `1` | Playback speed multiplier. |
| `ground` | `GshPresetId` | — | Gradients.sh preset id for the background shader. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the background shader parameters. |

## Use when
- A pricing-page announcement where a launch discount replaces the old price.
- A SaaS launch beat that presents three tiers and spotlights the one you want picked.
- A "simple pricing" scene that ends with a free trial button being pressed.

## Don't use when
- You only need one plan on a phone with a trial flow — use `mobile-paywall`.
- The pricing is a single huge statement rather than a table — use `price-page`.
- The point is a checkout total dropping after a code — use `coupon-apply`.