技能 remotion-best-practices
📦

remotion-best-practices

安全

使用 Remotion 和 React 创建程序化视频

也可从以下获取: remotion-dev

程序化构建视频需要理解 Remotion 的组合系统、动画模式和媒体处理。本技能提供了使用 React 组件和 Remotion API 创建专业视频的领域特定最佳实践。

支持: Claude Codex Code(CC)
🥉 74 青铜
1

下载技能 ZIP

2

在 Claude 中上传

前往 设置 → 功能 → 技能 → 上传技能

3

开启并开始使用

测试它

正在使用“remotion-best-practices”。 为文本创建淡入动画

预期结果:

使用 spring 辅助函数配合 useCurrentFrame 在前 60 帧内将透明度从 0 动画到 1。将插值后的值应用到文本元素的 style.opacity 属性。

正在使用“remotion-best-practices”。 如何添加背景音乐

预期结果:

从 Remotion 导入 Audio 组件，使用 src 属性指定音频文件路径，并将其包装在组合中。使用 volume 属性控制音量，使用 PlaybackRate 进行速度调整。

安全审计

安全
v1 • 2/24/2026

Static analyzer flagged 555 patterns that are all false positives. The backtick patterns are markdown code fences in documentation files, not shell execution. The crypto warnings hit YAML frontmatter fields. Network findings are documentation URLs and example code. This is a documentation-only skill with no executable code that poses security risks.

32
已扫描文件
3,157
分析行数
0
发现项
1
审计总数
未发现安全问题
审计者: claude

质量评分

38
架构
100
可维护性
87
内容
50
社区
100
安全
91
规范符合性

你能构建什么

社交媒体视频创建

使用 Remotion 组合创建具有统一品牌、字幕和动画的自动化视频内容，用于社交平台

数据可视化视频

生成带有动画图表、图形和数据可视化的解说视频，这些数据可从 JSON 数据源动态更新

教育内容制作

为在线课程构建带有同步字幕、代码高亮和逐步动画的教程视频

试试这些提示

基础组合设置 
帮我创建一个 Remotion 组合，显示带有动画文本的标题卡片。我需要组合为 1920x1080，30fps，时长 5 秒。
带缓动的动画 
展示如何使用 Remotion 中的 spring 动画让元素淡入并向上滑动。包括 useCurrentFrame 和 spring 配置。
媒体资源集成 
我需要导入视频文件并在其上叠加文本字幕。向我展示正确使用 Video 组件并将字幕与时间轴同步的方法。
高级排序 
解释如何排序多个场景并在它们之间添加过渡。包括用于复杂视频组合的 trim、offset 和 duration 控制。

最佳实践

  • 始终使用 useCurrentFrame() 驱动动画，以确保视频导出期间的确定性渲染
  • 在嵌套元素时使用带有适当 layout 属性的 Sequence 组件，以避免渲染伪影
  • 在渲染前预加载字体和资源，防止输出视频中出现闪烁或内容缺失

避免

  • 不要在 Remotion 组合中使用 React Three Fiber 的 useFrame()，因为它会导致非确定性渲染
  • 避免为复杂动画使用内联对象样式，因为它们会导致不必要的重新渲染
  • 切勿假设浏览器 API 可用，因为 Remotion 在无头环境中渲染

常见问题

Remotion 支持哪些视频格式？
Remotion 支持浏览器可以解码的格式，通常是 MP4 (H.264)、WebM 和 MOV。在渲染前使用 can-decode 工具验证格式兼容性。
如何优化 Remotion 渲染性能？
为组件使用 memo()，避免在 JSX 中使用内联函数，预加载资源，并在适当时在 Sequence 组件上使用 layout='none' 以减少布局计算。
我可以将 Remotion 与 TypeScript 一起使用吗？
是的，Remotion 拥有出色的 TypeScript 支持，内置类型定义。所有 hooks 和组件都完全类型化，提供更好的开发者体验。
如何处理不同的视频宽高比？
使用 useVideoConfig() 访问组合尺寸，并根据 width 和 height 计算响应式值。考虑使用 AbsoluteFill 进行全覆蓋布局。
Sequence 和 AbsoluteFill 之间有什么区别？
Sequence 控制时间轴上的时机和分层，而 AbsoluteFill 将元素定位以填充整个组合。它们服务于不同的目的，经常一起使用。
如何为视频添加字幕？
使用 @remotion/captions 包配合 importSrt() 解析 SRT 文件，然后将字幕数据映射到渲染的文本元素，与 useCurrentFrame() 同步。

开发者详情

许可证

MIT

仓库

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/remotion-best-practices

引用

main

文件结构

📁 rules/

📁 assets/

📄 charts-bar-chart.tsx

📄 text-animations-typewriter.tsx

📄 text-animations-word-highlight.tsx

📄 3d.md

📄 animations.md

📄 assets.md

📄 audio.md

📄 calculate-metadata.md

📄 can-decode.md

📄 charts.md

📄 compositions.md

📄 display-captions.md

📄 extract-frames.md

📄 fonts.md

📄 get-audio-duration.md

📄 get-video-dimensions.md

📄 get-video-duration.md

📄 gifs.md

📄 images.md

📄 import-srt-captions.md

📄 lottie.md

📄 measuring-dom-nodes.md

📄 measuring-text.md

📄 sequencing.md

📄 tailwind.md

📄 text-animations.md

📄 timing.md

📄 transcribe-captions.md

📄 transitions.md

📄 trimming.md

📄 videos.md

📄 SKILL.md