Render CLI

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

Composition code

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

export const DataViz: React.FC = () => {
  const frame = useCurrentFrame();

  const wrapY = interpolate(frame, [10, 50], [50, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.out(Easing.cubic) });
  const opacity = interpolate(frame, [10, 40], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });

  const progress = interpolate(frame, [20, 60], [0, 0.75], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.out(Easing.cubic) });

  return (
    <AbsoluteFill style={{ background: "#f5f5f7", fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto', display: "flex", justifyContent: "center", alignItems: "center", flexDirection: "column" }}>

Data Viz

Animated data visualization with smooth bar chart reveals and dynamic counter effects.

Data Business

Duration20s

Resolution1920 × 1080

Frame rate30 fps

Frames600

Browse all templates

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

Related templates

View

Data Viz

Related templates

Metric Dashboard

Bar Chart

Team Grid