Communitygithub.com

motion-design: ワークショップ (Remotion, テーマ, サウンド, ミュージック)

モーションデザイン映像制作のための統合ワークショップ。Remotionアニメーション、テーマ定義、シンセサウンドパレット、楽曲、ミックスをすべてコードとして管理します。

motion-design: ワークショップ (Remotion, テーマ, サウンド, ミュージック) とは？

このスキルは、Remotion 4.0をベースにしたモーションデザインの全工程を完全にローカルかつ決定論的に実行するワークショップです。アニメーションはReact/TSXのコンポーネントとして記述され、テーマ（色、フォント、サイズ）は単一のテーマファイルで管理され、全てのシーンがそこから参照します。サウンド面では、Pythonで記述されたシンセサイザー（FMエレクトリックピアノ、パッド、ベース、パーカッションなど）による楽曲、ジェスチャーボキャブラリに基づく効果音パレット、そしてEBU R128規格に準拠したミキシングまでをカバーします。主な対応プラットフォームはClaude Codeですが、Remotionの知識とターミナル操作が可能な開発者であれば誰でも利用可能です。各映像作品は、`cues.json`で定義されたキータイムが映像と音声の両方を駆動し、`son.py`によるサウンド計画と`mix.py`による最終ミックスを経て、`npx remotion render`で書き出されます。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ThomasHMD/premiere-rough-cut/tree/HEAD/skills/motion-design
オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

motion-design: ワークショップ (Remotion, テーマ, サウンド, ミュージック) は何をしますか？

すべてローカルかつ決定論的です。同じコード = 同じMP4。AIによる画像や動画は生成しません。

スタック

