# Price Slate
URL: https://remocn.dev/docs/numbers/price-slate

An old price is struck through and set aside while the new price spins in on digit reels.

- Install: `npx shadcn@latest add @remocn/price-slate`
- Vibe: premium
- Natural length: 99f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/price-slate
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PriceSlate } from "@/components/remocn/price-slate";

const PriceSlateScene = () => <PriceSlate price="$0" was="$29" lead="From" note="per seat, billed yearly" />;

export const RemotionRoot = () => (
  <Composition
    id="PriceSlate"
    component={PriceSlateScene}
    durationInFrames={140}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A serif lead-in and the old price reel in; a line strikes the old price through, then it shrinks, greys out and slides aside while the new price spins in on digit reels and a gradient sweeps across it. A note and an availability line rise in last. Pass `price`, `was`, `lead`, `note`, `availability` and `product`; use `name` or `logo` for the mark at the top. It ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `price` | `string` | `"$0"` | The new price, set huge. Digits roll in on reels. |
| `was` | `string` | `"$29"` | The old price, shown first, struck through, then set aside. |
| `lead` | `string` | `"From"` | Serif italic lead-in before the prices. |
| `note` | `string` | `"per seat · billed yearly"` | Small line under the price. |
| `availability` | `string` | `"Available today"` | Availability line at the foot of the slate. |
| `product` | `string` | `"Pro"` | Product name after the logo at the top; empty hides it. |
| `name` | `string` | `"remocn"` | Brand at the top; "remocn" renders the real logo. |
| `logo` | `React.ReactNode` | — | Replaces the logo / name at the top. |
| `accent` | `string` | `"#3B5BFD"` | Accent color of the sweep. |
| `speed` | `number` | `1` | Playback multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A pricing reveal where the new price should land with a spin and a gradient sweep.
- A launch-day offer that needs the old price visible, struck through, before the new one lands.
- A closing slate with a product line at the top and an availability line at the foot.

## Don't use when
- Dozens of fine-print lines should disappear to leave the price - use `price-page`.
- The beat is a market listing with a ticker - use `ipo-open`.
- The price is a receipt-style total - use `the-tab`.