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 从公开仓库中收录这些内容。

举报或申请下架