前言¶

做程序化视频的人常遇到一个麻烦：时间控制散落在代码各处。字幕什么时候出现、画面什么时候切、动画什么时候进场，往往写在 CSS 动画、定时器、外部剪辑软件里，混在一起后很难逐帧复现，更谈不上改一个参数批量渲染。Remotion 的思路是把整条时间轴交给 React 组件，帧号就是组件的状态。下面介绍的这个 Skill 把这套思路整理成了可直接查阅的规则集，重点覆盖字幕、动画与时间轴编排。

这是什么¶

一句话定位：这是 Remotion（用 React 写代码生成视频的开源框架）的最佳实践规则集，由 am-will 维护，发布在 ClawHub，经 SkillHub 收录。坐标 @clawhub_am-will/remotion，版本 1.0.1，许可 MIT-0。它解决的问题是：当开发者或 Agent 要写 Remotion 代码时，给出领域知识入口，避免从零摸索 API 和常见坑。

按 SkillHub 页面快照：评分 100000，下载 39214 次，安装 2492 次，分类 design-media，不需要 API Key（requires_api_key=false）。

核心功能¶

Skill 的主体是一组 rules/*.md 规则文件，覆盖以下能力（均来自 ClawHub 页面列出的文件清单）：

1. 时间轴与编排：timing.md（线性、缓动、弹簧插值曲线）、sequencing.md（delay、trim、limit 元素时长）、trimming.md（裁掉动画首尾）、transitions.md（场景转场）、animations.md（基础动画）。
2. 字幕：display-captions.md（TikTok 式字幕页与逐词高亮）、import-srt-captions.md（用 @remotion/captions 导入 .srt）、transcribe-captions.md（从音频转写生成字幕）。
3. 文字动画：text-animations.md（排版与文字动画模式）。
4. 组合结构：compositions.md（定义 Composition、Still、文件夹、默认 props、动态元数据）、calculate-metadata.md（动态设置时长、尺寸、props）。
5. 媒体素材：assets.md、images.md、videos.md、audio.md、gifs.md、fonts.md。
6. 测量与媒体探测：measuring-dom-nodes.md、measuring-text.md、can-decode.md、extract-frames.md、get-audio-duration.md、get-video-duration.md、get-video-dimensions.md。
7. 其他：3d.md（Three.js / React Three Fiber）、lottie.md、charts.md、tailwind.md。

安装与启用¶

官方安装命令（ClawHub 页面给出）：

openclaw skills install @am-will/remotion

页面同时提供 CLI 方式 npx skills。启用方式在 Skill 的 “When to use” 中写明：只要在处理 Remotion 代码，就使用它获取领域知识；”How to use” 是阅读单个规则文件获取解释和代码示例。

Cursor、Codex CLI、Claude Code 的具体接入方式，官方页面未给出差异说明，这里不做展开。

典型用法¶

下面三个用法分别对应 rules 中的 compositions.md、sequencing.md、timing.md，是 Remotion 的标准写法。

1、用 Composition 声明时间轴上的一段。每个 Composition 是独立的渲染单元，可单独导出：

import { Composition, useCurrentFrame } from "remotion";

export const SubtitleCard: React.FC<{text: string}> = ({text}) => {
  const frame = useCurrentFrame();
  return <div>{text} — 当前帧 {frame}</div>;
};

export const MyComp: React.FC = () => (
  <Composition
    id="subtitle-card"
    component={SubtitleCard}
    durationInFrames={120}
    fps={30}
    width={1080}
    height={1920}
    defaultProps={{text: "你好"}}
  />
);

2、用 Sequence 做序列偏移。字幕、片段需要延迟进场或限时长时，用 sequence 控制起始帧，而不是手写算术：

import { Sequence } from "remotion";

export const Scene: React.FC = () => (
  <>
    <Sequence from={30} durationInFrames={60}>
      {/* 第 30 帧开始的字幕段 */}
    </Sequence>
    <Sequence delay={15}>
      {/* 整体延后 15 帧 */}
    </Sequence>
  </>
);

3、用插值函数做动画进场。timing.md 覆盖 linear、easing、spring 三类曲线：

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

export const FadeIn: React.FC = () => {
  const frame = useCurrentFrame();
  const scale = spring({frame, fps: 30, config: {damping: 200}});
  const opacity = interpolate(frame, [0, 15], [0, 1]);
  return <div style={{opacity, transform: `scale(${scale})`}} />;
};

适用场景与注意¶

适合：已经在用 Remotion 做批量视频、字幕卡片、数据可视化动画，或想让 Agent 代写 Remotion 代码的开发者。它把散装经验变成规则文件，省去查文档和踩坑的时间。

注意：Skill 依赖 Node 环境与 Remotion 项目本身，只提供知识，不替代渲染管线；转写字幕（transcribe-captions.md）的具体服务依赖未在页面说明，接入前需自行确认；页面显示最后更新于约 5 个月前，Remotion 主版本迭代较快，个别 API 以官方文档为准。

结尾¶

这个 Skill 的价值在于把「时间轴上的一切」收敛到帧号这一个变量上：字幕、转场、动画都能逐帧复现、参数化批量渲染。官方地址：https://api.skillhub.cn/indiv-slug/remotion。