Render with Remotion CLI
npx remotion render remotion/index.tsx BarChart output.mp4
Composition code
import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from "remotion";
const BARS = [
{ label: "Jan", value: 65 }, { label: "Feb", value: 82 }, { label: "Mar", value: 74 },
{ label: "Apr", value: 91 }, { label: "May", value: 88 }, { label: "Jun", value: 100 },
];
const MAX_H = 320;
export const BarChart: React.FC = () => {
const frame = useCurrentFrame();
const titleOpacity = interpolate(frame, [0, 25], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
Bar Chart
Monthly revenue bar chart that grows upward with staggered bars, gradient fills, and animated value labels.
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.
