Remotion MCP Studio

视频工作室

一个独立的、简短驱动的视频生成工作室，由Remotion构建。通过在JSON简报中定义内容，以编程方式创建专业视频。

特性

• 简短驱动：使用JSON内容摘要定义视频
• 多种格式：解释者、列表、比较、短片模板
• 主题造型：深色、浅色、霓虹灯主题，可完全定制
• 动画库：淡入淡出、滑动、缩放、反弹、打字机效果
• 场景模板：简介、主题、列表项、Outro、过渡场景
• CLI渲染：从命令行渲染视频
• 后端集成就绪：专为程序化视频生成而设计

快速开始

1.安装依赖项

npm install

2.在Studio中预览

npm run dev

打开远程工作室http://localhost:3000

3.简述

npm run render:brief data/briefs/example_explainer.json

项目结构

VideoStudio/
├── src/
│   ├── scenes/              # Scene templates
│   │   ├── IntroScene.tsx
│   │   ├── TopicScene.tsx
│   │   ├── OutroScene.tsx
│   │   ├── TransitionScene.tsx
│   │   └── ListItemScene.tsx
│   ├── components/          # Reusable visual components
│   │   ├── TextBlock.tsx
│   │   ├── ImageContainer.tsx
│   │   ├── ProgressBar.tsx
│   │   ├── BackgroundGradient.tsx
│   │   └── IconBadge.tsx
│   ├── animations/          # Animation presets
│   │   ├── fadeIn.ts
│   │   ├── slideIn.ts
│   │   ├── typewriter.ts
│   │   ├── bounce.ts
│   │   └── zoom.ts
│   ├── styles/              # Style configurations
│   │   ├── themes/
│   │   ├── fonts.ts
│   │   └── colors.ts
│   ├── utils/               # Utility functions
│   │   ├── timing.ts
│   │   ├── easing.ts
│   │   └── layout.ts
│   ├── types/               # TypeScript types
│   │   └── ContentBrief.ts
│   └── compositions/        # Remotion compositions
│       └── BriefComposition.tsx
├── formats/                 # Video format definitions
│   ├── explainer_v1.ts
│   ├── listicle_v1.ts
│   ├── comparison_v1.ts
│   └── shorts_v1.ts
├── data/
│   ├── briefs/              # Content brief JSON files
│   │   ├── example_explainer.json
│   │   ├── example_listicle.json
│   │   └── schema.json
│   └── assets/              # Static assets
├── scripts/
│   ├── render.ts            # CLI render script
│   ├── preview.ts           # Dev preview server
│   └── validate-brief.ts    # Brief validation
└── output/                  # Rendered videos

内容简要架构

视频使用JSON内容摘要定义：

{
  "id": "my_video_001",
  "format": "explainer_v1",
  "version": "1.0",
  "settings": {
    "resolution": { "width": 1080, "height": 1920 },
    "fps": 30,
    "duration_sec": 60,
    "aspect_ratio": "9:16"
  },
  "style": {
    "theme": "dark",
    "primary_color": "#ffffff",
    "secondary_color": "#a1a1aa",
    "accent_color": "#3b82f6",
    "font_heading": "Inter",
    "font_body": "Inter",
    "background_type": "gradient",
    "background_value": "linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%)"
  },
  "sections": [
    {
      "id": "intro_001",
      "type": "intro",
      "duration_sec": 9,
      "start_time_sec": 0,
      "content": {
        "type": "intro",
        "title": "Your Title",
        "subtitle": "Your Subtitle",
        "hook_text": "Your hook text"
      }
    }
  ]
}

可用格式

节类型

• 介绍：以标题、副标题、钩子开头
• 话题：主要内容包括标题、正文、项目符号、图像
• list_item：带有标题和描述的编号项目
• 比较：并排比较
• 结尾：以CTA和社交账号结束
• 过渡：各部分之间的动画过渡

CLI命令

# Start development studio
npm run dev

# Render video from brief
npm run render:brief 
 [output.mp4]

# Validate brief without rendering
npm run validate 

# Preview with specific brief
npm run studio 

后端集成

连接到后端系统时：

# Python example
import subprocess
import json

def render_video(brief: dict, output_path: str):
    brief_path = f"/tmp/brief_{brief['id']}.json"
    with open(brief_path, 'w') as f:
        json.dump(brief, f)
    
    result = subprocess.run([
        "npx", "tsx", "scripts/render.ts",
        brief_path, output_path
    ], cwd="/path/to/VideoStudio", capture_output=True)
    
    if result.returncode != 0:
        raise RuntimeError(result.stderr.decode())
    
    return output_path

定制

添加新主题

在中创建新主题 src/styles/themes/:

export const myTheme: Partial = {
  theme: 'custom',
  primary_color: '#yourcolor',
  // ...
};

添加新场景

1. 在中创建场景 src/scenes/MyScene.tsx
2. 注册于 src/scenes/index.ts
3. 根据需要添加到格式定义中

添加新动画

在中创建动画 src/animations/:

export function myAnimation(frame: number, options: Options) {
  // Return animated values
  return { opacity, scale, x, y };
}

许可证

麻省理工学院