remotion

用途

本技能是一份面向 Remotion 的最佳实践与综合指南。Remotion 是一个使用 React 以程序化方式创建视频的框架。凡是需要处理 Remotion 代码的场景，都可以借助本技能获取领域特定知识，用于构建视频内容、动画、合成与媒体处理。

主要能力

根据资料，本技能覆盖以下主题方向：

• 用 React 组件创建视频合成（compositions）
• 使用基于帧的动画为元素添加动画
• 处理音频、视频和图像素材
• 构建图表与数据可视化
• 实现文字动画与字幕
• 使用 Three.js 呈现 3D 内容
• 应用转场与序列编排
• 集成 Tailwind CSS 与 Lottie 动画

核心概念方面，Remotion 允许通过以下方式创建视频：

• React 组件：使用熟悉的 React 语法构建视频内容
• 基于帧的动画：所有动画由 useCurrentFrame() 这个 hook 驱动
• 合成（Compositions）：定义视频合成的时长、尺寸与 props
• 素材（Assets）：导入并操作图像、视频、音频和字体
• 渲染（Rendering）：以可自定义的设置程序化导出视频

关键特性包括：逐帧控制动画、动态元数据计算、媒体处理（裁剪、音量、速度、音调）、字幕生成与显示、图表数据可视化、3D 内容集成、专业文字动画、场景转场与序列编排。

使用方式

本技能以按主题划分的引用文件（rule files）组织，每个文件提供详细说明与代码示例。需要时阅读对应文件即可。文件分类如下：

核心动画与计时

• references/animations.md：Remotion 的基础动画技术
• references/timing.md：插值曲线，包括线性、缓动与弹簧动画
• references/sequencing.md：延迟、裁剪与限制条目的时长
• references/trimming.md：剪切动画的开头或结尾

合成与元数据

• references/compositions.md：定义合成、静帧、文件夹与默认 props
• references/calculate-metadata.md：动态设置合成的时长、尺寸与 props

素材与媒体

• references/assets.md：导入图像、视频、音频与字体
• references/images.md：使用 Img 组件嵌入图像
• references/videos.md：嵌入视频，支持裁剪、音量、速度、循环、音调
• references/audio.md：使用音频与声音，支持裁剪、音量、速度、音调
• references/gifs.md：显示与时间轴同步的 GIF

文字与排版

• references/text-animations.md：排版与文字动画模式
• references/measuring-text.md：测量文字尺寸、适配文字、检查溢出
• references/fonts.md：加载 Google Fonts 与本地字体

字幕与转写

• references/display-captions.md：显示字幕，支持 TikTok 风格页面与逐词高亮
• references/import-srt-captions.md：使用 @remotion/captions 导入 .srt 字幕文件
• references/transcribe-captions.md：转写音频以生成字幕

数据可视化

• references/charts.md：图表与数据可视化模式

高级特性

• references/3d.md：使用 Three.js 与 React Three Fiber 制作 3D 内容
• references/lottie.md：嵌入 Lottie 动画
• references/transitions.md：场景转场模式

样式与布局

• references/tailwind.md：在 Remotion 中使用 TailwindCSS
• references/measuring-dom-nodes.md：测量 DOM 元素尺寸

媒体处理（Mediabunny）

• references/can-decode.md：检查视频能否被浏览器解码
• references/extract-frames.md：在指定时间戳从视频中提取帧
• references/get-audio-duration.md：获取音频文件的时长
• references/get-video-dimensions.md：获取视频文件的宽高
• references/get-video-duration.md：获取视频文件的时长

快速开始示例

import { useCurrentFrame, useVideoConfig, interpolate } from "remotion";

export const MyComposition = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
    extrapolateRight: 'clamp',
  });

  return (
    <div style={{ opacity }}>
      <h1>Hello Remotion!</h1>
    </div>
  );
};

最佳实践

资料给出以下建议：

• 始终使用 useCurrentFrame()——让所有动画由当前帧驱动
• 避免 CSS 动画——它们在视频中不会正确渲染
• 以秒为单位思考——将秒数乘以 fps 来计算帧数
• 使用 interpolate 实现平滑动画——内置带缓动函数的插值
• 对插值进行 clamp——防止数值超出预期范围
• 频繁测试——渲染前先在 Remotion Studio 中预览

适用场景与限制

适用场景：任何涉及 Remotion 代码的开发工作，包括用 React 组件制作视频、逐帧动画、音视频与图像素材处理、字幕生成与显示、图表可视化、3D 内容、转场编排以及 Tailwind/Lottie 集成等。

相关资源（资料提供）：文档 https://www.remotion.dev/docs ，代码仓库 https://github.com/remotion-dev/remotion ，技能仓库 https://github.com/remotion-dev/skills ，社区为 Discord 与 GitHub Discussions，许可证为 MIT。

限制：本技能指南的具体安装命令、收费方式与价格、支持平台、渲染性能与效果指标等事实，资料中暂未提供。