remotion-best-practices
Remotion 最佳实践 - 用React进行视频创作。涵盖30+规则文件,从基础动画到FFmpeg高级操作全覆盖。
这玩意儿干嘛的?
用 React 代码写视频——Remotion 官方出品的最佳实践指南,2,772 颗星。涵盖 30+ 规则文件,从基础动画、字幕处理、FFmpeg 操作到 Three.js 3D 场景全覆盖。装了这个 Skill,相当于有了一个 Remotion 视频开发的超级参考手册。
为什么值得装?
Remotion 本身很强大,但文档分散、参数多、坑不少。remotion-best-practices 把 Remotion 团队的最佳实践整理成了规则文件——什么参数怎么用、什么动画用什么插值、字幕怎么处理、FFmpeg 怎么调参,全是实战经验。对于需要用代码做视频的创作者,这相当于一本避坑指南。
怎么用?
- 创建项目:
npx create-video@latest --yes --blank --no-tailwind my-video - 预览调试:
npx remotion studio打开可视化编辑器 - 按需加载规则文件:不同场景加载不同规则(动画用
rules/animations.md、字幕用rules/captions.md)
核心功能
| 功能 | 说明 |
|---|---|
| 基础动画 | interpolate、Bezier 缓动、spring 物理动画的最佳实践 |
| 音频处理 | 音频裁剪、音量调整、背景音乐合成 |
| 字幕系统 | SRT/ASS 字幕加载、字幕动画、样式控制 |
| 图表渲染 | 柱状图、饼图、折线图、股票图的代码实现 |
| 字体加载 | Google Fonts 和本地字体的正确加载方式 |
| FFmpeg 集成 | 视频裁剪、静音检测、格式转换 |
| 3D 场景 | Three.js 和 React Three Fiber 集成到 Remotion |
| 语音合成 | ElevenLabs TTS 配音工作流 |
| 参数化视频 | Zod Schema 定义可参数化视频,通过 URL 参数控制内容 |
Install
openclaw install @Remotion/remotion-best-practices 同类推荐
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
nanobanana-ppt
归藏大佬出品:AI 驱动的 PPT 生成工具,智能分析文档、自动提取核心要点并规划 PPT 结构。
使用体验
评论区加载中...
(Artalk 评论系统,可自行部署后接入)