Remotion视频工作室

|---| | 文字转视频 | 脚本或描述文本 | 自然语言→React视频代码→渲染MP4,输出到output/{project}/ | | 字幕同步 | 音频或配音文件 | 自动生成时间轴对齐的字幕层 | | 数据可视化动画 | 数据集+展示需求 | 数字变化做成动态图表动画 | | 产品演示视频 | 产品功能描述 | 生成终端操作/界面演示动画 | | 社交短视频 | 15-60秒内容脚本 | 竖屏适配,强钩子前3秒 | 不适用于:

• 实拍视频编辑(请用Premiere/Final Cut)
• 3D动画视频(本工具为2D DOM/Canvas渲染)
• 直播推流(非视频生成场景)
• 长视频(30分钟以上,渲染时间过长)

操作流程

Step 1: 需求采集与脚本结构化

1. 接收用户输入:主题、时长、风格、平台(横屏/竖屏)、目标受众
2. 生成视频脚本:分镜列表,每镜包含(时间区间/画面描述/字幕/配音文本)
3. 确认脚本:输出分镜表供用户确认或调整

Step 2: React视频代码生成

1. 初始化项目结构:src/Composition.tsx、src/scenes/、src/audio/
2. 逐场景实现:每个场景为一个React组件,使用``控制时间区间
3. 动画编排:用useCurrentFrame()和插值函数(interpolate())驱动动画
4. 字幕层:基于时间轴渲染字幕,支持样式定制
5. 转场:crossfade/wipe/reveal等转场效果

Step 3: 配音与音效

1. TTS配音:将脚本文本转为语音,生成音频文件(可用国内TTS服务)
2. 音频转录:对配音音频转录,生成精确时间轴用于字幕同步
3. 背景音乐:可选添加BGM,支持节拍同步视觉脉冲

Step 4: 预览与渲染输出

1. 预览:在浏览器中实时预览视频效果(npm start启动Remotion Studio)
2. 渲染:调用渲染管线输出MP4/WebM(npx remotion render)
3. 多规格输出:横屏1920x1080、竖屏1080x1920、方形1080x1080

输入规范

制作一个30秒的产品介绍视频,产品是"AI笔记应用"。
风格:科技感,竖屏(1080x1920),适合抖音发布。
分镜: 0-5s 钩子(痛点) / 5-15s 产品展示 / 15-25s 功能演示 / 25-30s CTA

输出 (output/ai-note-video/src/Composition.tsx):

import { Composition } from "remotion";
import { HookScene } from "./scenes/HookScene";
import { ProductScene } from "./scenes/ProductScene";
import { FeatureScene } from "./scenes/FeatureScene";
import { CTAScene } from "./scenes/CTAScene";
export const ProductVideo = () => {
  return (
    <>
      
    </>
  );
};
const VideoComposition = () => {
  return (
    <>
            {/* 0-5s: 痛点钩子 */}
         {/* 5-15s: 产品展示 */}
         {/* 15-25s: 功能演示 */}
             {/* 25-30s: 行动号召 */}
    </>
  );
};

output/ai-note-video/src/scenes/HookScene.tsx:

import { Sequence, useCurrentFrame, interpolate } from "remotion";
export const HookScene = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 15], [0, 1], { extrapolateRight: "clamp" });
  const translateY = interpolate(frame, [0, 15], [50, 0], { extrapolateRight: "clamp" });
  return (
    
      >
        >
          还在手动整理笔记?
        
      
    
  );
};

渲染命令:

npx remotion render ProductVideo output/ai-note-video/video.mp4 --codec=h264

示例2: 数据可视化动画

输入:

制作一个数据增长动画视频,展示2020-2024年用户数从1万增长到100万。
横屏1920x1080,15秒,数字翻滚效果+柱状图增长动画。

输出 (output/data-viz/src/scenes/GrowthScene.tsx):

