SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场remotion-best-practices

remotion-best-practices

编程与开发

查看项目

更新于 10-16 16:54

技能介绍

用途

remotion-best-practices 面向使用 Remotion（基于 React 的程序化视频框架）的开发者，提供经过整理的开发最佳实践，重点是希伯来语与 RTL（从右到左）内容的视频制作。Remotion 的标准模式默认产生左对齐文本、从左到右的打字机显现，以及对 RTL 内容渲染反向的字幕，该技能用于解决这些 RTL 布局、希伯来字体加载与双向文本（bidi）问题。

主要能力

技能内容以规则文件（rules/）形式组织，按需加载，覆盖以下主题：

  • 希伯来语与 RTL：rules/hebrew-rtl.md 涵盖希伯来语 Google Fonts（Heebo、Rubik、Assistant、Noto Sans Hebrew，子集为 ["hebrew", "latin"]）、RTL 文本方向（direction: "rtl"、textAlign: "right"）、双向文本处理（Unicode bidi 隔离符）、带 RTL 逐词高亮的希伯来语字幕、从右到左的希伯来语打字机效果、ElevenLabs Eleven v3 希伯来语配音、以色列地图坐标与希伯来语地图标签。
  • 动画与时序：animations.md、timing.md（插值曲线、缓动、弹簧动画）、sequencing.md、transitions.md、text-animations.md。
  • 3D 与视觉：3d.md（Three.js 与 React Three Fiber）、charts.md、light-leaks.md（@remotion/effects 的 lightLeak()）。
  • 音频：audio.md、audio-visualization.md、sfx.md、voiceover.md、get-audio-duration.md、silence-detection.md。
  • 视频与素材：videos.md、assets.md、images.md、gifs.md、lottie.md、transparent-videos.md、maps.md、tailwind.md、fonts.md、trimming.md、extract-frames.md。
  • 字幕：subtitles.md、display-captions.md、transcribe-captions.md、import-srt-captions.md。
  • 结构与参数：compositions.md、calculate-metadata.md、parameters.md（Zod schema）、measuring-dom-nodes.md、measuring-text.md。
  • 渲染：rendering.md（本地 npx remotion render 与 @remotion/lambda、@remotion/cloudrun 云端渲染）、ffmpeg.md、can-decode.md、get-video-dimensions.md、get-video-duration.md。

此外提供可直接使用的 TSX 组件示例：charts-bar-chart.tsx（动画柱状图）、text-animations-typewriter.tsx（打字机效果）、text-animations-word-highlight.tsx（逐词字幕高亮）。

使用方式

  • 新项目脚手架：npx create-video@latest --yes --blank --no-tailwind my-video
  • 启动预览：npx remotion studio
  • 单帧渲染检查（可选）：npx remotion still [composition-id] --scale=0.25 --frame=30
  • 处理希伯来语内容时加载 ./rules/hebrew-rtl.md；处理字幕时加载 ./rules/subtitles.md；涉及视频修剪或静音检测时使用 FFmpeg 并加载 ./rules/ffmpeg.md、./rules/silence-detection.md 等对应规则文件。

适用场景

  • 制作希伯来语或双语（希伯来语/英语）视频内容，包括竖屏社交短视频、带逐词高亮的字幕视频。
  • 由 JSON 数据集驱动的数据可视化解说视频（如动画柱状图）。
  • 需要 AI 配音、字幕转录、音频可视化、音效、转场、3D 内容的程序化视频项目。
  • 需要在本地或云端批量渲染视频的项目。

限制与注意事项

技能列出了若干已知陷阱与限制：

  • Remotion 中禁止使用 CSS 动画（transition-、animate-、@keyframes、Tailwind 动画类），所有运动必须由 useCurrentFrame() 驱动。
  • 希伯来语文本若无 direction: "rtl" 会渲染反向。
  • Whisper 转录希伯来语需同时使用多语言模型（如 medium 或 large-v3-turbo，不可用 medium.en）并显式传入 language: "he"，且要先转换为 16 位 16kHz WAV。
  • React Three Fiber 的 useFrame() 禁用，在 <ThreeCanvas> 内只能使用 Remotion 的 useCurrentFrame()。
  • 原生 <img> 和 <video> 元素会导致空白帧，应使用 remotion 的 <Img> 与 @remotion/media 的 <Video>。
  • RTL 会翻转 flex-start 与 flex-end。
  • 希伯来语显示标题应使用 fitText() 计算字号，而非固定尺寸。
  • 避免使用 em dash 与 en dash。
  • Math.random() 与 Date.now() 会破坏渲染，应使用带固定种子的 random()。
  • 许可：Remotion 对个人、非营利组织及员工不超过 3 人的营利组织免费；员工 4 人及以上的组织需购买 remotion.pro 的 Company License，该限制适用于使用 Remotion 本身（Studio、渲染、CI）。相关链接：https://www.remotion.dev/license
  • 性能调优：内存不足时降低 --concurrency，多核机器可提高；草稿渲染可用 --scale 小于 1；calculateMetadata 需保持轻量，因其在每次渲染前运行。
  • 需为 Remotion 5.0 的破坏性变更做规划（如 @remotion/light-leaks 与 @remotion/starburst 被 @remotion/effects 的 lightLeak() 和 starburst() 取代；loadFont() 将要求显式 weights 和 subsets 等）。

参考链接（资料中提供）

  • Remotion 文档：https://www.remotion.dev/docs
  • Remotion GitHub：https://github.com/remotion-dev/remotion
  • Remotion 许可：https://www.remotion.dev/license
  • 渲染 CLI：https://www.remotion.dev/docs/cli/render
  • @remotion/lambda：https://www.remotion.dev/docs/lambda
  • @remotion/google-fonts：https://www.remotion.dev/docs/google-fonts
  • @remotion/captions：https://www.remotion.dev/docs/captions
  • ElevenLabs 模型：https://elevenlabs.io/docs/overview/models
  • Google Fonts 希伯来语：https://fonts.google.com/?script=Hebr