SuperAPI AI 工具集

remotion-best-practices-2

设计与创作

查看项目

更新于 10-16 07:11

技能介绍

用途

本技能用于处理 Remotion 代码时获取领域特定的知识。Remotion 是「Video creation in React」(用 React 创建视频)的工具,只要涉及 Remotion 相关开发,即可使用本技能。

主要能力

技能内容以规则文件(rules/*.md)的形式组织,每个文件针对一个主题提供详细说明与代码示例,涵盖:

  • 3D:使用 Three.js 和 React Three Fiber 在 Remotion 中制作 3D 内容
  • 动画:Remotion 的基础动画能力
  • 素材:向 Remotion 导入图片、视频、音频和字体
  • 音频:在 Remotion 中使用声音——导入、裁剪、音量、速度、音高
  • 元数据:动态设置 composition 的时长、尺寸和 props
  • 解码检查:使用 Mediabunny 检查视频能否被浏览器解码
  • 图表:Remotion 中的图表与数据可视化模式
  • 合成:定义 compositions、stills、folders、默认 props 和动态元数据
  • 字幕显示:以 TikTok 风格页面和逐词高亮在 Remotion 中显示字幕
  • 帧提取:使用 Mediabunny 在指定时间戳从视频中提取帧
  • 字体:在 Remotion 中加载 Google Fonts 和本地字体
  • 音频时长:使用 Mediabunny 获取音频文件的秒数时长
  • 视频尺寸:使用 Mediabunny 获取视频文件的宽度和高度
  • 视频时长:使用 Mediabunny 获取视频文件的秒数时长
  • GIF:显示与 Remotion 时间线同步的 GIF
  • 图片:使用 Img 组件在 Remotion 中嵌入图片
  • 字幕导入:使用 @remotion/captions 将 .srt 字幕文件导入 Remotion
  • Lottie:在 Remotion 中嵌入 Lottie 动画
  • DOM 节点测量:在 Remotion 中测量 DOM 元素的尺寸
  • 文本测量:测量文本尺寸、让文本适配容器、检查溢出
  • 时序编排:Remotion 中的 sequencing 模式——延迟、裁剪、限制条目时长
  • Tailwind:在 Remotion 中使用 TailwindCSS
  • 文本动画:Remotion 的排版与文字动画模式
  • 时间控制:Remotion 中的插值曲线——线性、缓动、弹簧动画
  • 字幕转写:将音频转写以在 Remotion 中生成字幕
  • 转场:场景转场模式
  • 裁剪:裁剪模式——切去动画的开头或结尾
  • 视频:在 Remotion 中嵌入视频——裁剪、音量、速度、循环、音高

使用方式

按需阅读对应的规则文件以获得详细说明和代码示例(例如 rules/3d.md、rules/animations.md 等)。

适用场景

涉及 Remotion 视频开发的各类任务,包括动画、音视频处理、字幕、图表可视化、3D 内容等。

限制

本页未提供安装命令、代码实现、收费与价格信息、适用平台说明或实际使用效果数据。