mcpField
R
remotion

remotion

github.com/digitalsambaクリエイティブ・メディア2.4k1.2k 回インストール今日更新
リポジトリ

remotion について

Remotion動画プロジェクト向けのツールキット固有スキルです。再利用可能なコンポーネントや独自のシーン遷移を使ったテンプレート拡張と、時間設定の規約を説明します。

主な機能

  1. 01再利用可能な動画コンポーネント
  2. 02独自シーン遷移ライブラリ
  3. 03遷移の例と長さの目安
  4. 0430fpsのプロジェクト時間規約
  5. 05ナレーションに基づくシーン時間設定

活用シーン

  1. 01テンプレートに再利用可能な背景やオーバーレイを追加
  2. 02動画シーン間のエフェクトを選択
  3. 03タイトル、デモ、クレジットのシーン時間を設定

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/digitalsamba/claude-code-video-toolkit --skill remotion

インストール後、Claude Code で/remotionを入力して読み込まれたか確認します。

同梱ファイルreference.md

詳細

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）
LabelJIRA の参照情報を付けられる、浮遊するラベルバッジ
Vignette映画のような周辺減光オーバーレイ
LogoWatermark画面の隅に配置するロゴのブランディング
SplitScreen横並びの動画比較
NarratorPiPピクチャーインピクチャー形式のプレゼンターオーバーレイ
Envelope開くフラップのアニメーション付き 3D 封筒
PointingHandスライドインとパルス効果のアニメーション付き手の絵文字
MazeDecoration画面の隅に配置するアニメーション付きアイソメトリックグリッド装飾

カスタムトランジション

このツールキットには、公式の @remotion/transitions パッケージでは対応していないシーン間エフェクトを備えたトランジションライブラリが lib/transitions/ に含まれています。

TransitionSeries の使用
import { TransitionSeries, linearTiming } from '@remotion/transitions';
// Import custom transitions from lib (adjust path based on your project location)
import { glitch, lightLeak, clockWipe, checkerboard } from '../../../../lib/transitions';
// Or import from @remotion/transitions for official ones
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、blurAmountCTA、エネルギッシュな場面、インパクトのある演出
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

トランジションの例
// Tech/cyberpunk feel
glitch({ intensity: 0.8, slices: 8, rgbShift: true })

// Warm celebration
lightLeak({ temperature: 'warm', direction: 'right' })

// High energy zoom
zoomBlur({ direction: 'in', blurAmount: 20 })

// Chromatic aberration
rgbSplit({ direction: 'diagonal', displacement: 30 })

// Clock sweep reveal
clockWipe({ direction: 'clockwise', startAngle: 0 })

// Retro pixelation
pixelate({ maxBlockSize: 50, glitchArtifacts: true })

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

ツールキットの規約

以下は、このツールキット固有の選択事項です。Remotion 全般のベストプラクティス（補間のクランプ、useVideoConfig、delayRender、staticFile、CSS アニメーションを使わないこと）については、remotion-official スキルを参照してください。

  1. すべてのプロジェクトで 30fps を使用します — タイミング：フレーム数 = 秒数 × 30
  2. playbackRate は一定である必要があります — 可変速度や極端な速度を使う場合は、FFmpeg で事前処理してください
  3. 動画／音声コンポーネント — テンプレートでは remotion の <OffthreadVideo> と <Audio> を使用します。上流では現在、@remotion/media の <Video>／<Audio>（新しいコンポーネントで、トリム用 props とピッチシフトに対応）も説明されています。どちらも正しくレンダリングされます。既存のテンプレートを拡張する場合は、一貫性を保つため、ツールキットで採用されているものを優先してください。

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

シーンの種類長さ備考
タイトル3-5s (90-150f)ロゴ + 見出し
概要10-20s箇条書き 3-5 項目
デモ10-30s合わせるために playbackRate を調整します
統計8-12s統計カード 3-4 枚
クレジット5-10sすばやくフェード

ペース： ナレーションは約 150 語／分です。タイミングはナレーションを基準にします。

高度な API

フック、コンポーネント、レンダラー、Lambda、Player の各 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 の更新をご案内します。

コメント

Markdown 対応