remotion-best-practices

📁 buainoai/remotion-skills 📅 9 days ago
3
总安装量
3
周安装量
#61983
全站排名
安装命令
npx skills add https://github.com/buainoai/remotion-skills --skill remotion-best-practices

Agent 安装分布

opencode 3
gemini-cli 3
github-copilot 3
codex 3
cursor 3
claude-code 2

Skill 文档

何时使用

当您处理 Remotion 代码时,请使用此技能来获取特定领域的知识和最佳实践。

如何使用

阅读各个规则文件以获取详细说明和代码示例:

核心概念

  • rules/animations.md – Remotion 的基础动画技巧
  • rules/compositions.md – 定义组合、静态图像、文件夹、默认属性和动态元数据
  • rules/timing.md – Remotion 中的插值曲线 – 线性、缓动、弹簧动画
  • rules/sequencing.md – Remotion 的序列模式 – 延迟、修剪、限制项目持续时间

媒体处理

  • rules/images.md – 使用 Img 组件在 Remotion 中嵌入图像
  • rules/videos.md – 在 Remotion 中嵌入视频 – 修剪、音量、速度、循环、音调
  • rules/audio.md – 在 Remotion 中使用音频和声音 – 导入、修剪、音量、速度、音调
  • rules/gifs.md – 显示与 Remotion 时间轴同步的 GIF
  • rules/assets.md – 将图像、视频、音频和字体导入 Remotion

高级功能

  • rules/3d.md – 使用 Three.js 和 React Three Fiber 在 Remotion 中创建 3D 内容
  • rules/display-captions.md – 在 Remotion 中显示字幕,支持 TikTok 风格的分页和单词高亮
  • rules/import-srt-captions.md – 使用 @remotion/captions 将 .srt 字幕文件导入 Remotion
  • rules/transcribe-captions.md – 转录音频以在 Remotion 中生成字幕
  • rules/lottie.md – 在 Remotion 中嵌入 Lottie 动画
  • rules/charts.md – Remotion 的图表和数据可视化模式
  • rules/maps.md – 使用 Mapbox 添加地图并进行动画处理

文本和排版

  • rules/fonts.md – 在 Remotion 中加载 Google 字体和本地字体
  • rules/text-animations.md – Remotion 的排版和文本动画模式
  • rules/measuring-text.md – 测量文本尺寸、使文本适应容器以及检查溢出
  • rules/measuring-dom-nodes.md – 在 Remotion 中测量 DOM 元素尺寸

视频处理工具

  • rules/extract-frames.md – 使用 Mediabunny 在特定时间戳从视频中提取帧
  • rules/get-video-duration.md – 使用 Mediabunny 获取视频文件的时长(秒)
  • rules/get-video-dimensions.md – 使用 Mediabunny 获取视频文件的宽度和高度
  • rules/get-audio-duration.md – 使用 Mediabunny 获取音频文件的时长(秒)
  • rules/can-decode.md – 使用 Mediabunny 检查浏览器是否可以解码视频

配置和优化

重要提示

  • 所有动画必须由 useCurrentFrame() 钩子驱动
  • 禁止使用 CSS 过渡或动画 – 它们无法正确渲染
  • 禁止使用 Tailwind 动画类名 – 它们无法正确渲染
  • 使用秒为单位编写动画,并乘以 useVideoConfig() 中的 fps 值