Start a new Remotion video by setting up a project when needed and opening Studio before building scenes. Covers folder selection, React video structure, multiple scenes, and timelines with individually editable clips.
中文简介正在准备中。当前显示英语简介。
Create a new Remotion video
安装前可以查看交给 AI 代理的指令内容。
These are instructions for making a new Remotion project and composition.
If this is not the next task, see Remotion Best Practices
If a project already exists, skip this. Ensure Node.js and Git is installed, and the current folder is appropriate for starting a new project.
Inspect the current folder, including hidden files, before choosing where to scaffold.
If it is empty, or contains only disposable operating-system metadata such as .DS_Store, create the project directly in the current folder.
Remove only those disposable metadata files first, since create-video rejects non-empty folders.
Do not treat all hidden files as disposable: files such as .env and directories such as .git are meaningful contents.
Scaffold in existing folder:
npx create-video@latest --yes --blank --no-tailwind .
npm i
If the current folder contains meaningful contents and no project already exists, scaffold into a new subfolder.
Replace my-video with a suitable project name.
npx create-video@latest --yes --blank --no-tailwind my-video
cd my-video
npm i
As soon as the project can run, open Remotion Studio in the browser before writing or changing the composition. For a new project, do this immediately after scaffolding and installing dependencies. For an existing project, do it before editing the video. Keep Studio running while you work so the user can see changes as they appear and steer the result.
Keep the scaffold and add React Markup. Follow Remotion React Markup Best Practices and Video Layout Rules for video-first layout and text sizing guidance.
Before writing the root that registers <Composition> or <Still> elements,
follow Compositions and stills.
If the video arranges multiple video or audio clips on a timeline, follow Video editing before writing the timeline. Give every clip that should be edited independently its own authored JSX node.
If this is a video with multiple subsequent scenes, follow guidance at Multi-scene videos.
By structuring the React Markup following Remotion Interactivity Best Practices, you allow the user to make edits in the Studio which write back to code.
If Tailwind is requested, see tailwind.md for using TailwindCSS in Remotion.
The video creation process has finished. For follow-up prompts, use Remotion Best Practices
还没有评价。欢迎分享你的使用感受。
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
Guide an agent to the right Remotion instructions for creating videos, adding captions or maps, exporting files, and building applications. The workflow emphasizes checking an interactive preview as the video takes shape.
中文简介正在准备中。当前显示英语简介。
Create and display captions for Remotion videos, with guidance for transcribing audio or video, importing SRT files, and animating captions. Keep caption text and timing in a shared JSON format.
中文简介正在准备中。当前显示英语简介。
Find current Remotion documentation for a feature or API, then retrieve relevant pages as Markdown. Use the documented behavior to guide implementation instead of relying on previously learned API details.
中文简介正在准备中。当前显示英语简介。
Structure Remotion code so elements can be selected and edited visually in Remotion Studio. Covers reusable scenes, editable text and styles, timeline organization, and keyframes, which define how properties change over time.
中文简介正在准备中。当前显示英语简介。
Choose a technique for adding maps to Remotion videos, from satellite images with animated overlays to globe views, geographic annotations, and terrain flythroughs. Compare approaches based on the intended shot and service requirements.
中文简介正在准备中。当前显示英语简介。
Build Remotion video scenes with animation, media, and visual effects. Follow React markup patterns that keep timing and individual elements editable in Studio, with guidance for reusable scenes and frame-based motion.
中文简介正在准备中。当前显示英语简介。