mvanhorn/clawdbot-skill-remotion-server

Remotion 服务器

在任意 Linux 服务器上无头渲染视频，使用 Remotion v4（最新版：v4.0.435）。无需 Mac 或图形界面。 Chrome Headless Shell 负责所有渲染工作——可在 VPS、树莓派、CI 运行器、Docker 容器等任何运行 Node.js 的环境中使用。 FFmpeg 已集成到每个 Remotion 项目中——无需单独安装 FFmpeg。

设置（一次性）

为 Chrome Headless Shell 安装浏览器依赖：

bash {baseDir}/scripts/setup.sh

该脚本会安装 Chrome 在无头 Linux 上运行所需的系统库（libnss3、libatk、libgbm、libcups2 等）。 支持 Ubuntu 22.04/24.04、Debian 和 Amazon Linux。

验证设置

设置完成后，确认 Chrome Headless Shell 可以运行：

npx @remotion/chrome-headless-shell --help

如果失败，说明缺少系统依赖。重新运行 setup.sh 或手动安装：

# Ubuntu/Debian
sudo apt install -y libnss3 libatk1.0-0 libatk-bridge2.0-0 libcups2 libgbm1 \
  libpango-1.0-0 libcairo2 libxcomposite1 libxdamage1 libxfixes3 libxrandr2

# Amazon Linux
sudo yum install -y mesa-libgbm libX11 libXrandr libdrm libXdamage libXfixes \
  libxkbcommon dbus-libs libXcomposite alsa-lib nss pango cups-libs at-spi2-core atk

快速入门

创建项目

bash {baseDir}/scripts/create.sh my-video
cd my-video

渲染视频

npx remotion render MyComp out/video.mp4

在浏览器中预览（开发模式）

npx remotion preview

打开本地开发服务器，你可以在其中拖动时间轴、调整属性，并在渲染前进行迭代。

渲染选项（5 种方式）

Remotion v4 提供五种渲染后端。根据你的基础设施和规模选择。

1. 本地 CLI（默认）

在运行 Node.js 的机器上渲染。最适合开发、CI 和单服务器部署。

npx remotion render MyComp out/video.mp4

2. Remotion Lambda

跨 AWS Lambda 函数分布式渲染。支持最长约 80 分钟的 Full HD 视频。支持 Webhook 异步通知和内置成本估算。

npm install @remotion/lambda

# 部署 Lambda 函数
npx remotion lambda functions deploy

# 在 Lambda 上渲染
npx remotion lambda render MyComp

# 渲染前估算成本
npx remotion lambda still --estimate-price MyComp

主要特性：

• 跨多个 Lambda 调用的分布式渲染
• 渲染完成时通过 Webhook 回调
• 渲染前成本估算
• S3 输出存储

参见 https://www.remotion.dev/docs/lambda

3. @remotion/vercel（新——2026 年 2 月）

在 Vercel Sandbox 内渲染。设置最简单——无需 AWS 账户。

npm install @remotion/vercel

将你的 Remotion 项目部署到 Vercel，并通过 API 触发渲染。最适合已在 Vercel 上、希望零配置渲染的团队。

参见 https://www.remotion.dev/docs/vercel

4. Cloud Run（alpha）

在 Google Cloud Run 上渲染。对于较长视频，计算成本低于 Lambda。

npm install @remotion/cloudrun
npx remotion cloudrun render MyComp

参见 https://www.remotion.dev/docs/cloudrun

5. EC2 上的 GPU 渲染（v4.0.248+）

在 EC2 GPU 实例上实现硬件加速渲染。对于包含复杂动画或 3D 内容的合成，这是最快的选择。

需要具有 GPU 的 EC2 实例（例如 g4dn.xlarge）和相应的驱动程序。

参见 https://www.remotion.dev/docs/gpu

社交媒体格式预设

创建合成时使用这些分辨率和宽高比预设。将 --width 和 --height 参数传递给 npx remotion render 以覆盖合成的默认值。

TikTok / YouTube Shorts / Instagram Reels（9:16 竖屏）

npx remotion render ChatDemo out/tiktok.mp4 --width=1080 --height=1920

• 分辨率：1080x1920
• 宽高比：9:16
• 推荐帧率：30
• 最大时长：60 秒（TikTok）、60 秒（Shorts）、90 秒（Reels）

YouTube 标准（16:9 横屏）

npx remotion render MyComp out/youtube.mp4 --width=1920 --height=1080

• 分辨率：1920x1080
• 宽高比：16:9
• 推荐帧率：30 或 60

Instagram 帖文（1:1 正方形）

npx remotion render MyComp out/instagram-post.mp4 --width=1080 --height=1080

• 分辨率：1080x1080
• 宽高比：1:1
• 最大时长：60 秒

Twitter/X 视频（16:9 横屏）

npx remotion render MyComp out/twitter.mp4 --width=1280 --height=720

• 分辨率：1280x720
• 宽高比：16:9
• 最大文件大小：512MB
• 最大时长：140 秒

格式预设摘要

平台	宽度	高度	宽高比	帧率
TikTok	1080	1920	9:16	30
YouTube Shorts	1080	1920	9:16	30
Instagram Reel	1080	1920	9:16	30
Instagram 帖文	1080	1080	1:1	30
YouTube	1920	1080	16:9	30
Twitter/X	1280	720	16:9	30

在代码中构建 Composition 时，直接设置 width、height 和 fps：

<Composition
  id="TikTokPromo"
  component={PromoVideo}
  durationInFrames={30 * 15}
  fps={30}
  width={1080}
  height={1920}
/>

新包（v4.0.429+）

@remotion/sfx（v4.0.429）

内置音效，用于快速音频提示：

