Pricing Card
A tier card that earns its price — the number rolls up, the features tick in beneath it, and the call to action arrives last.
SceneScenes
$ npx remotion-ui@latest add pricing-cardThe price counts up under a soft blur that clears as it settles, the features tick in one at a time, and the button lands after the last of them — so the card finishes on the thing you want clicked rather than on a feature line.
The roll is a plain interpolation on the value, not a spinning digit strip. A
strip has to guess glyph widths to keep its columns aligned; a counted number
stays in register with tabular-nums at any font size, and it reads as counting
rather than as a slot machine. Pass wasPrice when there is a before-and-after
to tell — it strikes through beside the new number once the roll is most of the
way home.
The call to action is scheduled off the last feature, not off a fixed second, so
adding features pushes the button later instead of colliding with it. If you
need the whole card inside a tighter cut, lower featureStaggerSeconds before
you touch rollSeconds — the roll is the beat people watch.
This is one card at block grain. For a full tier-comparison beat with a
composition's pacing around it, use pricing-focus; for a side-by-side matrix,
use comparison-table.
The price is a counted number under a blur that clears as it settles, not a spinning digit strip — a strip has to guess glyph widths, a counted number stays in register with tabular-nums at any size. The CTA is scheduled off the last feature, so adding features pushes the button later rather than colliding with it. This is one card at block grain; for a full tier comparison beat, use pricing-focus.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/scenes/pricing-card- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: tier, price, currency, period, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { PricingCard } from "@/remotion/scenes/pricing-card";
<PricingCard
tier="Studio"
badge="Most picked"
price={32}
period="/mo"
note="Billed annually. Cancel whenever."
features={["2,000 render minutes a month", "4K exports, no watermark", "9 team seats"]}
ctaLabel="Start rendering"
holdSeconds={3.4}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| tier | string | "Studio" | Tier name across the top of the card. |
| price | number | 32 | The number the price rolls up to. |
| currency | string | "$" | Symbol set ahead of the number. |
| period | string | "/mo" | Cadence after the price — "/mo", "per seat", anything short. |
| badge | string | "Most picked" | Chip beside the tier name. Omit to drop it. |
| note | string | "Billed annually. Cancel whenever." | Line under the price. |
| wasPrice | number | - | Old price, struck through beside the new one. Omit when there is no before-and-after. |
| features | string[] | 5 sample features | Ticked lines under the price, revealed in order. |
| ctaLabel | string | "Start rendering" | Button text. Omit to drop the button. |
| priceAtSeconds | number | 0.42 | Second the price starts rolling. |
| rollSeconds | number | 0.9 | How long the roll takes. |
| featuresAtSeconds | number | 1.05 | Second the first feature ticks in. |
| featureStaggerSeconds | number | 0.22 | Seconds between features. The CTA lands 0.16s after the last one. |
| holdSeconds | number | - | Seconds the finished card holds before it retreats. Omit to leave it up. |
| accentColor | string | "#E8B86D" | Badge, ticks, card border wash and the CTA fill. |
| backgroundColor | string | - | Page behind the card. Defaults to the theme page colour. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| speed | number | 1 | Animation speed multiplier. |