Remotion Rule: Charts

What it is

The Remotion Charts Rule is part of the official Remotion Agent Skill set. It provides patterns and best practices for creating animated data visualizations in Remotion compositions, including bar charts, pie charts, line charts, stock graphs, and other data-driven animations. The rule activates automatically when an AI agent detects chart-related work in a Remotion project.

This rule is designed for developers building data-driven video content with Remotion who need animated charts that render frame-by-frame for smooth transitions.

How it saves time or tokens

Animating charts in video requires frame-by-frame interpolation, proper easing, and careful timing. Without this rule, developers must figure out the correct Remotion APIs (useCurrentFrame, interpolate, spring) for each chart type from scratch. The rule provides ready-made patterns that an AI agent follows, producing correct animated charts on the first attempt instead of iterating through broken implementations.

How to use

1. Install the Remotion skills package:

npx skills add remotion-dev/skills

1. The Charts rule activates automatically when you ask your AI agent to create chart components in a Remotion project.

1. Describe the chart you want:

Create a bar chart component that animates each bar growing from 0 to its value
over 30 frames with a spring animation, staggered by 5 frames per bar.

Example

A simple animated bar chart component following the rule's patterns:

import { useCurrentFrame, interpolate, spring, useVideoConfig } from 'remotion';

interface BarChartProps {
  data: { label: string; value: number }[];
}

export const BarChart: React.FC<BarChartProps> = ({ data }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const maxValue = Math.max(...data.map((d) => d.value));

  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 12, height: 300 }}>
      {data.map((item, i) => {
        const progress = spring({
          frame: frame - i * 5,
          fps,
          config: { damping: 12 },
        });
        const height = interpolate(progress, [0, 1], [0, (item.value / maxValue) * 280]);
        return (
          <div key={item.label} style={{ textAlign: 'center' }}>
            <div style={{ width: 48, height, background: '#4f46e5', borderRadius: 4 }} />
            <span>{item.label}</span>
          </div>
        );
      })}
    </div>
  );
};

Related on TokRepo

• Video tools — Browse video creation and animation tools
• Automation tools — Explore content automation workflows

Common pitfalls

• Not using spring() for natural-feeling animations. Linear interpolation makes charts look mechanical. Spring animations with proper damping produce professional results.
• Forgetting to handle negative frame values when staggering animations. When frame - i * 5 is negative, spring() returns 0, which is correct behavior, but interpolate() may throw if the input range is not properly clamped.
• Hardcoding chart dimensions instead of making them responsive to composition size. Use useVideoConfig() to get width and height, then scale chart dimensions proportionally.