remotion

# Remotion - React 视频创作 使用 Remotion 进行程序化视频创作的综合技能集，这是一个使用 React 以编程方式创建视频的框架。 ## 何时使用 每当处理 Remotion 代码时，请使用此技能获取以下领域的专业知识： - 使用 React 组件创建视频合成 - 使用基于帧的动画来制作元素动画 - 处理音频、视频和图像资源 - 构建图表和数据可视化 - 实现文本动画和字幕 - 在 Three.js 中使用 3D 内容 - 应用转场和序列化 - 集成 Tailwind CSS 和 Lottie 动画 ## 核心概念 Remotion 允许您使用以下方式创建视频： - **React 组件**：使用熟悉的 React 语法构建视频内容 - **基于帧的动画**：所有动画均由 `useCurrentFrame()` 钩子驱动 - **合成 (Compositions)**：定义具有持续时间、尺寸和属性的视频合成 - **资源 (Assets)**：导入和操作图像、视频、音频和字体 - **渲染**：通过可自定义的设置以编程方式导出视频 ## 主要功能 - 逐帧控制动画 - 动态元数据计算 - 媒体处理（修剪、音量、速度、音调） - 字幕生成与显示 - 图表数据可视化 - 3D 内容集成 - 专业文本动画 - 场景转场与序列化 ## 如何使用 阅读各个规则文件以获取详细说明和代码示例： ### 核心动画与计时 - **[references/animations.md](references/animations.md)** - Remotion 的基础动画技术 - **[references/timing.md](references/timing.md)** - 插值曲线：线性、缓动、弹簧动画 - **[references/sequencing.md](references/sequencing.md)** - 延迟、修剪和限制项目的持续时间 - **[references/trimming.md](references/trimming.md)** - 剪切动画的开头或结尾 ### 合成与元数据 - **[references/compositions.md](references/compositions.md)** - 定义合成、静态图像、文件夹、默认属性 - **[references/calculate-metadata.md](references/calculate-metadata.md)** - 动态设置合成持续时间、尺寸和属性 ### 资源与媒体 - **[references/assets.md](references/assets.md)** - 导入图像、视频、音频和字体 - **[references/images.md](references/images.md)** - 使用 Img 组件嵌入图像 - **[references/videos.md](references/videos.md)** - 嵌入带有修剪、音量控制的视频