Pricing Tier Focus

Installation

$ pnpm dlx shadcn@latest add @remocn/pricing-tier-focus

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { PricingTierFocus } from "@/components/remocn/pricing-tier-focus";

const PricingTierFocusScene = () => (
  <PricingTierFocus focusedTier={1} accentColor="#22c55e" />
);

export const RemotionRoot = () => (
  <Composition
    id="PricingTierFocus"
    component={PricingTierFocusScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`focusedTier`	`0 \| 1 \| 2`	`1`	Index of the tier to highlight (0 = Free, 1 = Pro, 2 = Enterprise)
`accentColor`	`string`	`"#22c55e"`	Brand color for the focused tier badge, checkmarks, and CTA button
`speed`	`number`	`1`	Multiplier applied to the current frame for global timing control
`className`	`string`	—	Optional className for the outer container