Remotion — ツールキット拡張

Remotion のコア知識 は .claude/skills/remotion-official/ に存在します（公式の remotion-dev/skills リポジトリから同期）。このファイルは ツールキット固有の パターンのみをカバーします。

共有コンポーネント

lib/components/ の再利用可能なビデオコンポーネント。テンプレートでのインポート方法：

import { AnimatedBackground, SlideTransition, Label } from '../../../../lib/components';

コンポーネント	目的
AnimatedBackground	フローティングシェイプ背景（バリエーション：subtle, tech, warm, dark）
SlideTransition	シーン遷移（fade, zoom, slide-up, blur-fade）
Label	フローティングラベルバッジ（オプションで JIRA リファレンス付き）
Vignette	シネマティックなエッジダークニングオーバーレイ
LogoWatermark	コーナーロゴブランディング
SplitScreen	サイドバイサイドビデオ比較
NarratorPiP	ピクチャインピクチャプレゼンター表示
Envelope	開く動作のアニメーション付き 3D 封筒
PointingHand	スライドインとパルスアニメーション付きの手の絵文字
MazeDecoration	コーナー用アニメーション等尺グリッド装飾

カスタム遷移

ツールキットには lib/transitions/ の遷移ライブラリが含まれており、公式の @remotion/transitions パッケージを超えたシーン間の効果を提供します。

TransitionSeries の使用

import { TransitionSeries, linearTiming } from '@remotion/transitions';
// lib からカスタム遷移をインポート（プロジェクトの場所に基づいてパスを調整）
import { glitch, lightLeak, clockWipe, checkerboard } from '../../../../lib/transitions';
// または公式のものを @remotion/transitions からインポート
import { slide, fade } from '@remotion/transitions/slide';

<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={90}>
    <TitleSlide />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition
    presentation={glitch({ intensity: 0.8 })}
    timing={linearTiming({ durationInFrames: 30 })}
  />
  <TransitionSeries.Sequence durationInFrames={120}>
    <ContentSlide />
  </TransitionSeries.Sequence>
</TransitionSeries>

利用可能なカスタム遷移

遷移	オプション	最適な用途
glitch()	intensity, slices, rgbShift	テックデモ、エッジの効いた表示、サイバーパンク
rgbSplit()	direction, displacement	モダンテック、エネルギッシュな遷移
zoomBlur()	direction, blurAmount	CTA、高エネルギーの瞬間、インパクト
lightLeak()	temperature, direction	祝いの場面、フィルム風エステティック、温かい瞬間
clockWipe()	startAngle, direction, segments	時間関連のコンテンツ、楽しい表示
pixelate()	maxBlockSize, gridSize, scanlines, glitchArtifacts, randomness	レトロ/ゲーミング、デジタル変換
checkerboard()	gridSize, pattern, stagger, squareAnimation	楽しい表示、構造化された遷移

チェッカーボードパターン: sequential, random, diagonal, alternating, spiral, rows, columns, center-out, corners-in

遷移の例

// テック/サイバーパンク風
glitch({ intensity: 0.8, slices: 8, rgbShift: true })

// 温かい祝いの場面
lightLeak({ temperature: 'warm', direction: 'right' })

// 高エネルギーズーム
zoomBlur({ direction: 'in', blurAmount: 20 })

// クロマティック収差
rgbSplit({ direction: 'diagonal', displacement: 30 })

// 時計スイープ表示
clockWipe({ direction: 'clockwise', startAngle: 0 })

// レトロなピクセル化
pixelate({ maxBlockSize: 50, glitchArtifacts: true })

// チェッカーボードパターン
checkerboard({ pattern: 'diagonal', gridSize: 8 })
checkerboard({ pattern: 'spiral', gridSize: 10 })
checkerboard({ pattern: 'center-out', squareAnimation: 'scale' })

遷移時間ガイドライン

タイプ	フレーム	備考
クイックカット	15-20	高速、キビキビした感じ
標準	30-45	最も一般的
ドラマティック	50-60	ゆっくりした表示
グリッチ効果	20-30	突然のような感覚
ライトリーク	45-60	スイープに時間が必要

遷移プレビュー

遷移ギャラリーのショーケースを実行してすべての遷移を表示：

cd showcase/transitions && npm run studio

ツールキット ベストプラクティス

1. フレームベースのアニメーションのみ — CSS トランジション/アニメーションを避ける。レンダリング中にちらつきが発生する
2. useVideoConfig() から fps を使用 — アニメーションをフレームレート非依存にする
3. 補間をクランプ — extrapolateRight: 'clamp' を使用して値の暴走を防ぐ
4. OffthreadVideo を使用 — 複雑なコンポジションで <Video> より高いパフォーマンス
5. 非同期には delayRender — データの準備ができるまでレンダリングを常にブロック
6. アセットには staticFile — public/ フォルダからファイルを正しく参照
7. すべてのプロジェクトは 30fps を使用 — タイミング：フレーム数 = 秒 × 30
8. playbackRate は定数である必要がある — 可変/極端な速度の場合、FFmpeg で前処理

プロジェクト タイミング規約

シーンタイプ	時間	備考
タイトル	3-5秒（90-150フレーム）	ロゴ＋見出し
概要	10-20秒	3-5個の箇条書き
デモ	10-30秒	playbackRate を調整してフィット
統計	8-12秒	3-4個の統計カード
クレジット	5-10秒	クイックフェード

ペーシング: ボイスオーバーで約 150 words/分。ボイスオーバーがタイミングを決定します。

高度な API

すべてのフック、コンポーネント、レンダラー、Lambda、プレイヤー API の詳細な API ドキュメントについては、reference.md を参照してください。

ライセンス注記

Remotion には特別なライセンスがあります。企業は商用利用のためにライセンスを取得する必要がある場合があります。https://remotion.dev/license をチェックしてください

---

フィードバックと貢献

このスキルに不足している情報がある場合や改善できる場合：

• パターンが不足していますか？ 何が必要だったかを説明してください
• エラーを見つけましたか？ 何が間違っているかを教えてください
• 貢献したいですか？ 次の手助けができます：
  1. 改善でこのスキルを更新
  2. github.com/digitalsamba/claude-code-video-toolkit に PR を作成

「improve this skill」と言うだけで、.claude/skills/remotion/SKILL.md を更新するプロセスをガイドします。