Remotion 最佳实践

解决的问题

Remotion 用 React 做视频渲染，但具体写法分散：时间线、spring、interpolate、字幕、音视频导入、Lottie、Tailwind、3D、字体和 DOM 测量很容易混在一起。这个技能把常见需求整理成规则文件，减少反复查文档和试错。

能力与使用方式

• 动画：rules/animations.md、rules/sequencing.md、rules/timing.md 覆盖序列、延迟、裁剪、插值和弹簧动画。
• 素材：rules/assets.md、rules/videos.md、rules/audio.md、rules/fonts.md、rules/images.md 指导导入、播放和嵌入。
• 字幕：rules/display-captions.md、rules/import-srt-captions.md、rules/transcribe-captions.md 覆盖显示、.srt 导入和转录。
• 检测：rules/calculate-metadata.md、rules/can-decode.md、rules/get-video-duration.md 支持动态元数据和浏览器解码检查。
• 可视化：rules/charts.md、rules/lottie.md、rules/gifs.md、rules/3d.md 覆盖图表、Lottie、GIF 和 React Three Fiber。

它偏向 Remotion 工程实践，不是视频剪辑工具或设计系统。若规则引用 Mediabunny、@remotion/captions 或 React Three Fiber，需要确认项目依赖和目标浏览器支持；动态 props、尺寸、时长变化也要与合成定义保持同步。