突兀运动

基于人工智能的Remotion视频生成——一种创建专业多平台视频的设计系统优先方法

![Python 3.11+](https://www.python.org/downloads/) ![MCP](https://github.com/anthropics/mcp) ![Tests](tests/) ![Coverage](tests/)

概述

chuk-motion 是一个MCP（模型上下文协议）服务器，它带来了远程动议视频生成到像克劳德这样的人工智能助手。它提供了一个 设计系统优先法 通过全面的设计令牌，使人工智能能够创建针对以下方面进行优化的专业动画视频 YouTube、TikTok、领英、Instagram故事以及更多。

主要特点

🎨 完整的设计体系：颜色、排版、间距和运动的设计标记
📱 多平台支持：领英、TikTok、Instagram、YouTube的安全边际
🎬 51视频组件：图表、代码块、场景、叠加、布局、动画、文本动画、过渡和演示现实主义
🎨 7内置主题：科技、金融、教育、生活方式、游戏、极简主义、商业
⚡ 基于轨迹的时间线：专业多轨作曲系统
🤖 LLM友好：具有详细模式的可发现组件
📊 数据可视化：动画图表（饼图、条形图、线条图、面积图、环形图、水平条形图）
💻 代码显示：带有键入动画的语法突出显示的代码块

设计系统

四种代币类别

颜色 (tokens/colors.py)

- 7个针对视频优化的主题调色板 - 暗/亮模式支持(on_dark, on_light) - 背景变体（深色、浅色、玻璃色） - 语义颜色（成功、警告、错误、信息）

排版 (tokens/typography.py)

- 720p、1080p、4K的字体比例 - 主字体和代码字体堆栈 - 字体粗细、行高、字母间距 - 视频可读性优化

间距 (tokens/spacing.py) ⭐ 新

- 10步间距比例（4px-120px） - 7平台安全裕度：领英、Instagram故事/广场、TikTok、YouTube、移动 - 边界半径标记 - 布局宽度标记

运动 (tokens/motion.py)

- 动画的弹簧配置 - 缓和曲线（缓和、缓和、反弹） - 持续时间预设（快速、正常、慢速）

平台安全边际

确保您的内容不会被平台UI裁剪：

平台	顶部	底部	左侧	右侧	注释
LinkedIn Feed	40px	40px	24px	24px	推荐8-24px安全区
Instagram故事	100px	120px	24px	24px	顶部/底部的UI覆盖
试试看。	100像素	180像素	24像素	80px	右侧侧面按钮
油管	20px	20px	20 px	20 px	标准边距
移动垂直	80像素	100像素	-	-	9:16格式
移动式水平	-	-	24px	24px	16:9格式
Instagram广场	32px（所有边）	-	-	--	1:1格式

构件库

📊 图表（6个组件）

所有图表都支持设计标记和流畅的动画：

饼图 -比例和百分比
柱状图 -垂直条比较
水平柱状图 -排名前三的横条突出显示
线条图 -随时间变化的趋势
区域图表 -填充区域趋势
DonutChart -带中心统计的环形图

🎬 场景（2个组件）

标题场景 -全屏动画标题（4个变体，5个动画）
结束画面 -带有CTA的YouTube终端屏幕（4种变体）

🎨 覆盖层（3个组件）

LowerThird -铭牌（5个变体，5个位置）
文本叠加 -动画文本强调（5种风格，5个动画）
Crisubsbebin -动画订阅按钮（5个动画）

💻 代码（3个组件）

码块 -语法高亮代码显示（4种变体：最小值、终端、编辑器、玻璃）
打字代码 -逐个角色键入动画（4种变体，4种光标样式）
CodeDiff -通过语法高亮显示进行并排代码比较

📐 布局（17个组件）

多平台内容的专业视频布局：

不对称布局 -主馈送（2/3）+堆叠演示面板（1/3）
容器 -带有可选边框和背景的内容容器
对话框架 -与演讲者/听众的对话风格布局
FocusStrip -聚焦条叠加的主要内容
网格 -灵活的网格布局（8种类型：1x2、2x1、2x2、3x2、2x3、3x3、4x2、2x4）
HUD 风格 -HUD风格的叠加布局（4个角+中心）
马赛克 -多片段马赛克网格布局
肩上 -带有屏幕内容的演示者
性能MultiCam -主摄像头+最多4个辅助摄像头
画中画 -带定位的画中画
分屏 -并排或上下分割（4种分隔样式）
叠加反应 -叠加反应内容
ThreeByThreeGrid -3x3网格布局，适用于多个项目
ThreeColumn布局 -三列布局
ThreeRow布局 -三排布局
时间线 -基于时间线的事件显示
垂直 -双面板垂直分割

🎬 动画（3个组件）

计数器 -动画数字计数器（4个动画：count_up、flip、slot_machine、数字）
布局入口 -布局入口动画以实现平滑的组件显示
小组委员会 -级联面板动画，实现连续展示

✨ 文本动画（6个组件）

受ReactBits启发的动态文本效果：

打字机文本 -带有可选闪烁光标的经典打字机动画
交错文本 -春季物理学交错揭示（基于字符或单词）
WavyText -具有正弦波振荡的连续波动
TrueFocus -带动画角括号的逐字焦点循环
解密文本 -角色混乱揭示了多个方向
模糊文本 -带有扫描线和RGB分割的VHS毛刺效果

🎭 演示现实主义（4个组件）

逼真的UI模型和演示：

前后滑块 -比较前后互动滑块
浏览器框架 -带有逼真chrome和标签的浏览器窗口
设备框架 -带有内容的设备模型（手机、平板电脑、台式机）
终端 -带有命令历史记录和键入的终端窗口

📦 内容（5个组成部分）

DemoBox -用于演示的可重用内容容器
图片内容 -图像显示具有灵活的尺寸（包含、覆盖、填充）和样式选项
风格化网页 -用于演示的风格化网页模型
视频内容 -带控件的视频内容占位符
网页 -干净的网页模型，可定制内容

🔄 过渡（2个组成部分）

布局转换 -不同布局之间的平滑过渡
像素转换 -像素化过渡效果

总计：51个生产就绪组件 -全部使用具有全面测试覆盖率的设计令牌！

安装

先决条件

Python 3.11+
Node.js 18+（用于远程）
npm或纱线

安装Python包

# Install dependencies with uv (recommended)
uv pip install -e .

# Or with pip
pip install -e .

安装远程

# Remotion is installed per-project automatically
# The MCP server handles this when generating projects

快速开始

1.启动MCP服务器

STDIO模式 （适用于克劳德桌面）：

python -m chuk_motion.server stdio

HTTP模式 （用于测试/开发）：

python -m chuk_motion.server http --port 8000

2.创建项目

# Via MCP tools
remotion_create_project(
    name="my_video",
    theme="tech",
    fps=30,
    width=1920,
    height=1080
)

3.添加组件

# Add a title scene
remotion_add_title_scene(
    text="Welcome to AI Videos",
    subtitle="Created with Design Tokens",
    variant="bold",
    animation="fade_zoom",
    duration="3s"
)

# Add a chart with safe margins
remotion_add_pie_chart(
    data='[{"label": "AI", "value": 40}, {"label": "ML", "value": 30}]',
    title="Technology Distribution",
    duration="4s",
    gap_before="1s"  # Time strings supported!
)

# Add code with typing animation
remotion_add_typing_code(
    code="console.log('Hello, World!');",
    language="javascript",
    title="Example Code",
    typing_speed="medium",
    duration="5s"
)

# Add images
remotion_add_image_content(
    src="https://picsum.photos/1920/1080",
    fit="cover",
    duration="3s"
)

4.渲染视频

cd remotion-projects/my_video
npm install
npm start  # Preview in browser
npm run build  # Render to MP4

例子

这 examples/ 目录包含生产就绪演示：

设计系统展示

# Complete design system showcase (90 seconds)
python examples/design_system_showcase.py

# Platform safe margins demo (60 seconds)
python examples/safe_margins_demo.py

# Explore all design tokens
python examples/explore_design_system.py

组件展示

# Complete text animations showcase (52.5 seconds)
python examples/all_text_animations_demo.py

# Image layouts showcase - 17 examples (127 seconds)
python examples/image_layouts_showcase.py

# Content showcase - All 5 content components
python examples/content_showcase.py

# Fibonacci code typing demo
python examples/fibonacci_demo.py

所有示例都使用 API项目经理 使用基于轨迹的时间线系统。

MCP工具参考

项目管理

remotion_create_project(name, theme, fps, width, height) -创建新项目
remotion_get_project_info() -获取当前项目信息
remotion_list_projects() -列出所有项目

组件工具（共50个）

图表

remotion_add_pie_chart(data, title, duration, track, gap_before)
remotion_add_bar_chart(data, title, duration, track, gap_before)
remotion_add_horizontal_bar_chart(data, title, duration, track, gap_before)
remotion_add_line_chart(data, title, xlabel, ylabel, duration, track, gap_before)
remotion_add_area_chart(data, title, duration, track, gap_before)
remotion_add_donut_chart(data, title, duration, track, gap_before)

叠加层

remotion_add_title_scene(text, subtitle, variant, animation, duration, track, gap_before)
remotion_add_end_screen(cta_text, variant, duration, track, gap_before)
remotion_add_lower_third(name, title, variant, position, duration, track, gap_before)
remotion_add_text_overlay(text, style, animation, position, duration, track, gap_before)
remotion_add_subscribe_button(animation, position, duration, track, gap_before)

代码

remotion_add_code_block(code, language, title, variant, animation, show_line_numbers, duration, track, gap_before)
remotion_add_typing_code(code, language, title, variant, cursor_style, typing_speed, show_line_numbers, duration, track, gap_before)

布局

remotion_add_grid(children, layout, duration, track, gap_before)
remotion_add_container(content, border, duration, track, gap_before)
remotion_add_split_screen(left, right, variant, duration, track, gap_before)

动画

remotion_add_counter(start_value, end_value, prefix, suffix, decimals, animation, duration, track, gap_before)

文本动画

remotion_add_typewriter_text(text, font_size, font_weight, text_color, cursor_color, show_cursor, type_speed, position, align, duration, track, gap_before)
remotion_add_stagger_text(text, font_size, font_weight, text_color, stagger_by, stagger_delay, animation_type, position, align, duration, track, gap_before)
remotion_add_wavy_text(text, font_size, font_weight, text_color, wave_amplitude, wave_speed, wave_frequency, position, align, duration, track, gap_before)
remotion_add_true_focus(text, font_size, font_weight, text_color, word_duration, position, duration, track, gap_before)
remotion_add_decrypted_text(text, font_size, font_weight, text_color, reveal_direction, scramble_speed, position, duration, track, gap_before)
remotion_add_fuzzy_text(text, font_size, font_weight, text_color, glitch_intensity, animate, position, duration, track, gap_before)

发现工具

remotion_list_components(category) -列出可用组件
remotion_search_components(query) -搜索组件
remotion_get_component_schema(name) -获取组件详细信息
remotion_list_themes() -列出可用主题
remotion_get_theme_info(name) -获取主题详细信息

令牌工具

remotion_list_color_tokens() -调色板
remotion_list_typography_tokens() -排版系统
remotion_list_motion_tokens() -运动设计
remotion_list_spacing_tokens() ⭐ 新增-间距和安全裕度

信息工具

remotion_get_info() -服务器信息和统计

时间字符串格式⭐ 新

所有持续时间和计时参数都支持灵活的时间字符串：

# String formats
duration="2s"       # 2 seconds
duration="500ms"    # 500 milliseconds
duration="1.5s"     # 1.5 seconds
duration="1m"       # 1 minute (60 seconds)
gap_before="1s"     # 1 second gap
gap_before="250ms"  # 250ms gap

# Float format still works
duration=2.0
gap_before=0.5

基于轨迹的时间线系统

时间表采用专业的多轨道方法：

# Main track: Sequential auto-stacking
remotion_add_title_scene(...)  # Starts at 0s
remotion_add_pie_chart(...)    # Auto-stacks after title
remotion_add_bar_chart(...)    # Auto-stacks after pie chart

# Overlay track: Layers on top
remotion_add_text_overlay(..., track="overlay", align_to="main", offset=5.0)

# Background track: Behind main content
remotion_add_background(..., track="background")

默认曲目：

main （第0层）-主要内容，自动堆叠，间隔0.5秒
overlay （第10层）-文本叠加、UI元素
background （层-10）-背景媒体

主题

技术主题

现代科技美学与蓝色/青色调色板

颜色：原色蓝（#0066FF），重青色（#00D9FF）
用例：技术评论、编码教程、软件演示

金融主题

绿色/金色专业金融

颜色：主绿色（#00C853），重点金色（#FFD600）
用例：股票分析、投资建议、商业新闻

教育主题

紫色/橙色的友好教育

颜色：主紫色（#7C4DFF），强调橙色（#FF6E40）
用例：教育内容、讲解员、课程

游戏主题

高能量游戏，霓虹灯点缀

颜色：霓虹绿（#00E676）、霓虹紫（#E040FB）
用例：游戏视频、电子竞技、流媒体叠加

最小主题

干净的单色美学

颜色：带有微妙色调的灰度
用例：专业内容、纪录片

生活方式主题

珊瑚色/粉红色的温暖生活方式

颜色：粉红色（#FF6B9D），珊瑚色（#FFB74D）
用例：Vlogs、生活方式、健康、旅行

商业主题

海军蓝/青色专业商务

颜色：海军（#1565C0），青色（#00ACC1）
用例：企业视频、演示文稿、B2B

Claude桌面配置

增添 ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "remotion": {
      "command": "python",
      "args": ["-m", "chuk_motion.server", "stdio"],
      "env": {
        "MCP_STDIO": "1"
      }
    }
  }
}

