remotion

Remotion Video Skill

A general-purpose skill for producing video content using Remotion, which generates videos with React.

★ Quality Principles (Anti-Template)

"Doing everything properly" is the true nature of the AI-generated feel. "What to discard" is design.

When implementing Remotion files, follow the principles below. Detailed checklist: references/anti-template-checklist.md

6 patterns to absolutely avoid

#	Antipatterns	Alternative
1	All elements enter with the same spring config	Vary damping/mass by element weight (heavy: 20/1.2, light: 8/0.3)
2	Only one pattern: translateY + opacity	Mix mask reveals, word staggers, hard cuts, etc.
3	`delay={i * 8}` uniform delay of	`[0, 5, 13, 21]` organic intervals such as
4	All scenes center-aligned	At least 1 scene with an asymmetric layout
5	Same transition 3 or more times	Mix Wipe, Scale, Hard cut, Crossfade
6	Scenes where the composition doesn't change for 8 seconds or more	Change scale/position/zoom partway through

Hooks and pacing

First 3 seconds: Pattern interrupt (silence→explosion, extreme zoom→pull back, etc.)
BPM sync: Align cut positions to the beat, whilenot cutting on every beat（cut-cut-hold-cut-hold-hold-cut-CUT）
SFX required: whoosh before transitions, impact sound on text appearance, 6-10f of silence before the hook
A Social Proof beat is required for a 30-second promo(e.g., "Free", "★4.8")

Run quality check

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

This check runs automatically on Write/Edit of Remotion files (hook already configured).

About brand settings

Define the color palette, fonts, and mascot character specifications in each project's CLAUDE.md . Do not include brand-specific information in this skill. Assume sections like the following are prepared on the project side:
## Video Branding
- Primary: #XXXXXX
- Accent: #XXXXXX
- Background: #XXXXXX
- Font Heading: ...
- Font Body: ...
- Mascot: （キャラ名、デザイン仕様、アニメーションパターン等）

Quick start

# 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

Manual setup

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

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

Video templates

1. Promotional video (30 seconds)

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

Composition settings:

Resolution: 1920x1080 (16:9)
FPS: 30
Total frames: 900

2. Feature introduction video (15 seconds)

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

Composition settings:

Resolution: 1080x1080 (1:1, for SNS) or 1080x1920 (9:16, for reels)
FPS: 30

3. Tutorial video (60 seconds)

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

4. Short-form SNS video (5-10 seconds)

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

Composition settings:

Resolution: 1080x1920 (9:16)
FPS: 30

Project structure

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

Development rules

Composition

One component per file
Externalize animation parameters via props (for easier adjustment later)
<Sequence> Manage scene timing with

Animation

interpolate() for smooth value interpolation
spring() for natural physics animation
Change the spring config based on the element's "weight"(See ★ Anti-Template Principle)
- Heavy element (mockup): { damping: 20, mass: 1.2 }
- Light element (dot): { damping: 8, mass: 0.3 }
Use at least 2 types of text effects within a single video (besides translateY, use clipPath, per-word stagger, etc.)

Audio

BGMは /public/audio/ place in
<Audio> synchronized playback with the component

Theme (theme.ts template)

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;

Project's CLAUDE.md Fill in the above placeholders with the brand colors and fonts defined in.

Generic mascot character patterns

Generic animation patterns for when a project has a mascot character. Character names and appearances differ per project, so only motion patterns are defined here.

State-specific animations

State	Use	Animation
idle	Idle	Light breathing (2px up/down, 2-second cycle) + blinking
curious	Interest/Explanation	Tilt head + widen eyes
happy	Joy/Completion	Bounce + facial expression change
pointing	Pointing	Turn body + extend arm/wing

Entrance/exit animations

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

Asset generation (mcp-image integration)

mcp-image (Nano Banana Pro) If the MCP server is available, you can generate asset images for videos.

Use

Background images/textures
Screenshot-style images inside mockups
Character illustration and icons
Visual assets per scene

How to use

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

Recommended settings

Use	quality	aspectRatio	Notes
Draft/Verification	`fast`	Match to the video	For iteration, speed priority
Production assets	`balanced`	`9:16` or `16:9`	For final deliverables
Key visual	`quality`	`9:16` or `16:9`	For posters/thumbnails

Workflow

generate_image Generate assets with (purpose: "remotion video asset" recommended)
From the output destination, public/images/ copy to
staticFile('images/filename.png') reference from Remotion with

Rendering

# 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

Recommended settings by social platform

Twitter/X: 1280x720, 30fps, max 140 seconds
Instagram Reels: 1080x1920 (9:16), 30fps
TikTok: 1080x1920 (9:16), 30fps

In-app embedding with @remotion/player

Can be played interactively without pre-rendering.

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
/>

Control with dynamic props

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

License

Remotionは Free for companies with 3 or fewer people(commercial use OK). If you have 4 or more people, a Company License ($25/developer/month) is required. Details: https://www.remotion.dev/license

Reference resources

Remotion official documentation: https://www.remotion.dev/docs
Remotion + AI Guide: https://www.remotion.dev/docs/ai/
Remotion official skill: npx add-skill remotion-dev/skills
Animation pattern collection: references/animation-patterns.md
Anti-Template checklist: references/anti-template-checklist.md

About this skill

★ Quality Principles (Anti-Template)

6 patterns to absolutely avoid

Hooks and pacing

Run quality check

About brand settings

Quick start

Manual setup

Video templates

1. Promotional video (30 seconds)

2. Feature introduction video (15 seconds)

3. Tutorial video (60 seconds)

4. Short-form SNS video (5-10 seconds)

Project structure

Development rules

Composition

Animation

Audio

Theme (theme.ts template)

Generic mascot character patterns

State-specific animations

Entrance/exit animations

Asset generation (mcp-image integration)

Use

How to use

Recommended settings

Workflow

Rendering

Recommended settings by social platform

In-app embedding with @remotion/player

Control with dynamic props

License

Reference resources