remotion

Remotion 视频技能

使用 Remotion（一个用于通过 React 生成视频的工具）制作视频内容的通用技能。

★ 品质原则（反模板）

“面面俱到”正是 AI 生成感的来源。“舍弃什么”才是设计。

实现 Remotion 文件时，请遵循以下原则。 详细检查清单：references/anti-template-checklist.md

绝对要避免的 6 种模式

#	反模式	替代方案
1	所有元素都使用相同的 spring config 入场	根据元素的重量调整 damping/mass（重：20/1.2，轻：8/0.3）
2	只使用 translateY+opacity 这一种模式	混合使用遮罩揭示、逐词错开、硬切等效果
3	使用 delay={i * 8} 这样的均匀延迟	使用 [0, 5, 13, 21] 这样的有机间隔
4	所有场景都采用居中布局	至少有 1 个场景采用非对称布局
5	同一种转场使用 3 次以上	混合使用 Wipe、Scale、Hard cut、Crossfade
6	构图连续 8 秒以上没有变化的场景	中途改变 scale/position/缩放

钩子与节奏

• 最初 3 秒：模式打断（静寂→爆发、极端缩放→拉远等）
• 与 BPM 同步：剪辑位置配合节拍，但不要每拍都剪（剪-剪-停留-剪-停留-停留-剪-剪）
• 必须有音效：转场前加入 whoosh，文字出现时加入 impact 音效，钩子前静音 6-10f
• 30 秒宣传视频必须包含 Social Proof 节拍（例如“Free”“★4.8”等）

执行质量检查

bash .claude/skills/remotion/scripts/check-quality.sh <target-dir>

此检查会在写入/编辑 Remotion 文件时自动执行（已配置 hook）。

---

关于品牌设置

调色板、字体和吉祥物角色规范应在各项目的 CLAUDE.md 中定义。 此技能不包含特定品牌信息。 项目中预期会准备类似以下的章节：

## Video Branding
- Primary: #XXXXXX
- Accent: #XXXXXX
- Background: #XXXXXX
- Font Heading: ...
- Font Body: ...
- Mascot: （角色名称、设计规范、动画模式等）

快速开始

# 1. プロジェクト初期化（スキル付属スクリプト）
bash <path-to-skill>/scripts/init-remotion.sh <project-name>

# 2. プレビュー
cd <project-name> && npx remotion studio

# 3. レンダリング
npx remotion render src/index.ts <CompositionId> out/video.mp4

手动设置

# 新規作成
npx create-video@latest my-video

# 既存プロジェクトに追加（依存関係が複雑になるため別ディレクトリ推奨）
npm install remotion @remotion/cli @remotion/player

视频模板

1. 宣传视频（30 秒）

0-5秒   : Hook — 問題提起 + キャッチーなビジュアル
5-10秒  : Problem — 課題の可視化
10-20秒 : Solution — プロダクトの世界観・機能デモ
20-28秒 : Social Proof — 数字 or ユーザーの声
28-30秒 : CTA — ロゴ + URL

合成设置：

• 分辨率：1920x1080（16:9）
• FPS：30
• 总帧数：900

2. 功能介绍视频（15 秒）

0-3秒   : 機能名タイトル（テキストアニメーション）
3-12秒  : 実演デモ（スクリーンキャプチャ or モック）
12-15秒 : 締めのメッセージ + 次のアクション誘導

合成设置：

• 分辨率：1080x1080（1:1，适用于社交媒体）or 1080x1920（9:16，适用于 Reels）
• FPS：30

3. 教程视频（60 秒）

0-5秒   : 導入 — タイトル + 挨拶
5-50秒  : ステップ1-3 — 操作説明（画面録画 + オーバーレイ）
50-58秒 : まとめ — 要点の振り返り
58-60秒 : CTA

4. 社交媒体短视频（5-10 秒）

0-2秒   : アイキャッチ（動き or テキスト）
2-8秒   : ワンポイント情報
8-10秒  : ロゴ + CTA

合成设置：

• 分辨率：1080x1920（9:16）
• FPS：30

项目结构

my-video/
├── src/
│   ├── Root.tsx                    # コンポジション登録
│   ├── compositions/
│   │   ├── Promo.tsx               # 30秒プロモ
│   │   ├── FeatureIntro.tsx        # 15秒機能紹介
│   │   ├── Tutorial.tsx            # 60秒チュートリアル
│   │   └── SnsShort.tsx            # 5-10秒SNS
│   ├── components/
│   │   ├── Character/              # マスコット / キャラクター
│   │   │   ├── CharacterBase.tsx
│   │   │   ├── Expressions.tsx
│   │   │   └── Animations.tsx
│   │   ├── Typography/
│   │   │   ├── TitleReveal.tsx
│   │   │   └── SubtitleFade.tsx
│   │   ├── Transitions/
│   │   │   ├── WipeTransition.tsx
│   │   │   └── FadeTransition.tsx
│   │   └── Branding/
│   │       ├── Logo.tsx
│   │       └── CallToAction.tsx
│   └── styles/
│       └── theme.ts                # カラー・フォント定義
├── public/
│   ├── fonts/
│   ├── images/
│   └── audio/
├── remotion.config.ts
└── package.json

开发规则

合成

• 每个文件包含 1 个组件
• 将动画参数作为 props 提供，方便之后调整
• 使用 <Sequence> 管理场景时间

动画

• 使用 interpolate() 平滑插值
• 使用 spring() 实现自然的物理动画
• 根据元素的“重量”调整 spring config（参见★反模板原则）
  • 重元素（mockup）：{ damping: 20, mass: 1.2 }
  • 轻元素（点）：{ damping: 8, mass: 0.3 }
