Render with Remotion CLI

npx remotion render remotion/index.tsx PricingCard output.mp4

Composition code

import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from "remotion";

const FEATURES = ["Real-time collaboration", "99.9% uptime SLA", "End-to-end encryption", "One-click integrations"];

export const PricingCard: React.FC = () => {
  const frame = useCurrentFrame();
  const cardScale = interpolate(frame, [10, 45], [0.85, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.out(Easing.back(1.3)) });
  const priceOpacity = interpolate(frame, [40, 65], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
  const ctaScale = interpolate(frame, [130, 160], [0.8, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.out(Easing.back(1.4)) });

  return (
    <AbsoluteFill style={{ background: "linear-gradient(145deg, #09090f, #0f0e1f)", fontFamily: "Inter, sans-serif", display: "flex", alignItems: "center", justifyContent: "center" }}>

Pricing Card

SaaS pricing plan reveal with animated features list, rotating border ring, and spring CTA button.

Marketing Business

Duration8s

Resolution1080 × 1080

Frame rate30 fps

Frames240

Browse all templates

Copy the code snippet into your Remotion project and run the render command to generate this template locally.

Related templates

View

Pricing Card

Related templates

Product Launch

SaaS Promo

Data Visualisation