Remotion Video Creation

作者 affaan-mef648e01899b無授權條款275K 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫3 天前更新

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

AI 產生的概覽

以 React 製作 Remotion 影片的參考規則,涵蓋動畫、3D、音訊、字幕與圖表。

功能
此技能為撰寫以 React 渲染影片的 Remotion 程式碼提供領域專屬指引。內容依 29 個規則主題編排,每個主題指向含說明與程式碼範例的規則檔案,涵蓋透過 Three.js 與 React Three Fiber 實作 3D、動畫、時間控制、序列、轉場、裁剪、素材、字型、圖片、影片、音訊、GIF、Lottie、TailwindCSS、圖表、字幕與轉錄,以及以 Mediabunny 為基礎的媒體檢查(例如解碼偵測、影格擷取、時長與尺寸測量)。它產出的是指引內容,而非完成的影片檔案。
適用情境
在處理 Remotion 程式碼且需要領域專屬知識時使用,例如設定合成、為文字或場景加上動畫、嵌入媒體,或處理字幕與中繼資料。
執行需求
僅為說明文件,未附帶指令碼。使用時需搭配閱讀所引用的規則檔案;所述技術涉及 Remotion、React,以及 Three.js、React Three Fiber、Lottie、TailwindCSS、@remotion/captions、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 への動画埋め込み——トリミング、音量、速度、ループ、ピッチ

來源與署名

來源:affaan-m/ecc位於docs/ja-JP/skills/remotion-video-creation提交ef648e0

授權條款: 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架