Introduction
Production-ready motion for Remotion. Install with the CLI, edit source in your repo.
RemotionUI is a component registry for Remotion. Use Remotion for framework fundamentals; use RemotionUI when you need ready-made captions, scenes, transitions, and composition templates.
How it works
Queue 01
01Initialize
$ npx remotion-ui@latest init my-videoQueue 02
02Add
$ npx remotion-ui@latest add social-clipQueue 03
03Render
$ npx remotion render src/Root.tsx SocialClip out/social-clip.mp4Output
src/remotion/
New here? Start with Installation, or open the component catalog.
Building with an AI agent
Paste this into your assistant and it will know the install workflow, the import paths, and the animation rules:
Starter promptPaste into Claude, ChatGPT, Cursor, or any coding agent
You are building a video with Remotion and RemotionUI.
RemotionUI is a copy-paste component registry for Remotion. The npm package is the CLI only — components are installed as source files into my project.
Read these first:
- https://remotionui.com/llms.txt — short entry point
- https://remotionui.com/llms-full.txt — full usage guide
- https://remotionui.com/ai/components.json — every component, with install command, import path, and tasks
Workflow:
1. Run `npx remotion-ui@latest init --existing` if there is no remotion-ui.json (or `init my-video` for a new project).
2. Find components with `npx remotion-ui@latest search -q <term> --json`.
3. Install with `npx remotion-ui@latest add <name>` before importing anything. This also installs dependencies and registers compositions in Root.tsx.
4. Import from local paths — @/remotion/primitives/..., @/remotion/scenes/..., @/compositions/... — never from the remotion-ui package.
5. Read props from https://remotionui.com/ai/components/<name>.json.
6. Edit the copied source files directly when I want design changes.
Rules:
- Drive all motion with useCurrentFrame(), interpolate(), spring(), and <Sequence />.
- Never use CSS transitions, CSS keyframes, or Tailwind animation classes — they do not render in video.
- Every command accepts --json and returns { ok: false, error: { code, message } } on failure.
Now help me build: <describe your video here>Every page here has a Copy page for AI button and a Markdown version at /llms.mdx/docs/<path>. For MCP-capable agents, see the MCP Server; for Claude Code, init --existing installs a project skill.