• 每个视频至少使用 2 种文字效果（除 translateY 外，还可使用 clipPath、逐词错开等）

音频

• 将 BGM 放在 /public/audio/
• 使用 <Audio> 组件同步播放

主题（theme.ts 模板）

export const theme = {
  colors: {
    primary: '#XXXXXX',
    accent: '#XXXXXX',
    background: '#XXXXXX',
    text: '#XXXXXX',
    subAccent: '#XXXXXX',
  },
  fonts: {
    heading: 'Your Heading Font',
    body: 'Your Body Font',
    mono: 'JetBrains Mono',
  },
  // ★ 要素の重さ別にspring configを分ける
  spring: {
    heavy:  { damping: 22, mass: 1.2 },  // mockup, 全画面要素
    medium: { damping: 14, mass: 0.7 },  // テキスト, カード
    light:  { damping: 8,  mass: 0.3 },  // ドット, バッジ, 小アイコン
    bounce: { damping: 6,  mass: 0.4, stiffness: 180 }, // CTA, 注目要素
  },
  fadeIn: { durationInFrames: 15 },
} as const;

// BPM同期（BGMに合わせて調整）
export const music = {
  bpm: 120,
  fps: 30,
  framesPerBeat: (30 * 60) / 120,   // 15
  framesPerBar: ((30 * 60) / 120) * 4, // 60
} as const;

export type Theme = typeof theme;

使用项目 CLAUDE.md 中定义的品牌颜色和字体填充上述占位符。

吉祥物角色通用模式

适用于项目中有吉祥物角色时的通用动画模式。 由于各项目的角色名称和外观各不相同，因此这里只定义动作模式。

不同状态的动画

状态	用途	动画
idle	待机	轻微呼吸（上下 2px，周期 2 秒）+ 眨眼
curious	好奇、讲解	歪头 + 睁大眼睛
happy	高兴、完成	弹跳 + 表情变化
pointing	指示	转向目标 + 伸展手臂/翅膀

入场与退场动画

// 登場: 画面外からspring付きスライドイン
const entrance = (
  frame: number, fps: number,
  from: 'left' | 'right' | 'bottom' = 'right'
) => {
  const progress = spring({ frame, fps, config: { damping: 12, stiffness: 80 } });
  const offsets = { left: { x: -300, y: 0 }, right: { x: 300, y: 0 }, bottom: { x: 0, y: 200 } };
  const dir = offsets[from];
  return {
    translateX: dir.x * (1 - progress),
    translateY: dir.y * (1 - progress),
    opacity: progress,
    scale: 0.5 + progress * 0.5,
  };
};

素材生成（与 mcp-image 集成）

如果可以使用 mcp-image（Nano Banana Pro）MCP 服务，就能生成视频用的素材图片。

用途

• 背景图片、纹理
• 模拟模型中的截图风格图片
• 角色插画、图标
• 各场景的视觉素材

使用方法

// 生成した画像は public/images/ に配置し、staticFile() で参照
<Img src={staticFile('images/generated-bg.png')} />

推荐设置

用途	quality	aspectRatio	备注
草稿、验证	fast	与视频匹配	用于迭代，优先考虑速度
正式素材	balanced	9:16 or 16:9	用于最终成品
主视觉	quality	9:16 or 16:9	用于海报、缩略图

工作流

1. 使用 generate_image 生成素材（推荐设置 purpose: "remotion video asset"）
2. 从输出目录复制到 public/images/
3. 使用 staticFile('images/filename.png') 在 Remotion 中引用

---

渲染

# MP4（汎用）
npx remotion render src/index.ts Promo out/promo.mp4

# 高品質
npx remotion render src/index.ts Promo out/promo-hq.mp4 --codec=h264 --quality=100

# GIF（短尺・ループ用）
npx remotion render src/index.ts SnsShort out/short.gif --codec=gif

# SNS向け縦型（9:16）
npx remotion render src/index.ts VerticalComp out/vertical.mp4 --height=1920 --width=1080

# 一括レンダリング
bash <path-to-skill>/scripts/render-all.sh

各社交媒体平台的推荐设置

• Twitter/X：1280x720，30fps，最长 140 秒
• Instagram Reels：1080x1920（9:16），30fps
• TikTok：1080x1920（9:16），30fps

使用 @remotion/player 在应用内嵌入

无需预先渲染，即可交互播放。

import { Player } from '@remotion/player';
import { FeatureIntro } from './compositions/FeatureIntro';

<Player
  component={FeatureIntro}
  durationInFrames={450}
  fps={30}
  compositionWidth={1080}
  compositionHeight={1080}
  style={{ width: '100%' }}
  controls
/>

使用动态 props 控制

<Player
  component={Tutorial}
  inputProps={{
    message: "操作してみましょう",
    stepNumber: 1,
  }}
  durationInFrames={300}
  fps={30}
  compositionWidth={1920}
  compositionHeight={1080}
  controls
  autoPlay
  loop
/>

许可证

Remotion 对 3 人及以下的公司免费（可用于商业用途）。 达到 4 人及以上时，需要购买 Company License（$25/开发者/月）。 详情：https://www.remotion.dev/license

参考资源

• Remotion 官方文档：https://www.remotion.dev/docs
• Remotion + AI 指南：https://www.remotion.dev/docs/ai/
• Remotion 官方技能：npx add-skill remotion-dev/skills
• 动画模式合集：references/animation-patterns.md
• 反模板检查清单：references/anti-template-checklist.md