SuperAPI AI 工具集

remotion-best-practices

编程与开发

查看项目

更新于 10-15 21:48

技能介绍

用途:在编写或维护 Remotion 代码时提供领域知识,用 React/TypeScript 以编程方式构建视频并渲染为 MP4。

主要能力与用法: 新建项目可用 npx create-video@latest --yes --blank --no-tailwind my-video 脚手架;预览用 npx remotion studio;单帧检查用 npx remotion still [composition-id] --scale=0.25 --frame=30(--frame 从 0 开始)。 动画使用 useCurrentFrame() 与 interpolate(),除非需要物理运动否则优先 interpolate() 而非 spring(),可用 Easing.bezier() 定制时序。为便于在 Remotion Studio 中编辑,建议把 interpolate() 内联写在 style 中,并使用 scale、translate、rotate 等独立 CSS transform 属性,而非拼接 transform 字符串。禁止使用 CSS transition/animation 与 Tailwind 动画类名,它们无法正确渲染。 资源放在项目根目录 public/ 下,用 staticFile() 引用,也可用远程 URL;图片用 <Img>,视频与音频用 @remotion/media 的 <Video>、<Audio>。用 <Sequence> 的 from 延迟内容、durationInFrames 限制时长,默认绝对填充,内联内容用 layout="none"。视频宽高、fps、时长在 src/Root.tsx 的 <Composition> 中定义,也可通过 calculateMetadata 动态计算。

适用场景:视频布局与文字排版、动效与转场、字幕、音视频处理、特效、3D、字体、参数化视频、地图、配音等,分别对应 rules/ 下的规则文件(如 video-layout.md、subtitles.md、ffmpeg.md、effects.md、3d.md、audio.md、google-fonts.md、parameters.md、maplibre.md、voiceover.md 等)。

限制:资料未提供收费、价格、平台支持范围与效果保证等信息;具体实现细节需查阅对应规则文件与官方文档。