Pricing Tier Focus

A composition that stages a classic three-tier pricing table and then dramatically focuses the camera on the recommended plan. The focused card scales up, lifts off the page with a heavy drop shadow, while the side cards retreat into a soft, brightness-dimmed blur. A subtle shimmer sweeps across the CTA button to seal the moment.

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.

Notes

Shimmer is the closer

The focus animation lands the visual hierarchy, but the shimmer sweep on the Pro CTA button is what makes the moment feel cinematic. It runs once around frame 90 — late enough that the eye has already settled on the focused card, so the highlight reads as confirmation rather than distraction.