发展

项目结构

chuk-motion/
├── src/chuk_motion/
│   ├── server.py              # Main MCP server
│   ├── async_server.py        # Async MCP server variant
│   ├── video_manager.py       # High-level video management ⭐ NEW
│   ├── tokens/                # Design tokens
│   │   ├── colors.py         # Color palettes (7 themes)
│   │   ├── typography.py     # Typography system
│   │   ├── motion.py         # Motion design
│   │   ├── spacing.py        # Spacing & safe margins
│   │   └── token_manager.py  # Token import/export
│   ├── themes/               # Theme system
│   │   └── youtube_themes.py # 7 YouTube-optimized themes
│   ├── components/           # Component library (51 components)
│   │   ├── charts/          # 6 chart components
│   │   ├── overlays/        # 3 overlay components
│   │   ├── code/            # 3 code components
│   │   ├── layouts/         # 17 layout components
│   │   ├── animations/      # 3 animation components
│   │   ├── text_animations/ # 6 text animation components
│   │   ├── frames/          # 3 frame components
│   │   ├── transitions/     # 2 transition components
│   │   └── content/         # 5 content components
│   ├── generator/            # TSX generation
│   │   ├── component_builder.py    # Jinja2 templating
│   │   ├── composition_builder.py  # Component instances
│   │   └── timeline.py            # Track-based timeline
│   ├── render/               # Video rendering ⭐ NEW
│   │   ├── project_exporter.py    # Remotion project export
│   │   └── video_renderer.py      # MP4 rendering via CLI
│   ├── rendering/            # Remotion integration
│   │   └── remotion_renderer.py   # Remotion rendering
│   ├── storage/              # Artifact storage ⭐ NEW
│   │   └── artifact_storage.py    # chuk-artifacts integration
│   ├── tools/                # MCP tools
│   │   ├── theme_tools.py         # Theme management tools
│   │   ├── token_tools.py         # Token tools
│   │   └── artifact_tools.py      # Artifact management tools
│   ├── utils/                # Utilities
│   │   ├── project_manager.py     # Project scaffolding
│   │   └── async_project_manager.py # Async project manager
│   └── models/               # Pydantic models
│       ├── artifact_models.py     # Storage models
│       └── responses.py           # Response models
├── examples/                 # Production examples
│   ├── design_system_showcase.py
│   ├── safe_margins_demo.py
│   ├── fibonacci_demo.py
│   └── explore_design_system.py
├── tests/                    # 1471 tests
├── remotion-templates/       # Base Remotion templates
└── remotion-projects/        # Generated projects (gitignored)