import { Sfx } from "@remotion/sfx";

// 可用音效：ding, bruh, vineBoom
<Sfx name="ding" />
<Sfx name="bruh" />
<Sfx name="vineBoom" />

@remotion/starburst（v4.0.435）

星爆形状和动画组件：

import { Starburst } from "@remotion/starburst";

<Starburst
  points={12}
  innerRadius={50}
  outerRadius={100}
  fill="yellow"
/>

@remotion/shapes（更新至 v4.0.432）

几何形状原语。现在包含 Arrow 形状：

import { Triangle, Star, Pie, Arrow } from "@remotion/shapes";

<Triangle length={100} direction="up" fill="red" />
<Star points={5} innerRadius={30} outerRadius={60} fill="gold" />
<Pie radius={50} progress={0.75} fill="blue" />
<Arrow length={150} direction="right" fill="black" />

@remotion/captions

视频内容的动画字幕。支持单词级时间控制和多种动画样式：

import { Caption } from "@remotion/captions";

<Caption
  text="Hello world"
  startFrame={0}
  endFrame={60}
  style="bounce"
/>

@remotion/player

无需渲染为文件，即可在 React 应用中嵌入 Remotion 视频。带有控件的交互式回放：

import { Player } from "@remotion/player";

<Player
  component={MyComp}
  durationInFrames={300}
  fps={30}
  compositionWidth={1920}
  compositionHeight={1080}
  controls
/>

Mediabunny（格式转换）

Mediabunny 是 @remotion/media-parser 和 @remotion/webcodecs 的继任者。内置于 Remotion 的 GPU 加速格式转换。

支持的输入：MP4、WebM、MOV、MKV、M3U8、TS、AVI、MP3、FLAC、WAV、M4A、AAC 支持的输出：MP4、WebM、WAV

import { convertMedia } from "@remotion/media-converter";

await convertMedia({
  src: "input.mov",
  container: "mp4",
});

Remotion 技能（2026 年 1 月）

用于“提示即视频”工作流的 AI 代理集成。Claude Code 可以根据自然语言描述生成 Remotion 合成。

"创建一个 15 秒的 TikTok 视频，显示带有动画的文本'新功能'，并带有弹簧动画淡入，然后显示三个要点"

代理会生成 TSX 合成、注册并渲染——全部通过单个提示完成。

模板

所有模板均通过 create.sh 脚本创建。每个模板都会生成一个完整的 Remotion 项目，包含 TypeScript、TailwindCSS 4.2.0 和模板组件。

聊天演示（Telegram 风格手机模拟）

动画聊天气泡在手机模拟器中依次出现。适用于产品演示、机器人展示、客户支持亮点。

bash {baseDir}/scripts/create.sh my-chat --template chat
cd my-chat

编辑 src/messages.json 以自定义对话：

[
  {"text": "如何重置密码？", "isUser": true},
  {"text": "前往设置 > 账户 > 重置密码。你将在约 30 秒内收到一封电子邮件。", "isUser": false},
  {"text": "明白了，谢谢！", "isUser": true}
]

以 TikTok 分辨率渲染：

npx remotion render ChatDemo out/chat-tiktok.mp4 --width=1080 --height=1920

默认合成：1080x1920（竖屏），30fps，持续时间根据消息数量自动计算。

标题卡（动画开场）

带有弹簧动画的淡入标题。用于视频开场、章节标题或独立的通知卡片。

bash {baseDir}/scripts/create.sh my-intro --template title
cd my-intro

通过编辑 src/TitleCard.tsx 的 defaultProps 进行自定义：

defaultProps={{ title: "产品发布", subtitle: "2026 年 3 月即将推出" }}

以 YouTube 分辨率渲染：

npx remotion render TitleCard out/title-youtube.mp4 --width=1920 --height=1080

默认合成：1920x1080（横屏），30fps，时长 3 秒。

空白（入门模板）

用于从头构建自定义合成的空白画布。

bash {baseDir}/scripts/create.sh my-project
cd my-project

显示帧计数器。将 src/Composition.tsx 替换为你自己的组件。

构建自定义模板

要添加新模板（例如促销宣传、代码演练、统计仪表盘、倒计时、推荐信），请创建一个使用 Remotion 原语的 React 组件：

import { AbsoluteFill, useCurrentFrame, spring, useVideoConfig, interpolate, Sequence, Img, Audio } from "remotion";

用于模板的关键 Remotion API：

• useCurrentFrame() - 用于动画的当前帧号
• spring({ frame, fps, config }) - 弹簧物理动画
• interpolate(frame, inputRange, outputRange) - 线性插值
• <Sequence from={30}> - 将子内容延迟 N 帧
• <Img src={staticFile("logo.png")} /> - 加载静态资源
• <Audio src={staticFile("music.mp3")} /> - 添加背景音频
• <AbsoluteFill> - 全帧容器

在 src/Root.tsx 中注册合成：

import { Composition } from "remotion";
import { PromoVideo } from "./PromoVideo";

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="PromoVideo"
        component={PromoVideo}
        durationInFrames={300}
        fps={30}
        width={1080}
        height={1920}
      />
    </>
  );
};

缩略图生成

使用 Remotion 的 still 命令将单帧提取为静态图像：

npx remotion still MyComp out/thumbnail.png

选项

# 指定帧（默认为第 0 帧）
npx remotion still MyComp out/thumb.png --frame=45

# JPEG 输出
npx remotion still MyComp out/thumb.jpeg --image-format=jpeg

# JPEG 质量（0-100）
npx remotion still MyComp out/thumb.jpeg --image-format=jpeg --jpeg-quality=90

# 自定义分辨率
npx rem