import { Sequence, useCurrentFrame, interpolate, spring } from "remotion";
export const GrowthScene = () => {
  const frame = useCurrentFrame();
  const progress = spring({ frame, fps: 30, config: { damping: 200 } });
  const users = Math.floor(interpolate(progress, [0, 1], [10000, 1000000]));
  const barHeight = interpolate(progress, [0, 1], [10, 800]);
  return (
    
      >
        >
          {users.toLocaleString()} 用户
        
         />
      
    
  );
};

异常处理体系

运行环境

运行环境

• Agent平台: Claude Code / Cursor / Codex / Gemini CLI / Windsurf 等支持SKILL.md的任意Agent
• 操作系统: Windows / macOS / Linux
• 运行时: 需要Agent支持exec(命令行执行)能力

依赖说明(补充)

API Key 配置

• 本Skill本身无需API Key: 代码生成由Agent LLM完成
• TTS服务: 阿里云/腾讯云TTS的API Key通过环境变量传入,不硬编码
• Whisper API: 如用云端Whisper,API Key通过环境变量传入
• 安全要求: API Key零暴露,不写入视频代码、不输出到日志、不硬编码

可用性分类

• 分类: MD+EXEC
• 说明: 纯Markdown,但需要exec能力(命令行执行),用于运行Remotion渲染

核心能力详解

• Composition编排:多场景``组合,时间轴精确控制
• 动画原语:淡入淡出、缩放、位移、旋转、路径动画
• 文字特效:marker sweep(标记扫过)、手绘圆圈、爆发线、scribble、sketchout
• 数据可视化:动态柱状图、折线图、数字翻滚
• 音频反应:beat sync(节拍同步)、glow pulse(发光脉冲)
• 字幕与标题卡:同步字幕、动画标题卡、overlay字幕
• 转场:crossfade、wipe、reveal、shader transition

快速开始

1. 确认运行环境满足依赖说明中的要求
2. 在AI Agent对话中调用本技能,提供必要的输入参数
3. 检查输出结果,根据需要进行后续处理

详细的输入输出格式请参考下方章节说明。

设计原则

1. 帧即网页:每一帧都是React渲染的DOM/Canvas
2. 可组合:动画原语可自由组合,不硬编码
3. 可预览:浏览器实时预览,所见即所得
4. 可渲染:确定性渲染,同一代码同一视频
5. 性能优先:避免每帧重计算,用useMemo缓存

输出规范

• 视频代码保存到output/{project-name}/src/
• 脚本分镜表保存到output/{project-name}/script.md
• 渲染命令:npx remotion render {Composition} out/video.mp4
• 支持参数化:通过props传入不同数据生成系列视频

案例展示

以下案例展示了skill的工作流程和预期输出效果，由LLM按照skill定义的流程生成。

案例1: 竖屏短视频(前3秒强钩子+CTA)

输入:

主题: 知识付费课程推广短视频
时长: 15秒
平台: 抖音(竖屏1080x1920)
风格: 科技感,强钩子
分镜:
- 0-3s: 钩子("这个技能让你薪资翻倍")
- 3-8s: 痛点+解决方案展示
- 8-12s: 课程亮点(3个要点动画)
- 12-15s: CTA("点击链接立即学习")

LLM生成输出 (output/course-promo/src/Composition.tsx):

import { Composition } from "remotion";
import { SolutionScene } from "./scenes/SolutionScene";
/scenes/FeatureScene";
export const CoursePromo = () => (
  
);
const VideoComposition = () => (
  <>
          {/* 0-3s: 强钩子 */}
      {/* 3-8s: 痛点+方案 */}
       {/* 8-12s: 课程亮点 */}
           {/* 12-15s: 行动号召 */}
  </>
);

LLM生成输出 (output/course-promo/src/scenes/HookScene.tsx):

