chuk-motion

基于Remotion的AI视频生成工具——一种以设计系统优先的方法来创建专业多平台视频

概览

chuk-motion 是一个基于MCP（模型上下文协议）的服务器，它将Remotion的视频生成能力带给了像Claude这样的AI助手。它提供了一种设计系统优先的方法，通过全面的设计令牌，使AI能够创建优化用于YouTube、TikTok、LinkedIn、Instagram Stories等平台的专业动画视频。

主要特性

• 🎨 完整设计系统：颜色、字体、间距和运动设计令牌
• 📱 多平台支持：针对LinkedIn、TikTok、Instagram、YouTube的安全边距
• 🎬 51个视频组件：图表、代码块、场景、覆盖层、布局、动画、文本动画、过渡效果和演示真实性
• 🎨 7个内置主题：科技、金融、教育、生活方式、游戏、极简主义、商务
• ⚡ 轨道时间线：专业的多轨道组合系统
• 🤖 LLM友好：带有详细模式的可发现组件
• 📊 数据可视化：动画图表（饼图、柱状图、折线图、面积图、环形图、水平柱状图）
• 💻 代码展示：带有打字动画的语法高亮代码块

设计系统

四类令牌

1. 颜色 (tokens/colors.py)

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

2. 字体 (tokens/typography.py)

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

3. 间距 (tokens/spacing.py) ⭐ 新增

   • 10步间距比例（4px - 120px）
   • 7个平台安全边距：LinkedIn、Instagram Stories/Square、TikTok、YouTube、移动设备
   • 边框半径令牌
   • 布局宽度令牌

4. 运动 (tokens/motion.py)

   • 动画的弹簧配置
   • 缓动曲线（缓出、缓入缓出、弹跳）
   • 持续时间预设（快速、正常、慢速）

平台安全边距

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

平台	上	下	左	右	备注
LinkedIn Feed	40px	40px	24px	24px	推荐8-24px安全区
Instagram Stories	100px	120px	24px	24px	上下有UI覆盖
TikTok	100px	180px	24px	80px	右侧有按钮
YouTube	20px	20px	20px	20px	标准边距
移动垂直	80px	100px	-	-	9:16格式
移动水平	-	-	24px	24px	16:9格式
Instagram Square	32px（四边）	-	-	-	1:1格式

组件库

📊 图表（6个组件）

所有图表都支持设计令牌和流畅动画：

• PieChart - 比例和百分比
• BarChart - 垂直条形比较
• HorizontalBarChart - 排名最高的水平条形，前三项突出显示
• LineChart - 时间趋势
• AreaChart - 填充区域趋势
• DonutChart - 中心状态的环形图

🎬 场景（2个组件）

• TitleScene - 全屏动画标题（4种变体，5种动画）
• EndScreen - YouTube结束屏幕，带有CTA（4种变体）

🎨 覆盖层（3个组件）

• LowerThird - 名片（5种变体，5个位置）
• TextOverlay - 动态文本强调（5种样式，5种动画）
• SubscribeButton - 动态订阅按钮（5种动画）

💻 代码（3个组件）

• CodeBlock - 语法高亮代码展示（4种变体：极简、终端、编辑器、玻璃）
• TypingCode - 字符逐个打字动画（4种变体，4种光标样式）
• CodeDiff - 两侧对比代码，带有语法高亮

📐 布局（17个组件）

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

• AsymmetricLayout - 主要内容（2/3）+ 堆叠演示面板（1/3）
• Container - 内容容器，可选边框和背景
• DialogueFrame - 对话式布局，带有发言者和听众
• FocusStrip - 主要内容，带有焦点条覆盖
• Grid - 灵活网格布局（8种类型：1x2, 2x1, 2x2, 3x2, 2x3, 3x3, 4x2, 2x4）
• HUDStyle - HUD风格覆盖布局（四个角+中心）
• Mosaic - 多片段马赛克网格布局
• OverTheShoulder - 演讲者与屏幕内容
• PerformanceMultiCam - 主摄像头+最多4个辅助摄像头
• PiP - 带定位的画中画
• SplitScreen - 侧边或上下分割（4种分隔样式）
• StackedReaction - 内容带有堆叠反应
• ThreeByThreeGrid - 3x3网格布局，用于多个项目
• ThreeColumnLayout - 三栏布局
• ThreeRowLayout - 三行布局
• Timeline - 基于时间轴的事件显示
• Vertical - 两面板垂直分割

🎬 动画（3个组件）

• Counter - 动态数字计数器（4种动画：count_up, flip, slot_machine, digital）
• LayoutEntrance - 布局入口动画，平滑揭示组件
• PanelCascade - 瀑布式面板动画，顺序揭示

✨ 文本动画（6个组件）

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

