Remotion Rule: Get Video Dimensions

What it is

Remotion Rule: Get Video Dimensions is a skill rule within the official Remotion Agent Skill that provides patterns for programmatically getting and working with video dimensions in Remotion projects. It covers retrieving composition width and height, calculating aspect ratios, validating frame sizes, and handling dynamic resolution for responsive video output.

This rule is for developers building programmatic videos with Remotion who need to work with video dimensions dynamically. If you are creating videos for multiple platforms (YouTube, TikTok, Instagram) with different aspect ratios, this rule provides the patterns for handling resolution correctly.

How it saves time or tokens

Instead of hardcoding video dimensions throughout your Remotion project, this rule provides patterns for reading dimensions from composition config, calculating derived values, and adapting layouts to different aspect ratios. When using AI coding assistants, the rule activates automatically in Remotion projects, ensuring generated code uses the correct API for dimension access rather than hardcoded pixel values.

How to use

1. Install the Remotion skills: npx skills add remotion-dev/skills.
2. The video dimensions rule activates automatically when working with video sizing in Remotion.
3. Use useVideoConfig() to access width, height, fps, and duration in your components.

Example

import { useVideoConfig, Composition } from 'remotion';

// Access dimensions inside a component
export const MyVideo: React.FC = () => {
  const { width, height, fps, durationInFrames } = useVideoConfig();
  const aspectRatio = width / height;

  return (
    <div style={{ width, height, position: 'relative' }}>
      <p>Resolution: {width}x{height}</p>
      <p>Aspect Ratio: {aspectRatio.toFixed(2)}</p>
      <p>Duration: {durationInFrames / fps}s</p>
    </div>
  );
};

// Define compositions with different dimensions
export const Root: React.FC = () => (
  <>
    <Composition id='youtube' component={MyVideo}
      width={1920} height={1080} fps={30} durationInFrames={300} />
    <Composition id='tiktok' component={MyVideo}
      width={1080} height={1920} fps={30} durationInFrames={300} />
    <Composition id='square' component={MyVideo}
      width={1080} height={1080} fps={30} durationInFrames={300} />
  </>
);

Related on TokRepo

• AI tools for video -- AI-powered video creation tools
• AI tools for design -- visual content creation tools

Common pitfalls

• Hardcoding pixel values instead of using useVideoConfig(). Hardcoded dimensions break when you render the same component at different resolutions or aspect ratios.
• Forgetting that useVideoConfig() is a React hook and must be called inside a component. It cannot be used in utility functions outside the component tree.
• Not accounting for pixel density. Remotion renders at 1x by default. If you need higher DPI output, adjust your composition dimensions accordingly rather than scaling after render.