import { Sequence, useCurrentFrame, interpolate, spring } from "remotion";
export const HookScene = () => {
  const frame = useCurrentFrame();
  // 文字弹入动画(spring弹性)
  const scale = spring({ frame, fps: 30, config: { damping: 12, stiffness: 200 } });
  // 背景脉冲效果
  const bgPulse = interpolate(
    Math.sin(frame * 0.3), [-1, 1], [0.85, 1]
  );
  // 3秒末淡出
  const opacity = interpolate(frame, [75, 90], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
  return (
    
      >
        >
          这个技能让你薪资翻倍
        
      
    
  );
};

LLM生成输出 (output/course-promo/src/scenes/FeatureScene.tsx):

import { Sequence, useCurrentFrame, interpolate, spring } from "remotion";
const features = [
  { icon: "🚀", title: "实战项目驱动", desc: "5个企业级项目" },
  { icon: "💼", title: "大厂面试题库", desc: "200+高频题" },
  { icon: "🎓", title: "导师1v1辅导", desc: "简历优化+模拟面试" },
];
export const FeatureScene = () => {
  const frame = useCurrentFrame();
  return (
    
      >
        >
          课程三大亮点
        
        {features.map((feature, i) => {
          // 每个要点依次弹入(stagger)
          const delay = i * 15;
          const localFrame = frame - delay;
          const itemOpacity = interpolate(localFrame, [0, 10], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
          const translateY = interpolate(localFrame, [0, 10], [50, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
          return (
            >
              >{feature.icon}
              
                >{feature.title}
                >{feature.desc}
              
          );
        })}
      
    
  );
};

LLM生成输出 (output/course-promo/src/scenes/CTAScene.tsx):

import { Sequence, useCurrentFrame, interpolate, spring } from "remotion";
export const CTAScene = () => {
  const frame = useCurrentFrame();
  // 按钮脉冲动画
  const buttonScale = interpolate(
    Math.sin(frame * 0.2), [-1, 1], [1, 1.08]
  );
  const opacity = interpolate(frame, [0, 15], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
  return (
    
      >
        >
          限时特惠立减500元
        
        >
          >
            点击链接立即学习
          
        
    
  );
};

LLM生成输出 (output/course-promo/script.md):

| 镜号 | 时间 | 画面描述 | 字幕 | 配音文本 |
|:------|------:|:------|:------|------:|
| 1 | 0-3s | 黑底绿字弹入,脉冲背景 | 这个技能让你薪资翻倍 | 想让薪资翻倍?这个技能你必须知道 |
| 2 | 3-8s | 痛点文字+方案展示 | 程序员进阶痛点→系统化课程 | 很多程序员卡在初级岗,缺的是系统化的进阶路线 |
| 3 | 8-12s | 三个亮点依次弹入 | 实战项目/面试题库/1v1辅导 | 我们的课程:5个实战项目+200道面试题+导师1对1辅导 |
| 4 | 12-15s | CTA按钮脉冲 | 限时特惠立减500元 | 限时特惠立减500,点击链接立即学习 |

效果验证: ✓竖屏1080x1920正确 ✓前3秒强钩子(spring弹入+脉冲) ✓stagger动画(要点依次出现) ✓CTA按钮脉冲动画 ✓分镜表含时间/画面/字幕/配音

案例2: 数据可视化动画(数字翻滚+柱状图增长)

输入:

主题: 展示公司2020-2024年用户增长
时长: 10秒
风格: 数据科技感,横屏1920x1080
要求: 数字翻滚效果+柱状图从0增长的动画
数据: 2020:1万, 2021:5万, 2022:15万, 2023:35万, 2024:100万

LLM生成输出 (output/data-viz/src/scenes/GrowthScene.tsx):

import { Sequence, useCurrentFrame, interpolate, spring } from "remotion";
const data = [
  { year: "2020", users: 10000 },
  { year: "2021", users: 50000 },
  { year: "2022", users: 150000 },
  { year: "2023", users: 350000 },
  { year: "2024", users: 1000000 },
];
export const GrowthScene = () => {
  const frame = useCurrentFrame();
  const durationInFrames = 300; // 10秒 @ 30fps
  // 总体进度(0到1,用spring实现缓动)
  const progress = spring({
    frame,
    fps: 30,
    config: { damping: 200, mass: 1 },
    durationInFrames: 120,
  });
  // 当前显示的数据索引(随时间推进)
  const dataIndex = Math.min(
    Math.floor(interpolate(frame, [30, 270], [0, data.length - 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" })),
    data.length - 1
  );
  // 当前数字(翻滚效果)
  const currentUsers = Math.floor(
    interpolate(progress, [0, 1], [10000, data[dataIndex].users])
  );
  // 格式化数字
  const formatNumber = (num: number) => {
    if (num >= 10000) return `${(num / 10000).toFixed(1)}万`;
    return num.toLocaleString();
  };
  // 最大柱状图高度(像素)
  const maxBarHeight = 500;
  const maxUsers = data[data.length - 1].users;
  return (
    
      >
        {/* 大标题 */}
        >
          用户增长 2020-2024
        
        {/* 翻滚数字 */}
        >
          {formatNumber(currentUsers)}
        
        {/* 柱状图 */}
        >
          {data.map((item, i) => {
            // 每个柱子依次增长(stagger)
            const barDelay = i * 40;
            const barProgress = spring({
              frame: frame - barDelay,
              fps: 30,
              config: { damping: 200 },
              durationInFrames: 60,
            });
            const barHeight = (item.users / maxUsers) * maxBarHeight * Math.max(0, barProgress);
            // 当前高亮的柱子
            const isActive = i === dataIndex;
            const barColor = isActive ? "#00FF88" : "#3A3A6E";
            return (
              >
                 />
                >
                  {item.year}
                
              
            );
          })}
        
        {/* 底部标注 */}
        >
          5年增长100倍 · 数据来源: 公司年报
        
      
    
  );
};

效果验证: ✓数字翻滚效果(interpolate+spring缓动) ✓柱状图stagger增长(依次弹起) ✓当前数据柱子高亮(颜色+发光) ✓格式化显示(1万/100万) ✓数据来源标注

注: 本SKILL.md超过500行上限, 已截断尾部非核心章节以满足L1格式要求。完整内容见版本库历史。

用户咨询

Q1: 视频创作工作室支持哪些输入格式？

A1: 自然语言转视频,用React代码生成字幕转场配音动画,无需剪辑软件。视频创作工作室将自然语言描述转换为基于React的可渲染视频代码,核心功能包括分镜脚本结构化。支持文本指令和结构化参数输入，具体格式参考使用流程章节。

Q2: 需要配置API Key吗？

A2: 是的，部分功能需要配置对应平台的API Key。请在依赖说明章节查看具体要求，并通过环境变量安全配置。

Q3: 命令行执行失败怎么办？

A3: 检查命令参数是否正确，确认运行环境支持exec能力。如遇权限问题，请参照错误处理章节排查。

安全规范

安全风险防范

使用指引

1. 配置API密钥: 在环境变量中设置对应的API Key
2. 初始化连接: 使用提供的凭证建立API连接
3. 调用接口: 传入必要参数执行API调用
4. 准备文件: 确认文件路径正确且格式受支持
5. 执行处理: 调用对应的处理函数
6. 查看结果: 检查输出文件或返回数据
7. 检查环境: 确认运行时和依赖已安装
8. 执行命令: 使用正确的参数格式执行
9. 查看输出: 检查命令输出和退出码

前置条件

• 已安装所需运行环境(参考依赖说明)
• 已获取必要的API密钥或访问凭证(如适用)
• 输入数据已准备就绪

功能特色

• 自动化执行: 自然语言转视频,用React代码生成字幕转场配音动画,无需剪辑软件。视频创作工作室将自然语言描述转换为基于React的可
• 文件处理: 支持多种文件格式的读取、解析和写入操作
• API集成: 通过标准化接口调用外部服务并处理响应
• 命令执行: 在安全沙箱中执行系统命令并收集结果

性能评估

差异分析

疑问与回应

Q1: 本技能支持哪些输入格式？

Q1: Remotion Video Studio支持哪些输入格式？

A1: Remotion Video Studio专业技能工具。