Remotion Video Creation

affaan-m/ECC/docs/zh-CN/skills/remotion-video-creation

作者 affaan-mef648e01899ba3e8dc6371642deaaf64b4477775無授權條款275K 個星標收錄於 2026年10月9日更新於 2026年10月9日儲存庫4 天前更新

Remotion 最佳实践 - 在 React 中创建视频。29 条领域特定规则,涵盖 3D、动画、音频、字幕、图表、过渡等。

AI 產生的概覽

在 React 中以 Remotion 製作影片的參考規則,涵蓋 3D、動畫、音訊、字幕、圖表與轉場。

功能
此技能是 Remotion(以 React 為基礎的影片框架)的知識參考。它指向 29 個規則檔案,涵蓋 Three.js 3D、動畫、素材、音訊、字幕、圖表、合成、字型、GIF、Lottie、序列、Tailwind、文字動畫、時間曲線、轉場與裁剪等主題。它產出的是說明與程式碼範例,而非影片檔案或指令碼。
適用情境
在處理 Remotion 程式碼並需要特定領域指引時使用。適合查閱 React 中影片合成、動畫、音訊或字幕相關作法的模式與範例。
執行需求
不附指令碼,僅為說明文件。所引用的規則檔案並不在技能資料夾中;所述技術假定已有 Remotion 專案及 React 與相關套件,例如 Three.js、React Three Fiber、Lottie、TailwindCSS、Mediabunny 和 @remotion/captions。

使用时机

当处理 Remotion 代码并需要获取领域特定知识时,请使用此技能。

使用方法

阅读各个规则文件以获取详细说明和代码示例:

  • rules/3d.md [blocked] - 使用 Three.js 和 React Three Fiber 在 Remotion 中创建 3D 内容
  • rules/animations.md [blocked] - Remotion 的基础动画技能
  • rules/assets.md [blocked] - 在 Remotion 中导入图片、视频、音频和字体
  • rules/audio.md [blocked] - 在 Remotion 中使用音频和声音——导入、裁剪、音量、速度、音调
  • rules/calculate-metadata.md [blocked] - 动态设置合成时长、尺寸和属性
  • rules/can-decode.md [blocked] - 使用 Mediabunny 检查浏览器能否解码视频
  • rules/charts.md [blocked] - Remotion 的图表和数据可视化模式
  • rules/compositions.md [blocked] - 定义合成、静态画面、文件夹、默认属性和动态元数据
  • rules/display-captions.md [blocked] - 在 Remotion 中显示字幕,支持 TikTok 风格页面和单词高亮
  • rules/extract-frames.md [blocked] - 使用 Mediabunny 从视频中提取指定时间戳的帧
  • rules/fonts.md [blocked] - 在 Remotion 中加载 Google 字体和本地字体
  • rules/get-audio-duration.md [blocked] - 使用 Mediabunny 获取音频文件的时长(秒)
  • rules/get-video-dimensions.md [blocked] - 使用 Mediabunny 获取视频文件的宽度和高度
  • rules/get-video-duration.md [blocked] - 使用 Mediabunny 获取视频文件的时长(秒)
  • rules/gifs.md [blocked] - 显示与 Remotion 时间线同步的 GIF
  • rules/images.md [blocked] - 使用 Img 组件在 Remotion 中嵌入图片
  • rules/import-srt-captions.md [blocked] - 使用 @remotion/captions 将 .srt 字幕文件导入 Remotion
  • rules/lottie.md [blocked] - 在 Remotion 中嵌入 Lottie 动画
  • rules/measuring-dom-nodes.md [blocked] - 在 Remotion 中测量 DOM 元素尺寸
  • rules/measuring-text.md [blocked] - 测量文本尺寸、将文本适配到容器以及检查溢出
  • rules/sequencing.md [blocked] - Remotion 的序列模式——延迟、裁剪、限制项目时长
  • rules/tailwind.md [blocked] - 在 Remotion 中使用 TailwindCSS
  • rules/text-animations.md [blocked] - Remotion 的排版和文本动画模式
  • rules/timing.md [blocked] - Remotion 中的插值曲线——线性、缓动、弹簧动画
  • rules/transcribe-captions.md [blocked] - 转录音频以在 Remotion 中生成字幕
  • rules/transitions.md [blocked] - Remotion 的场景过渡模式
  • rules/trimming.md [blocked] - Remotion 的裁剪模式——裁剪动画的开头或结尾
  • rules/videos.md [blocked] - 在 Remotion 中嵌入视频——裁剪、音量、速度、循环、音调

來源與署名

來源:affaan-m/ECC位於docs/zh-CN/skills/remotion-video-creation提交ef648e0

授權條款: 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架