Price Slate

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

Installation

$ pnpm dlx 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.

Props11

Prop	Type	Default
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	number1 Playback multiplier.
theme	"dark" \| "light""dark" Light or dark palette.

pricestring
The new price, set huge. Digits roll in on reels.
Default"$0"
wasstring
The old price, shown first, struck through, then set aside.
Default"$29"
leadstring
Serif italic lead-in before the prices.
Default"From"
notestring
Small line under the price.
Default"per seat · billed yearly"
availabilitystring
Availability line at the foot of the slate.
Default"Available today"
productstring
Product name after the logo at the top; empty hides it.
Default"Pro"
namestring
Brand at the top; "remocn" renders the real logo.
Default"remocn"
logoReact.ReactNode
Replaces the logo / name at the top.
accentstring
Accent color of the sweep.
Default"#3B5BFD"
speednumber
Playback multiplier.
Default1
theme"dark" | "light"
Light or dark palette.
Default"dark"