Remotion Video Creation

affaan-m/ECC/docs/zh-CN/skills/remotion-video-creation

by affaan-mef648e01899ba3e8dc6371642deaaf64b4477775No license275K starsListed Oct 9, 2026Updated Oct 9, 2026Repository updated 4 days ago

Remotion 最佳实践 - 在 React 中创建视频。29 条领域特定规则,涵盖 3D、动画、音频、字幕、图表、过渡等。

AI-generated overview

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

What it does
This skill is a knowledge reference for Remotion, the React-based video framework. It points to 29 rule files covering topics such as 3D with Three.js, animations, assets, audio, captions, charts, compositions, fonts, GIFs, Lottie, sequencing, Tailwind, text animation, timing, transitions and trimming. It produces guidance and code examples rather than video files or scripts.
When to use it
Use it when working on Remotion code and needing domain-specific guidance on a particular topic. It is meant for looking up patterns and examples for video composition, animation, audio or caption work in React.
Requirements
No scripts are shipped; it is instructions only. The referenced rule files are not present in the skill folder, and the described techniques assume a Remotion project with React and related packages such as Three.js, React Three Fiber, Lottie, TailwindCSS, Mediabunny and @remotion/captions.

使用时机

当处理 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] - 在 Remotion 中显示字幕,支持 TikTok 风格页面和单词高亮
  • 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/zh-CN/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