要素ツール場所
アニメーションRemotion 4.0.529 (React / TSX)、バージョンは package.json で固定src/; モジュール追加は npx remotion add <package>
テーマ色、フォント、サイズ、マージンsrc/illustration/theme.ts (src/illustration/scenes/kit.tsx の C と F 定数から読み取り)、フォントは public/fonts/
Remotion モジュールtransitions, effects, gsap, three, noise, paths, shapes, motion-blur, light-leaks, starburst, rough-notation, captions, layout-utils, lottiepackage.json
グラフィック合成BrandedVideo (フルスクリーンシーン), LowerThirdTrack (ローワーサード、セクションタイトル), Screencast (サイトデモ), Scene (シーンカタログ), ControleTexte (テキストチェック), FondAnime (ループアニメーション背景; グレインは scripts/make-grain.py で生成)src/illustration/、Compositions.tsx で宣言、src/Root.tsx で配線
共有キュー秒単位のキータイム、アニメーションとサウンドの両方から読み取りsrc/<project>/cues.json
音楽Python で記述されたスコア (numpy シンセサイザー scripts/synth.py: FMエレクトリックピアノ、パッド、ベース、パーカッション、ビニールノイズ、リバーブ)music/<project>.py、モデル: music/example_pad.py
効果音シンセサイズされたパレット: サウンド操作前に reference/sound-palette.md を読むこと。シンセレシピ scripts/make-sfx.py -> public/sfx/*.wav + palette.json; ジェスチャーボキャブラリ scripts/son.py (計画はジェスチャー名を指定し、ファイル名は指定しない; リストはデフォルトでアイテムごとに1枚のカード、son.LISTES; son.releve: ビデオのサウンドの番号付きリスト、番号でレビュー); scripts/palette-import.py (実際の録音パレット、同じファイル名、デフォルトにフォールバック); scripts/sfx.py (追加のサウンド: シャッター、フォーカスチック、ウーシュ)scripts/
ミックス音楽 + 効果音 + ボイス、ボイス下で音楽をダッキング、EBU R128 ターゲットラウドネス、トゥルーピーク -1.5 dBTP 制限 (オーバーサンプルリミッター、オーバーシュート時のみ)scripts/mix.py
チェックオクターブごとのトーンバランス、ラウドネスscripts/ltas.py, mix.py

ライセンス. Remotionは個人および従業員3人以下の企業は無料です。それ以上の規模の企業では企業ライセンス (remotion.pro) が必要です。キットを大企業で商用利用する前に LICENSE.md を読んでください。フォント Inter と Source Serif 4 は OFL ライセンスです (public/fonts/OFL-*.txt); サウンドとサンプル音楽はここでシンセサイズされたもので、第三者の権利はありません。他から見つけた音楽: ライセンスを確認してください (収益化チャンネルでは CC-BY-NC は使用不可)。

セットアップと node_modules 行の役割

プラグインは一度だけインストールします:

bash "${CLAUDE_PLUGIN_ROOT}/install.sh" --data "${CLAUDE_PLUGIN_DATA}"

(Claude Code がこのファイルを読み取るとき、両方の変数を実際のパスに置き換えます。) データフォルダを使用する理由: プラグインフォルダはプラグイン更新のたびに置き換えられ、node_modules のサイズは約 1 GB です。そのため npm ci はプラグインのデータフォルダ (${CLAUDE_PLUGIN_DATA}) で一度だけ実行され、これは更新後も保持され、skills/motion-design/node_modules はそのシンボリックリンクになります。プラグイン更新後に node_modules が見つからない場合 (新しいプラグインフォルダにリンクがない)、上記の行を再実行してください: 不足分だけを行い、すぐに再リンクします。

手動インストール (4つの skills/ フォルダを ~/.claude/skills/ に並べてコピー): キットルートで bash install.sh を実行; node_modules は通常のフォルダとして npm ci でインストールされます。Python 側: python3 -m pip install numpy scipy soundfile pillow、そして brew install ffmpeg。詳細とチェーン全体の確認: キットの INSTALL.md。

このスキルのコマンドはすべてワークショップフォルダ (skills/motion-design) から実行してください。

モーションデザインビデオの全パイプライン

  1. フレーム設定: 尺、フォーマット (デフォルトは 1920x1080 @ 30fps; 縦型リールは 1080x1920; 正方形は 1080x1080)、用途、プラットフォーム制約。src/<project>/cues.json を記述: キータイムが映像とサウンドの両方を駆動。
  2. アニメーション: デリバラブルごとに src/<project>/ に合成を作成、src/Root.tsx で宣言、プロップスは zod で型付け。すべて useCurrentFrame() から派生: フリーの CSS アニメーションは禁止、Math.random() は禁止 (random(seed) または noise2D を使用)。テーマの色とフォントのみを使用。
  3. レンダリングせずに映像をチェック: npx remotion still src/index.ts <Id> out.png --frame=N でキーフレームを確認、その後 MP4 のコンタクトシート (ffmpeg tile)。電話サイズで評価: 390 px 幅に縮小しても判読可能でなければならない。
  4. ナレーション (ある場合): ユーザーが録音 (48 kHz WAV)、--voice-at で配置。キットは声のクローンを生成しない。
  5. 音楽と効果音: python3 music/<project>.py <duration> music.wav; サウンドは son.py を通して、映像と同じ瞬間に配置 (計画は son.releve(...) を呼び出して聴くための番号付きリストを作成); python3 scripts/ltas.py music.wav でチェック (緩やかな傾斜に対して約 6 dB 以上の穴がないこと)。
  6. ミックス: python3 scripts/mix.py --music ... --sfx ... [--voice ... --voice-at s] --lufs -16 --out public/audio/<project>_mix.wav (リールは -14、YouTube は -16; --sfx-voix-ref -22 は実際の声に対して効果音をリスケール)。
  7. レンダリング: npx remotion render src/index.ts <Id> out.mp4 --props='{"audio":"audio/<project>_mix.wav"}' --codec=h264 --crf=16 --audio-bitrate=320k。
  8. 納品: 既存のデリバラブルを上書きせず (サフィックス -v2)、プレビュー付きで。

Premiere に配置するレンダリング (グラフィックス)

  • シーン、フルスクリーングラフィック、またはローワーサードにロゴは不要: 画像を無駄に読み込むだけ。
  • 29.97 fps シーケンス用のファイルは、クリップ全体をカバーする必要があります: n シーケンスフレームは n x 1.001 / 30 秒続きます。src/illustration/ の合成は tailFrames を受け入れます: TenirFin コンポーネント (src/illustration/tenir-fin.tsx) は、その尺にわたってアニメーションを再生し、最後のフレームを保持します; 終了アニメーションは移動しません。overlays スキルの scripts/render-segments.py が tailFrames を計算します。
  • グラフィックス合成は overlays スキルの scripts/render-segments.py、scripts/screencast-render.py、scripts/montage-tella.py によってレンダリングされます (ワークフォルダ = このワークショップ、PNG フレーム、4 コア)。remotion still チェック以外で手動で行わないでください。staticFile を通して呼び出されるメディアは public/scenes/<video>/ に置きます。

自分好みにカスタマイズ (テーマの変更)

キットにはニュートラルなテーマが同梱されています: アクセントカラー #2F5BEA、Inter と Source Serif 4、1つのテーマファイル src/illustration/theme.ts。独自のブランドを使用するには:

  1. 色: src/illustration/theme.ts (color: base, contrast, inkSoft, muted, surface, line, accent, accentDark, accentWash, darkBg, paperWarm); シーンは C を通して読み取ります。アクセントとその薄い色合いはまだいくつかの場所にハードコードされています: grep -rn "#6B8CFF\|rgba(47,91,234\|rgba(214,224,252" src/ (preuves.tsx、Screencast.tsx、compositions/FondAnime.tsx の PALETTES バリアント内のハイライト)、新しいアクセントに合わせます。1つのアクセント、信号として使用され、塗りつぶしとしては使用しません。
  2. フォント: .woff2 ファイルを public/fonts/ に配置し、ロードリスト (src/illustration/scenes/kit.tsx、compositions/BrandedVideo.tsx、compositions/LowerThirdTrack.tsx、compositions/Screencast.tsx) と theme.ts (font.display、font.sans) 内のファイル名とファミリ名を変更します。フォントに数字とアクセントがあることを確認してください ("latin-ext" サブセットだけでは数字も基本文字も含まれておらず、すべてが Georgia にフォールバックします)。ファミリ名に数字を含めないか (または CSS で引用符で囲む)。
  3. アニメーションカーブ: scenes/kit.tsx の easeStd と scripts/make-sfx.py の EASING は連動します (サウンドは映像のカーブに従います)。
  4. チェック: npx tsc --noEmit を実行し、次に各合成 (引用、ローワーサード、セクションカード、数字など) の remotion still を実行し、その後次の render-segments.py 実行で --force を指定します (そのキャッシュはすでに src/illustration/ のコードに従っています)。

シーンまたはサウンドの追加

  • シーン: src/illustration/scenes/opaque.tsx (フルスクリーン) または alpha.tsx (オーバーレイ) にコンポーネント、その上に data コントラクトをコメントとして記述、レジストリ scenes/Scene.tsx に1行、overlays SKILL.md のカタログに1行。すべての瞬間は cues から来ます。チェック: 複数のフレームで remotion still、クリップのフレーム上に合成されたオーバーレイを確認。
  • サウンド: reference/sound-palette.md の「サウンドの追加または調整」を参照。

同期フォルダの落とし穴

ワークショップが同期フォルダ (Dropbox、iCloud、Drive など) にある場合、別のマシンがファイルの古いバージョンを送り返し、良いファイルを「競合コピー」にリネームする可能性があります。症状: Could not find composition with ID ...。対処法: find . -name '*conflicted copy*' -not -path './node_modules/*'、比較して最新版を保持。webpack キャッシュ (node_modules/.cache) も競合する可能性があります: 削除すると Remotion が再構築します。可能であれば node_modules を同期から除外してください。

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

ThomasHMD/overlays

Add overlays to a talking-head clip (editorial YouTube video, tutorial, reel) with graphics synced to the word on the voice: lower thirds, full-screen quotes, chapter cards, animated scenes (numbers, lists, timelines, documents, emails, GIFs), illustration photos, b-rolls, automatically recorded website demos, sound effects.

ThomasHMD/rough-cut

Automatic rough cut of talking-head footage (monologues, spoken videos) for Premiere Pro. Produces a Final Cut Pro 7 XML (XMEML) whose timeline already has the retakes, false starts, stumbles, filler words and long silences removed. The original clip is never touched.

ThomasHMD/subtitles

Fix a Premiere Pro caption/transcript JSON export (an auto transcription full of typos, especially on proper nouns) by transcribing the video again locally with whisper.cpp, then rebuilding a JSON in Premiere's exact format (re-importable as is) with names corrected from a reference script, punctuation and capitals restored, titles of works in quotes, and word timings realigned on the audio by forced alignment.

関連スキル

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community