• TypewriterText - 经典打字机动画，可选闪烁光标
• StaggerText - 弹簧物理延迟揭示（按字符或单词）
• WavyText - 连续波浪运动，正弦波振荡
• TrueFocus - 单词循环聚焦，带有动画角括号
• DecryptedText - 字符解密揭示，多种方向
• FuzzyText - VHS故障效果，带有扫描线和RGB分离

🎭 演示真实性（4个组件）

真实的UI模拟和演示：

• BeforeAfterSlider - 交互式的前后比较滑块
• BrowserFrame - 带有真实Chrome和标签的浏览器窗口
• DeviceFrame - 设备模拟（手机、平板、桌面），带有内容
• Terminal - 带有命令历史记录和打字的终端窗口

📦 内容（5个组件）

• DemoBox - 可重复使用的演示内容容器
• ImageContent - 图像展示，灵活尺寸（contain, cover, fill）和样式选项
• StylizedWebPage - 用于演示的样式化网页模拟
• VideoContent - 视频内容占位符，带有控制
• WebPage - 清洁的网页模拟，带有可定制内容

🔄 过渡（2个组件）

• LayoutTransition - 不同布局之间的平滑过渡
• PixelTransition - 像素化过渡效果

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

安装

先决条件

• Python 3.11+
• Node.js 18+（用于Remotion）
• npm 或 yarn

安装Python包

# 克隆仓库
git clone https://github.com/chrishayuk/chuk-motion.git
cd chuk-motion

# 使用uv安装依赖（推荐）
uv pip install -e .

# 或使用pip
pip install -e .

安装Remotion

# Remotion会根据项目自动安装
# MCP服务器在生成项目时处理此操作

快速开始

1. 启动MCP服务器

STDIO模式（用于Claude Desktop）：

python -m chuk_motion.server stdio

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

python -m chuk_motion.server http --port 8000

2. 创建项目

# 通过MCP工具
remotion_create_project(
    name="my_video",
    theme="tech",
    fps=30,
    width=1920,
    height=1080
)

3. 添加组件

# 添加标题场景
remotion_add_title_scene(
    text="欢迎来到AI视频",
    subtitle="使用设计令牌创建",
    variant="bold",
    animation="fade_zoom",
    duration="3s"
)

# 添加带有安全边距的图表
remotion_add_pie_chart(
    data='[{"label": "AI", "value": 40}, {"label": "ML", "value": 30}]',
    title="技术分布",
    duration="4s",
    gap_before="1s"  # 支持时间字符串！
)

# 添加带有打字动画的代码
remotion_add_typing_code(
    code="console.log('Hello, World!');",
    language="javascript",
    title="示例代码",
    typing_speed="medium",
    duration="5s"
)

# 添加图像
remotion_add_image_content(
    src="https://picsum.photos/1920/1080",
    fit="cover",
    duration="3s"
)

4. 渲染视频

cd remotion-projects/my_video
npm install
npm start  # 浏览器预览
npm run build  # 渲染为MP4

示例

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

设计系统展示

# 完整设计系统展示（90秒）
python examples/design_system_showcase.py

# 平台安全边距演示（60秒）
python examples/safe_margins_demo.py

# 探索所有设计令牌
python examples/explore_design_system.py

组件展示

# 完整文本动画展示（52.5秒）
python examples/all_text_animations_demo.py

# 图像布局展示 - 17个示例（127秒）
python examples/image_layouts_showcase.py

# 内容展示 - 所有5个内容组件
python examples/content_showcase.py

# 斐波那契代码打字演示
python examples/fibonacci_demo.py

所有示例均使用ProjectManager 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() - 服务器信息和统计

时间字符串格式 ⭐ 新增

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

# 字符串格式
duration="2s"       # 2秒
duration="500ms"    # 500毫秒
duration="1.5s"     # 1.5秒
duration="1m"       # 1分钟（60秒）
gap_before="1s"     # 1秒间隔
gap_before="250ms"  # 250毫秒间隔

# 浮点格式仍然有效
duration=2.0
gap_before=0.5

基于轨道的时间轴系统

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

# 主轨道：自动堆叠
remotion_add_title_scene(...)  # 从0秒开始
remotion_add_pie_chart(...)    # 自动堆叠在标题之后
remotion_add_bar_chart(...)    # 自动堆叠在饼图之后

# 覆盖层轨道：顶部叠加
remotion_add_text_overlay(..., track="overlay", align_to="main", offset=5.0)

# 背景轨道：位于主要内容后面
remotion_add_background(..., track="background")

默认轨道：

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

主题

科技主题

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

• 颜色：主要蓝色 (#0066FF)，强调青色 (#00D9FF)
• 应用场景：科技评测、编程教程、软件演示