用途: remotion-best-practices 是一份技能/规则资料集,用于在编写 Remotion 代码时获取与在 React 中创建视频相关的领域知识。当需要处理 Remotion 代码时,可以按需查阅对应的规则文件,以了解具体做法和代码示例。
主要能力(按规则文件主题):
- 动画与时序:rules/animations.md(基础动画)、rules/timing.md(线性、缓动、弹簧等插值曲线)、rules/sequencing.md(延迟、裁剪、限制时长)、rules/trimming.md(裁剪动画开头或结尾)、rules/transitions.md(场景过渡)。
- 素材与媒体:rules/assets.md(导入图片、视频、音频、字体)、rules/images.md(Img 组件嵌入图片)、rules/videos.md(嵌入视频及裁剪、音量、速度、循环、音高)、rules/audio.md(音频导入、裁剪、音量、速度、音高)、rules/gifs.md(按时间轴同步显示 GIF)、rules/fonts.md(Google Fonts 与本地字体)、rules/lottie.md(嵌入 Lottie 动画)。
- 音频与字幕:rules/subtitles.md(字幕,按说明在处理字幕时加载)、rules/audio-visualization.md(频谱条、波形、低频响应效果)、rules/voiceover.md(使用 ElevenLabs TTS 添加 AI 生成旁白)、rules/get-audio-duration.md(用 Mediabunny 获取音频时长)。
- 视频处理与元数据:rules/ffmpeg.md(裁剪视频、检测静音等 FFmpeg 操作)、rules/transparent-videos.md(输出带透明度的视频)、rules/calculate-metadata.md(动态设置合成时长、尺寸和属性)、rules/parameters.md(通过 Zod schema 让视频参数化)、rules/can-decode.md(用 Mediabunny 检查浏览器能否解码视频)、rules/extract-frames.md(用 Mediabunny 在指定时间点提取帧)、rules/get-video-dimensions.md、rules/get-video-duration.md。
- 视觉与布局:rules/3d.md(使用 Three.js 和 React Three Fiber 制作 3D 内容)、rules/charts.md(柱状图、饼图、折线图、股票图等图表与数据可视化模式)、rules/light-leaks.md(使用 @remotion/light-leaks 的光漏叠加效果)、rules/maps.md(使用 Mapbox 添加并动画化地图)、rules/tailwind.md(在 Remotion 中使用 TailwindCSS)、rules/text-animations.md(排版与文字动画)、rules/measuring-dom-nodes.md(测量 DOM 元素尺寸)、rules/measuring-text.md(测量文本尺寸、适配容器与检查溢出)。
- 合成定义:rules/compositions.md(定义合成、静帧、文件夹、默认属性与动态元数据)。
使用方式: 按主题读取对应规则文件即可获得详细说明和代码示例;处理字幕时加载 ./rules/subtitles.md,使用 FFmpeg 时加载 ./rules/ffmpeg.md,需要音频可视化时加载 ./rules/audio-visualization.md。
适用场景: 在 React 项目中用 Remotion 制作视频,涉及动画、音视频素材处理、字幕、数据图表、3D、地图、参数化合成与透明视频输出等任务时,可据此查阅相应规则。
限制: 资料仅列出规则文件主题与加载方式,未提供安装命令、完整配置、定价或平台支持信息,这些内容暂未提供。