此检查在 Remotion 文件的 Write/Edit 时会自动执行（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 — 数字或用户的声音
28-30秒 : CTA — Logo + URL

合成设置：

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

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

0-3秒   : 功能名称标题（文字动画）
3-12秒  : 实际演示（屏幕录制或模拟）
12-15秒 : 结束语 + 引导下一步行动

合成设置：

• 分辨率: 1080x1080（1:1，适合SNS）或 1080x1920（9:16，适合Reels）
• FPS: 30

3. 教程视频（60秒）

0-5秒   : 导入 — 标题 + 问候
5-50秒  : 步骤1-3 — 操作说明（屏幕录像 + 叠加层）
50-58秒 : 总结 — 回顾要点
58-60秒 : CTA

4. SNS短视频（5-10秒）

0-2秒   : 吸引眼球（动作或文字）
2-8秒   : 单点信息
8-10秒  : Logo + 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个文件1个组件
• 动画参数通过 props 外部化（便于后续调整）
• 使用 <Sequence> 管理场景时间

动画

• 使用 interpolate() 进行平滑的值插值
• 使用 spring() 实现自然的物理动画
• spring config 根据元素的“重量”改变 (参照 ★ Anti-Template 原则)
  • 重元素(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 中定义的品牌颜色·字体填充上述占位符。

吉祥物角色通用模式

项目有吉祥物角色时的通用动画模式。角色名称和外观因项目而异，因此此处仅定义运动模式。

状态别动画

登场·退场动画

// 登场: 从画面外带 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')} />

推荐设置

工作流程

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

SNS别推荐设置

• 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
• Anti-Template 检查清单：references/anti-template-checklist.md

Weekly Installs

91

Repository

kimny1143/claud…template

First Seen

Jan 22, 2026

Security Audits

Gen Agent Trust HubPassSocketPassSnykPass

Installed on

claude-code76

opencode52

gemini-cli51

codex49

cursor49

github-copilot48

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

このチェックはRemotionファイルの Write/Edit 時に自動実行される（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、SNS向け）or 1080x1920（9:16、リール向け）
• FPS: 30

3. チュートリアル動画（60秒）

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

4. SNS短尺動画（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ファイル1コンポーネント
• アニメーションパラメータは props で外出し（後で調整しやすく）
• <Sequence> でシーンを時間管理

アニメーション

• interpolate() でスムーズな値の補間
• spring() で自然な物理アニメーション
• spring configは要素の「重さ」で変える （★ Anti-Template原則 参照）
  • 重い要素(mockup): { damping: 20, mass: 1.2 }
  • 軽い要素(ドット): { damping: 8, mass: 0.3 }
• テキスト演出は1動画内で最低2種類使う（translateY以外にclipPath, per-word stagger等）

音声

• 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 に定義したブランドカラー・フォントで上記プレースホルダーを埋めること。

マスコットキャラクター汎用パターン

プロジェクトにマスコットキャラクターがある場合の汎用アニメーションパターン。 キャラクター名や見た目はプロジェクトごとに異なるため、ここではモーションパターンのみ定義する。

状態別アニメーション

登場・退場アニメーション

// 登場: 画面外から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')} />

推奨設定

ワークフロー

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

SNS別推奨設定

• 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人以下の会社は無料 （商用利用OK）。 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
• Anti-Templateチェックリスト : references/anti-template-checklist.md

Weekly Installs

91

Repository

kimny1143/claud…template

First Seen

Jan 22, 2026

Security Audits

Gen Agent Trust HubPassSocketPassSnykPass

Installed on

claude-code76

opencode52

gemini-cli51

codex49

cursor49

github-copilot48