Render CLI

npx remotion render remotion/index.tsx MetricDashboard output.mp4 --codec=h264

Composition code

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

export const MetricDashboard: React.FC = () => {
  const frame = useCurrentFrame();
  const y = interpolate(frame, [0, 40], [100, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.out(Easing.cubic) });
  const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });

  return (
    <AbsoluteFill style={{ background: "#f5f5f7", fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto', padding: 80, display: "flex", flexDirection: "column", gap: 48 }}>
      <h1 style={{ fontSize: 80, fontWeight: 900, color: "#1d1d1f", letterSpacing: "-0.04em", margin: 0, opacity }}>Metrics</h1>
      <div style={{ display: "flex", gap: 32, flex: 1, transform: `translateY(${y}px)`, opacity }}>
        {["10X", "99%", "24/7"].map((metric, i) => (

Metric Dashboard

Animated KPI metrics and dashboard with real-time counter effects and progress indicators.

Data SaaS

Duration8s

Resolution1920 × 1080

Frame rate30 fps

Frames240

Browse all templates

This is a free, open-source template. Copy the code and drop it into your Remotion project.

Related templates

View

Metric Dashboard

Related templates

SaaS Promo

Data Viz

Pricing Card