运行测试

# Run all tests
make test

# Run with coverage
make test-cov

代码质量

# Run all checks (linting, type checking, tests)
make check

# Individual checks
make lint       # Ruff linting
make format     # Ruff formatting
make typecheck  # MyPy type checking
make test       # Run all tests

提交前必须通过所有检查！ 这 make check 命令运行linting、类型检查和所有1471测试以确保代码质量。

路线图

第一阶段：基础✅ 完成

✅ 设计标记系统（颜色、排版、运动、间距）
✅ 包含17个组件的组件注册表
✅ 7个YouTube优化主题
✅ LLM的发现工具
✅ 基于轨迹的时间线系统
✅ 平台安全裕度支持

第二阶段：发电✅ 完成

✅ 使用Jinja2生成TSX组件
✅ 拆除工程脚手架
✅ 带有ComponentInstance的组合生成器
✅ API项目经理
✅ 时间字符串解析（“1s”、“500ms”）

第三阶段：渲染✅ 完成

✅ 远程渲染与video_renderer集成
✅ 通过Remotion CLI导出到MP4
✅ 带有作业状态跟踪的背景渲染
✅ 渲染过程中的进度监控
✅ Removation项目脚手架出口商

第4阶段：存储和工件✅ 完成

✅ ArtifactStorageManager与chuk工件集成
✅ 项目存储（WORKSPACE命名空间）
✅ 渲染存储（BLOB命名空间）
✅ 媒体文件的资产管理
✅ 检查点/版本控制支持
✅ VideoManager用于高级视频操作

阶段5：高级功能

🔲 自定义主题生成器
🔲 动画时间线编辑器
🔲 音频同步
🔲 自动字幕
🔲 亮/暗模式切换
🔲 云渲染集成

贡献

欢迎投稿！拜托：

克隆该仓库
创建要素分支
进行更改
跑 make lint && make format && make typecheck
提交拉取请求

许可证

Apache许可证2.0-请参阅许可证了解详情。

链接

相关项目:

- chuk mcp服务器-零配置mcp框架 - chuk mcp pptx-PowerPoint mcp服务器 - 远程动议 -基于React的视频生成

Chuk MCP Remotion

快速接入

详细介绍