Render with Remotion CLI
npx remotion render remotion/index.tsx MetricDashboard output.mp4
Composition code
import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from "remotion";
const METRICS = [
{ label: "Monthly Revenue", value: 128500, prefix: "$", color: "#22c55e" },
{ label: "Active Users", value: 24830, prefix: "", color: "#6366f1" },
{ label: "Churn Rate", value: 2.4, prefix: "", suffix: "%", color: "#f59e0b" },
];
export const MetricDashboard: React.FC = () => {
const frame = useCurrentFrame();
return (Metric Dashboard
Animated KPI dashboard with three counter cards — revenue, users, and churn rate — with progress bars.
Duration8s
Resolution1920 × 1080
Frame rate30 fps
Frames240
Copy the code snippet into your Remotion project and run the render command to generate this template locally.
