mcpField
R
remotion

remotion

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

remotion について

remotion は、Remotion の動画プロジェクト向けツールキット拡張スキルです。React コンポーネントで動画を作る開発者向けに、再利用可能なコンポーネントや独自のトランジション、レンダリングの指針をまとめています。

主な機能

  1. 01再利用可能な動画コンポーネント
  2. 02独自のシーントランジション
  3. 03トランジション効果のパラメーター
  4. 04フレーム単位のアニメーションとレンダリング指針
  5. 05トランジションのショーケースギャラリー

活用シーン

  1. 01動画シーン間にトランジションを追加
  2. 02複数のテンプレートで視覚コンポーネントを再利用
  3. 03フレーム単位のアニメーションとシーン時間を設計
  4. 04ギャラリーでトランジション効果を確認

インストール

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

$npx skills add https://github.com/calesthio/openmontage --skill remotion

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

同梱ファイルreference.md

詳細

Remotion — Toolkit Extensions

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

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

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

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

シーンの種類長さ備考
タイトル3-5s (90-150f)ロゴ + 見出し
概要10-20s3-5 個の箇条書き
デモ10-30splaybackRate を調整して長さを合わせます
統計8-12s3-4 個の統計カード
クレジット5-10s短いフェード

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

高度な API

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

コメント

Markdown 対応