Remotion Rule: Images

What it is

This Remotion rule defines how AI coding agents should embed images in Remotion video compositions using the <Img> component. It is part of the official Remotion Agent Skill for programmatic video creation in React.

The rule targets developers using AI assistants to build Remotion projects that include static images, animated overlays, or dynamic image sequences.

How it saves time or tokens

AI agents often default to HTML <img> tags in Remotion projects, which causes rendering failures because Remotion needs images to be loaded before the frame renders. The <Img> component from Remotion handles preloading and error states correctly. This rule prevents the agent from generating broken code.

How to use

1. Add the Remotion images rule to your AI assistant's project configuration.
2. Ask your assistant to add images to your Remotion composition.
3. The agent uses the correct <Img> component import and loading patterns.

Example

import { Img, staticFile, useCurrentFrame, interpolate } from 'remotion';

const ImageOverlay: React.FC<{ src: string }> = ({ src }) => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: 'clamp',
  });

  return (
    <Img
      src={staticFile(src)}
      style={{
        position: 'absolute',
        width: '100%',
        height: '100%',
        objectFit: 'cover',
        opacity,
      }}
    />
  );
};

// Usage: <ImageOverlay src='background.jpg' />
// Place background.jpg in the public/ directory

Related on TokRepo

• AI Tools for Video -- video creation and editing tools
• AI Tools for Design -- design and visual content tools

Common pitfalls

• Always use <Img> from 'remotion' instead of the HTML <img> tag. The Remotion component ensures the image is loaded before the frame renders.
• Use staticFile() for images in the public directory. Do not use relative paths or URL imports.
• Large images slow down rendering. Optimize images to the exact resolution needed for your video composition before importing.