Remotion Video Creation

by affaan-mef648e01899bNo license275K starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 3 days ago

Remotion のベストプラクティス - React で動画を作成する。3D、アニメーション、音声、字幕、チャート、トランジションなどをカバーするドメイン固有の29のルール。

AI-generated overview

Reference rules for building Remotion videos with React, covering animation, 3D, audio, captions and charts.

What it does
This skill supplies domain-specific guidance for writing Remotion code that renders video with React. It is organized as 29 rule topics, each pointing to a rule file with explanations and code examples, spanning 3D via Three.js and React Three Fiber, animations, timing, sequencing, transitions, trimming, assets, fonts, images, videos, audio, GIFs, Lottie, TailwindCSS, charts, captions and transcription, and Mediabunny-based media inspection such as decoding checks, frame extraction, and duration or dimension measurement. It produces guidance rather than finished video files.
When to use it
Use it when working with Remotion code and needing domain-specific knowledge, for example setting up compositions, animating text or scenes, embedding media, or handling captions and metadata.
Requirements
Instructions only; no scripts are shipped. The referenced rule files are expected to be read alongside it, and the described techniques involve Remotion, React, and libraries such as Three.js, React Three Fiber, Lottie, TailwindCSS, @remotion/captions, and Mediabunny.

使用場面

Remotion のコードを扱い、ドメイン固有の知識が必要な場合にこのスキルを使用してください。

使い方

詳細な説明とコード例については、各ルールファイルをお読みください:

  • rules/3d.md [blocked] - Three.js と React Three Fiber を使用して Remotion で 3D コンテンツを作成する
  • rules/animations.md [blocked] - Remotion の基本的なアニメーションスキル
  • rules/assets.md [blocked] - Remotion で画像、動画、音声、フォントをインポートする
  • rules/audio.md [blocked] - Remotion での音声とサウンドの使用——インポート、トリミング、音量、速度、ピッチ
  • rules/calculate-metadata.md [blocked] - コンポジションの長さ、サイズ、プロパティを動的に設定する
  • rules/can-decode.md [blocked] - Mediabunny を使用してブラウザが動画をデコードできるか確認する
  • rules/charts.md [blocked] - Remotion のチャートとデータビジュアライゼーションパターン
  • rules/compositions.md [blocked] - コンポジション、静止画、フォルダー、デフォルトプロパティ、動的メタデータの定義
  • rules/display-captions.md [blocked] - TikTok スタイルのページと単語ハイライトに対応した Remotion での字幕表示
  • rules/extract-frames.md [blocked] - Mediabunny を使用して指定タイムスタンプの動画フレームを抽出する
  • rules/fonts.md [blocked] - Remotion で Google フォントとローカルフォントを読み込む
  • rules/get-audio-duration.md [blocked] - Mediabunny を使用して音声ファイルの長さ(秒)を取得する
  • rules/get-video-dimensions.md [blocked] - Mediabunny を使用して動画ファイルの幅と高さを取得する
  • rules/get-video-duration.md [blocked] - Mediabunny を使用して動画ファイルの長さ(秒)を取得する
  • rules/gifs.md [blocked] - Remotion のタイムラインと同期した GIF を表示する
  • rules/images.md [blocked] - Img コンポーネントを使用して Remotion に画像を埋め込む
  • rules/import-srt-captions.md [blocked] - @remotion/captions を使用して .srt 字幕ファイルを Remotion にインポートする
  • rules/lottie.md [blocked] - Remotion に Lottie アニメーションを埋め込む
  • rules/measuring-dom-nodes.md [blocked] - Remotion で DOM 要素のサイズを測定する
  • rules/measuring-text.md [blocked] - テキストサイズの測定、コンテナへのテキスト適合、オーバーフローの確認
  • rules/sequencing.md [blocked] - Remotion のシーケンスパターン——遅延、トリミング、項目の長さ制限
  • rules/tailwind.md [blocked] - Remotion で TailwindCSS を使用する
  • rules/text-animations.md [blocked] - Remotion のタイポグラフィとテキストアニメーションパターン
  • rules/timing.md [blocked] - Remotion の補間曲線——線形、イージング、スプリングアニメーション
  • rules/transcribe-captions.md [blocked] - Remotion で字幕を生成するための音声文字起こし
  • rules/transitions.md [blocked] - Remotion のシーントランジションパターン
  • rules/trimming.md [blocked] - Remotion のトリミングパターン——アニメーションの最初または最後をトリミングする
  • rules/videos.md [blocked] - Remotion への動画埋め込み——トリミング、音量、速度、ループ、ピッチ

Source and attribution

Source:affaan-m/eccindocs/ja-JP/skills/remotion-video-creationat commitef648e0

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal