AI Usage

RemotionUI is the copy-paste component layer for Remotion. Use Remotion for framework fundamentals, rendering, Studio, Player, and APIs. Use RemotionUI when an agent needs ready-made source components for captions, charts, scenes, transitions, and composition templates.

Agent workflow

Create or open a Remotion project.
Install RemotionUI components with the CLI.
Import components from local source paths after installation.
Customize the copied files directly.
Use Remotion frame APIs for motion.

npx remotion-ui@latest search -q caption
npx remotion-ui@latest add caption-highlight lower-third

import { CaptionHighlight } from "@/remotion/primitives/caption-highlight";
import { LowerThird } from "@/remotion/scenes/lower-third";

Do not import RemotionUI components from the npm package. The npm package is the CLI only. Components are installed as source files into the user's project.

Hard rules for agents

Run npx remotion-ui@latest add <component> before importing a component.
Import from local project paths such as @/remotion/primitives/..., @/remotion/scenes/..., or @/compositions/....
Use useCurrentFrame(), interpolate(), spring(), and <Sequence /> for render-time motion.
Do not use CSS transitions or Tailwind animation classes for video motion.
Prefer recipes before raw component search when the user asks for a complete video.
Preserve source ownership: edit copied component files when customization is needed.