remotion-best-practices

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Remotion Best Practices for Israeli Developers

面向以色列开发者的Remotion最佳实践

Problem

问题

Creating programmatic videos with Hebrew text in Remotion is broken by default. Standard Remotion patterns produce left-aligned text, left-to-right typewriter reveals, and captions that render backwards for RTL content. Israeli developers waste hours debugging RTL layout issues, loading Hebrew fonts incorrectly, and fighting bidirectional text bugs that standard Remotion docs do not address.
在Remotion中创建带有希伯来语文本的程序化视频时,默认设置存在缺陷。标准Remotion模式会生成左对齐文本、从左到右的打字机揭示效果,以及针对RTL内容反向显示的字幕。以色列开发者会浪费大量时间调试RTL布局问题、错误加载希伯来语字体,以及解决标准Remotion文档未提及的双向文本Bug。

Instructions

操作指南

When to use

适用场景

Use this skill whenever you are dealing with Remotion code to obtain domain-specific knowledge, especially when creating Hebrew or bilingual video content.
当你处理Remotion代码以获取领域特定知识时,尤其是创建希伯来语或双语视频内容时,请使用本技能。

New project setup

新项目搭建

When in an empty folder or workspace with no existing Remotion project, scaffold one using:
bash
npx create-video@latest --yes --blank --no-tailwind my-video
Replace
my-video
with a suitable project name.
在空文件夹或无现有Remotion项目的工作区中,使用以下命令搭建项目:
bash
npx create-video@latest --yes --blank --no-tailwind my-video
my-video
替换为合适的项目名称。

Starting preview

启动预览

Start the Remotion Studio to preview a video:
bash
npx remotion studio
启动Remotion Studio以预览视频:
bash
npx remotion studio

Optional: one-frame render check

可选:单帧渲染检查

You can render a single frame with the CLI to sanity-check layout, colors, or timing. Skip it for trivial edits, pure refactors, or when you already have enough confidence from Studio or prior renders.
bash
npx remotion still [composition-id] --scale=0.25 --frame=30
At 30 fps,
--frame=30
is the one-second mark (
--frame
is zero-based).
你可以通过CLI渲染单帧来快速检查布局、颜色或时间设置。对于简单编辑、纯重构或已通过Studio或之前的渲染获得足够信心的情况,可以跳过此步骤。
bash
npx remotion still [composition-id] --scale=0.25 --frame=30
在30 fps的帧率下,
--frame=30
对应第一秒的位置(
--frame
参数从0开始计数)。

Hebrew & RTL Video Production

希伯来语与RTL视频制作

For any Hebrew video content, load the ./rules/hebrew-rtl.md file. It covers:
  • Hebrew Google Fonts (Heebo, Rubik, Assistant, Noto Sans Hebrew) with
    subsets: ["hebrew"]
  • RTL text direction (
    direction: "rtl"
    ,
    textAlign: "right"
    )
  • Bidirectional text handling (Unicode bidi isolates for mixed Hebrew/English)
  • Hebrew captions with RTL word highlighting
  • Hebrew typewriter effects (right-to-left character reveal)
  • Hebrew voiceover with ElevenLabs multilingual v2
  • Israeli map coordinates and Hebrew map labels
对于任何希伯来语视频内容,请加载./rules/hebrew-rtl.md文件。该文件涵盖:
  • 带有
    subsets: ["hebrew"]
    参数的希伯来语Google Fonts(Heebo、Rubik、Assistant、Noto Sans Hebrew)
  • RTL文本方向设置(
    direction: "rtl"
    textAlign: "right"
  • 双向文本处理(混合希伯来语/英语内容的Unicode双向隔离符)
  • 带RTL单词高亮的希伯来语字幕
  • 希伯来语打字机效果(从右到左的字符揭示)
  • 使用ElevenLabs多语言v2模型生成希伯来语旁白
  • 以色列地图坐标与希伯来语地图标签

Captions

字幕

When dealing with captions or subtitles, load the ./rules/subtitles.md file for more information.
处理字幕或副标题时,请加载./rules/subtitles.md文件获取更多信息。

Using FFmpeg

使用FFmpeg

For some video operations, such as trimming videos or detecting silence, FFmpeg should be used. Load the ./rules/ffmpeg.md file for more information.
对于某些视频操作,如修剪视频或检测静音片段,应使用FFmpeg。请加载./rules/ffmpeg.md文件获取更多信息。

Silence detection

静音检测

When needing to detect and trim silent segments from video or audio files, load the ./rules/silence-detection.md file.
需要检测并修剪视频或音频文件中的静音片段时,请加载./rules/silence-detection.md文件。

Audio visualization

音频可视化

When needing to visualize audio (spectrum bars, waveforms, bass-reactive effects), load the ./rules/audio-visualization.md file for more information.
需要实现音频可视化(频谱条、波形、低音响应效果)时,请加载./rules/audio-visualization.md文件获取更多信息。

Sound effects

音效

When needing to use sound effects, load the ./rules/sfx.md file for more information.
需要使用音效时,请加载./rules/sfx.md文件获取更多信息。

Rendering and cloud render

渲染与云端渲染

Studio is for previewing only. To produce a final video file, render it. Load the ./rules/rendering.md file for the
npx remotion render
CLI, key flags (
--concurrency
,
--scale
,
--codec
), and cloud rendering with
@remotion/lambda
and
@remotion/cloudrun
.
Studio仅用于预览。要生成最终视频文件,请进行渲染。加载./rules/rendering.md文件了解
npx remotion render
命令、关键参数(
--concurrency
--scale
--codec
)以及使用
@remotion/lambda
@remotion/cloudrun
进行云端渲染的方法。

Rule files

规则文件

Read individual rule files for detailed explanations and code examples:
  • rules/hebrew-rtl.md - Hebrew RTL text, fonts, captions, bidi, and Israeli maps
  • rules/3d.md - 3D content in Remotion using Three.js and React Three Fiber
  • rules/animations.md - Fundamental animation skills for Remotion
  • rules/assets.md - Importing images, videos, audio, and fonts into Remotion
  • rules/audio.md - Using audio and sound in Remotion
  • rules/calculate-metadata.md - Dynamically set composition duration, dimensions, and props
  • rules/can-decode.md - Check if a video can be decoded by the browser
  • rules/charts.md - Chart and data visualization patterns for Remotion
  • rules/compositions.md - Defining compositions, stills, folders, default props
  • rules/display-captions.md - TikTok-style captions with word highlighting
  • rules/extract-frames.md - Extract frames from videos at specific timestamps
  • rules/fonts.md - Loading Google Fonts and local fonts in Remotion
  • rules/get-audio-duration.md - Getting audio duration with Mediabunny
  • rules/get-video-dimensions.md - Getting video width and height
  • rules/get-video-duration.md - Getting video duration in seconds
  • rules/gifs.md - Displaying GIFs synchronized with Remotion timeline
  • rules/images.md - Embedding images using the Img component
  • rules/import-srt-captions.md - Importing .srt subtitle files
  • rules/light-leaks.md - Light leak overlay effects
  • rules/lottie.md - Embedding Lottie animations
  • rules/maps.md - Map animations with Mapbox
  • rules/measuring-dom-nodes.md - Measuring DOM element dimensions
  • rules/measuring-text.md - Measuring text dimensions and fitting text
  • rules/parameters.md - Make a video parametrizable with Zod schema
  • rules/sequencing.md - Sequencing patterns for timing and delay
  • rules/silence-detection.md - Adaptive silence detection with FFmpeg
  • rules/tailwind.md - Using TailwindCSS in Remotion
  • rules/text-animations.md - Typography and text animation patterns
  • rules/timing.md - Interpolation curves, easing, and spring animations
  • rules/transcribe-captions.md - Transcribing audio to generate captions
  • rules/transitions.md - Scene transition patterns
  • rules/transparent-videos.md - Rendering video with transparency
  • rules/trimming.md - Trimming patterns for animations
  • rules/videos.md - Embedding videos with trimming, volume, speed
  • rules/rendering.md - Rendering videos locally and in the cloud (Lambda, Cloud Run)
  • rules/voiceover.md - AI-generated voiceover with ElevenLabs TTS
阅读单个规则文件获取详细说明和代码示例:
  • rules/hebrew-rtl.md - 希伯来语RTL文本、字体、字幕、双向文本及以色列地图
  • rules/3d.md - 使用Three.js和React Three Fiber在Remotion中创建3D内容
  • rules/animations.md - Remotion基础动画技巧
  • rules/assets.md - 在Remotion中导入图片、视频、音频和字体
  • rules/audio.md - 在Remotion中使用音频和声音
  • rules/calculate-metadata.md - 动态设置合成时长、尺寸和属性
  • rules/can-decode.md - 检查浏览器是否可解码视频
  • rules/charts.md - Remotion中的图表与数据可视化模式
  • rules/compositions.md - 定义合成、静态帧、文件夹和默认属性
  • rules/display-captions.md - 带单词高亮的TikTok风格字幕
  • rules/extract-frames.md - 在特定时间戳提取视频帧
  • rules/fonts.md - 在Remotion中加载Google Fonts和本地字体
  • rules/get-audio-duration.md - 使用Mediabunny获取音频时长
  • rules/get-video-dimensions.md - 获取视频宽高
  • rules/get-video-duration.md - 获取视频时长(秒)
  • rules/gifs.md - 显示与Remotion时间轴同步的GIF
  • rules/images.md - 使用Img组件嵌入图片
  • rules/import-srt-captions.md - 导入.srt字幕文件
  • rules/light-leaks.md - 漏光叠加效果
  • rules/lottie.md - 嵌入Lottie动画
  • rules/maps.md - 使用Mapbox制作地图动画
  • rules/measuring-dom-nodes.md - 测量DOM元素尺寸
  • rules/measuring-text.md - 测量文本尺寸并适配文本
  • rules/parameters.md - 使用Zod schema使视频可参数化
  • rules/sequencing.md - 时间与延迟的序列编排模式
  • rules/silence-detection.md - 使用FFmpeg进行自适应静音检测
  • rules/tailwind.md - 在Remotion中使用TailwindCSS
  • rules/text-animations.md - 排版与文字动画模式
  • rules/timing.md - 插值曲线、缓动和弹簧动画
  • rules/transcribe-captions.md - 转录音频生成字幕
  • rules/transitions.md - 场景转场模式
  • rules/transparent-videos.md - 渲染带透明度的视频
  • rules/trimming.md - 动画修剪模式
  • rules/videos.md - 嵌入带修剪、音量和速度控制的视频
  • rules/rendering.md - 本地与云端(Lambda、Cloud Run)视频渲染
  • rules/voiceover.md - 使用ElevenLabs TTS生成AI旁白

Examples

示例

Example 1: Hebrew TikTok caption video

示例1:希伯来语TikTok字幕视频

User wants a vertical (1080x1920) social clip with a Hebrew voiceover and word-highlighted captions.
  1. Scaffold a project:
    npx create-video@latest --yes --blank --no-tailwind my-video
    .
  2. Generate the Hebrew voiceover (load
    rules/voiceover.md
    , ElevenLabs multilingual v2).
  3. Transcribe the voiceover to captions (load
    rules/transcribe-captions.md
    , use the
    medium
    multilingual Whisper model, never
    medium.en
    ).
  4. Render TikTok-style word-highlighted captions (load
    rules/display-captions.md
    and
    rules/hebrew-rtl.md
    ): set
    direction: "rtl"
    ,
    textAlign: "right"
    , and wrap any embedded Latin digits with
    ⁦...⁩
    bidi isolates.
  5. Size the composition 1080x1920, drop the Hebrew display font two steps below the English size you would use (Gotcha #7).
  6. Preview in
    npx remotion studio
    , then render with
    npx remotion render
    (load
    rules/rendering.md
    ).
用户需要一个竖屏(1080x1920)的社交短视频,包含希伯来语旁白和单词高亮字幕。
  1. 搭建项目:
    npx create-video@latest --yes --blank --no-tailwind my-video
  2. 生成希伯来语旁白(加载
    rules/voiceover.md
    ,使用ElevenLabs多语言v2模型)。
  3. 转录旁白生成字幕(加载
    rules/transcribe-captions.md
    ,使用
    medium
    多语言Whisper模型,切勿使用
    medium.en
    )。
  4. 渲染TikTok风格的单词高亮字幕(加载
    rules/display-captions.md
    rules/hebrew-rtl.md
    ):设置
    direction: "rtl"
    textAlign: "right"
    ,并使用
    ⁦...⁩
    双向隔离符包裹嵌入的拉丁数字。
  5. 将合成尺寸设置为1080x1920,希伯来语显示字体的大小比你使用的英语字体小两个层级(注意事项#7)。
  6. npx remotion studio
    中预览,然后使用
    npx remotion render
    进行渲染(加载
    rules/rendering.md
    )。

Example 2: Data-driven chart video

示例2:数据驱动的图表视频

User wants a 16:9 explainer where a bar chart animates from a JSON dataset.
  1. Make the composition parametrizable with a Zod schema (load
    rules/parameters.md
    ) so the dataset is a typed prop.
  2. Compute duration and dimensions from the dataset in
    calculateMetadata
    (load
    rules/calculate-metadata.md
    ); keep it lazy so it does not slow every render.
  3. Build the animated bar chart driven by
    useCurrentFrame()
    and interpolation/spring curves (load
    rules/charts.md
    and
    rules/timing.md
    ). Never use CSS animations (Gotcha #1).
  4. For Hebrew axis labels and titles, apply RTL direction and bidi isolates around numbers (load
    rules/hebrew-rtl.md
    ).
  5. Render to MP4 with
    npx remotion render
    , or batch-render many datasets in the cloud with
    @remotion/lambda
    (load
    rules/rendering.md
    ).
用户需要一个16:9的解说视频,其中柱状图从JSON数据集动画生成。
  1. 使用Zod schema使合成可参数化(加载
    rules/parameters.md
    ),让数据集成为类型化属性。
  2. calculateMetadata
    中根据数据集计算时长和尺寸(加载
    rules/calculate-metadata.md
    );保持延迟加载以避免减慢每次渲染。
  3. 基于
    useCurrentFrame()
    和插值/弹簧曲线构建动画柱状图(加载
    rules/charts.md
    rules/timing.md
    )。切勿使用CSS动画(注意事项#1)。
  4. 对于希伯来语坐标轴标签和标题,应用RTL方向并在数字周围使用双向隔离符(加载
    rules/hebrew-rtl.md
    )。
  5. 使用
    npx remotion render
    渲染为MP4,或使用
    @remotion/lambda
    在云端批量渲染多个数据集(加载
    rules/rendering.md
    )。

Bundled Resources

捆绑资源

Rule files (
rules/
)

规则文件(
rules/

The
rules/
folder contains focused topic files loaded on demand. Highlights:
hebrew-rtl.md
(Hebrew fonts, RTL, bidi, Israeli maps),
animations.md
,
timing.md
,
sequencing.md
,
transitions.md
,
compositions.md
,
calculate-metadata.md
,
parameters.md
,
charts.md
,
text-animations.md
,
3d.md
, audio rules (
audio.md
,
audio-visualization.md
,
sfx.md
,
voiceover.md
,
get-audio-duration.md
,
silence-detection.md
), video rules (
videos.md
,
assets.md
,
images.md
,
gifs.md
,
lottie.md
,
transparent-videos.md
,
light-leaks.md
,
maps.md
,
tailwind.md
,
fonts.md
), caption rules (
subtitles.md
,
display-captions.md
,
transcribe-captions.md
,
import-srt-captions.md
), measurement/decode helpers (
measuring-dom-nodes.md
,
measuring-text.md
,
can-decode.md
,
extract-frames.md
,
get-video-dimensions.md
,
get-video-duration.md
,
trimming.md
),
ffmpeg.md
, and
rendering.md
. See the full list under "Rule files" above.
rules/
文件夹包含按需加载的主题聚焦文件。重点文件包括:
hebrew-rtl.md
(希伯来语字体、RTL、双向文本、以色列地图)、
animations.md
timing.md
sequencing.md
transitions.md
compositions.md
calculate-metadata.md
parameters.md
charts.md
text-animations.md
3d.md
,音频相关规则(
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
light-leaks.md
maps.md
tailwind.md
fonts.md
),字幕相关规则(
subtitles.md
display-captions.md
transcribe-captions.md
import-srt-captions.md
),测量/解码辅助工具(
measuring-dom-nodes.md
measuring-text.md
can-decode.md
extract-frames.md
get-video-dimensions.md
get-video-duration.md
trimming.md
),
ffmpeg.md
rendering.md
。完整列表见上方"规则文件"部分。

Assets (
rules/assets/
)

资源(
rules/assets/

Ready-to-use TSX component examples referenced by the rule files:
charts-bar-chart.tsx
(animated bar chart),
text-animations-typewriter.tsx
(typewriter effect), and
text-animations-word-highlight.tsx
(word-by-word caption highlighting).
包含规则文件引用的即用型TSX组件示例:
charts-bar-chart.tsx
(动画柱状图)、
text-animations-typewriter.tsx
(打字机效果)和
text-animations-word-highlight.tsx
(逐词字幕高亮)。

Gotchas

注意事项

  1. CSS animations are forbidden in Remotion. Never use
    transition-*
    ,
    animate-*
    ,
    @keyframes
    , or Tailwind animation classes. All motion must be driven by
    useCurrentFrame()
    . CSS animations will not render correctly during video export.
  2. Hebrew text without
    direction: "rtl"
    renders backwards.
    Punctuation, numbers, and parentheses will appear on the wrong side. Every Hebrew text container must explicitly set RTL direction.
  3. Whisper
    medium.en
    model does not support Hebrew.
    Use
    medium
    (the multilingual model) for Hebrew transcription. Using
    medium.en
    produces garbage output for Hebrew audio.
  4. useFrame()
    from React Three Fiber is forbidden.
    Inside
    <ThreeCanvas>
    , only
    useCurrentFrame()
    from Remotion is allowed. Using
    useFrame()
    causes flickering during rendering because it animates outside Remotion's frame-based timeline.
  5. Native
    <img>
    and
    <video>
    elements cause blank frames.
    Always use
    <Img>
    from
    remotion
    and
    <Video>
    from
    @remotion/media
    . These components ensure assets are fully loaded before rendering.
  6. RTL flips
    flex-start
    and
    flex-end
    .
    In an RTL flex container,
    flex-start
    = RIGHT and
    flex-end
    = LEFT. To right-align icon+text rows in Hebrew, use
    justifyContent: "flex-start"
    (not
    flex-end
    ). The RTL direction already reverses DOM order, so the first child (icon) renders on the right. Do not use
    flexDirection: "row-reverse"
    in RTL containers -- it double-reverses back to LTR order.
  7. Hebrew text wraps to a second line at the same font size English fits on one line. Hebrew fonts (Heebo, Rubik, Assistant) at display weights render 20-30% wider than English at the same size. If an English title works at
    fontSize: 72
    , the Hebrew equivalent needs
    54-60
    . Also set
    flexWrap: "nowrap"
    and
    whiteSpace: "nowrap"
    on any flex row containing display-size Hebrew words to prevent unwanted line breaks mid-phrase.
  8. Hebrew captions must sound Israeli, not translated. Avoid corporate-sounding phrases like "תמיכה מלאה", passive-participle text descriptions, and literal translations of English idioms. Israeli dev slang: "עולים" (load), "נופלת" (falls), "אפקט הקלדה" (not "מכונת כתיבה"). Use "אפשר" not "ניתן", use active voice, and sprinkle natural connectors like "סוף סוף", "כמו שצריך", "באמת".
  9. Never use em dashes or en dashes. Replace em/en dash characters with commas, colons, parentheses, or double hyphens (
    --
    ). They are not on standard keyboards, don't render reliably across platforms, and make text feel machine-generated. This applies to both English and Hebrew content in SKILL.md, video captions, and UI copy.
  10. Remotion is not unconditionally free. It is free for individuals, non-profits, and for-profit organizations with 3 or fewer employees. Organizations of 4 or more employees must buy a paid Company License from remotion.pro. This applies to using Remotion at all (Studio, rendering, CI), not just to a specific feature. Check https://www.remotion.dev/docs/license and the bundled
    LICENSE
    file before shipping a commercial project.
  11. Tune render performance, do not just accept defaults. Lower
    --concurrency
    if a render runs out of memory; raise it on many-core machines for faster renders. Use
    --scale
    below 1 for fast draft renders and above 1 for high-resolution masters. Prefer
    <OffthreadVideo>
    over
    <Video>
    for embedded video during rendering (it extracts frames deterministically off the main thread). Keep
    calculateMetadata
    cheap and lazy since it runs before every render. See
    rules/rendering.md
    .
  1. Remotion中禁止使用CSS动画。切勿使用
    transition-*
    animate-*
    @keyframes
    或Tailwind动画类。所有动效必须由
    useCurrentFrame()
    驱动。CSS动画在视频导出时无法正确渲染。
  2. 未设置
    direction: "rtl"
    的希伯来语文本会反向显示
    。标点符号、数字和括号会出现在错误的一侧。每个希伯来语文本容器必须显式设置RTL方向。
  3. Whisper的
    medium.en
    模型不支持希伯来语
    。希伯来语转录请使用
    medium
    (多语言模型)。使用
    medium.en
    会为希伯来语音频生成无效输出。
  4. 禁止使用React Three Fiber的
    useFrame()
    。在
    <ThreeCanvas>
    内,仅允许使用Remotion的
    useCurrentFrame()
    。使用
    useFrame()
    会导致渲染时出现闪烁,因为它在Remotion的基于帧的时间轴之外进行动画。
  5. 原生
    <img>
    <video>
    元素会导致空白帧
    。请始终使用
    remotion
    提供的
    <Img>
    @remotion/media
    提供的
    <Video>
    。这些组件确保资源在渲染前完全加载。
  6. RTL会反转
    flex-start
    flex-end
    。在RTL弹性容器中,
    flex-start
    =右侧,
    flex-end
    =左侧。要在希伯来语中右对齐图标+文本行,请使用
    justifyContent: "flex-start"
    (而非
    flex-end
    )。RTL方向已反转DOM顺序,因此第一个子元素(图标)会渲染在右侧。切勿在RTL容器中使用
    flexDirection: "row-reverse"
    ——这会再次反转回LTR顺序。
  7. 相同字号下,希伯来语文本换行时英语文本仍能显示在一行。希伯来语字体(Heebo、Rubik、Assistant)在显示字重下的渲染宽度比相同字号的英语宽20-30%。如果英语标题使用
    fontSize: 72
    合适,希伯来语等效标题需要设置为
    54-60
    。此外,对包含大字号希伯来语单词的弹性行设置
    flexWrap: "nowrap"
    whiteSpace: "nowrap"
    ,以防止短语中途意外换行。
  8. 希伯来语字幕必须符合以色列语习惯,而非直译。避免使用"תמיכה מלאה"这类企业化表述、被动分词文本描述以及英语习语的直译。以色列开发者俚语:"עולים"(加载)、"נופלת"(崩溃)、"אפקט הקלדה"(而非"מכונת כתיבה")。使用"אפשר"而非"ניתן",使用主动语态,并添加"סוף סוף"、"כמו שצריך"、"באמת"等自然连接词。
  9. 切勿使用长破折号或短破折号。将长/短破折号替换为逗号、冒号、括号或双连字符(
    --
    )。它们不在标准键盘上,跨平台渲染不可靠,且会让文本看起来像机器生成的。此规则适用于SKILL.md中的英语和希伯来语内容、视频字幕以及UI文案。
  10. Remotion并非无条件免费。个人、非营利组织以及员工人数≤3人的营利性组织可免费使用。员工人数≥4人的组织必须从remotion.pro购买付费企业许可证。此规则适用于所有Remotion使用场景(Studio、渲染、CI),而非特定功能。在发布商业项目前,请查看https://www.remotion.dev/docs/license和捆绑的`LICENSE`文件。
  11. 优化渲染性能,不要只接受默认设置。如果渲染内存不足,请降低
    --concurrency
    ;在多核机器上提高该参数以加快渲染速度。使用小于1的
    --scale
    进行快速草稿渲染,大于1的
    --scale
    用于高分辨率母版渲染。渲染时优先使用
    <OffthreadVideo>
    而非
    <Video>
    嵌入视频(它会在主线程外确定性地提取帧)。保持
    calculateMetadata
    轻量且延迟加载,因为它会在每次渲染前运行。详情见
    rules/rendering.md

Reference Links

参考链接

SourceURLWhat to Check
Remotion Docshttps://www.remotion.dev/docsAPI reference, latest version changes
Remotion GitHubhttps://github.com/remotion-dev/remotionSource code, issues, releases
Remotion Licensehttps://www.remotion.dev/docs/licenseFree vs paid Company License, 4+ employee threshold
Remotion Render / CLIhttps://www.remotion.dev/docs/cli/render
npx remotion render
flags: concurrency, scale, codec
@remotion/lambdahttps://www.remotion.dev/docs/lambdaCloud rendering on AWS Lambda at scale
@remotion/google-fontshttps://www.remotion.dev/docs/google-fontsAvailable Google Fonts with Hebrew subset support
@remotion/captionshttps://www.remotion.dev/docs/captionsCaption types, TikTok-style captions API
ElevenLabs TTShttps://elevenlabs.io/docsMultilingual v2 model, Hebrew voice support
Google Fonts Hebrewhttps://fonts.google.com/?subset=hebrewBrowse Hebrew-supporting fonts
来源URL查看内容
Remotion文档https://www.remotion.dev/docsAPI参考、最新版本变更
Remotion GitHubhttps://github.com/remotion-dev/remotion源代码、问题、版本发布
Remotion许可证https://www.remotion.dev/docs/license免费vs付费企业许可证、4+员工阈值
Remotion渲染/CLIhttps://www.remotion.dev/docs/cli/render
npx remotion render
参数:concurrency、scale、codec
@remotion/lambdahttps://www.remotion.dev/docs/lambda在AWS Lambda上大规模云端渲染
@remotion/google-fontshttps://www.remotion.dev/docs/google-fonts支持希伯来语子集的可用Google Fonts
@remotion/captionshttps://www.remotion.dev/docs/captions字幕类型、TikTok风格字幕API
ElevenLabs TTShttps://elevenlabs.io/docs多语言v2模型、希伯来语语音支持
Google Fonts希伯来语https://fonts.google.com/?subset=hebrew浏览支持希伯来语的字体

Troubleshooting

故障排除

Hebrew text appears left-aligned

希伯来语文本左对齐

Add
direction: "rtl"
and
textAlign: "right"
to the text container style. For full-frame layouts, set
direction: "rtl"
on the
<AbsoluteFill>
.
为文本容器样式添加
direction: "rtl"
textAlign: "right"
。对于全屏布局,在
<AbsoluteFill>
上设置
direction: "rtl"

Captions show words in wrong order

字幕单词顺序错误

The caption container needs
direction: "rtl"
and
whiteSpace: "pre"
. Without RTL direction, token rendering order is LTR.
字幕容器需要设置
direction: "rtl"
whiteSpace: "pre"
。没有RTL方向时,令牌渲染顺序为LTR。

Hebrew font not rendering (shows squares or fallback)

希伯来语字体未渲染(显示方块或 fallback 字体)

Ensure you loaded the font with
subsets: ["hebrew"]
and called
waitUntilDone()
before rendering. Without the subset, the Hebrew glyphs are not downloaded.
确保加载字体时设置了
subsets: ["hebrew"]
,并在渲染前调用
waitUntilDone()
。没有子集的话,希伯来语字形不会被下载。

Numbers appear on wrong side of Hebrew text

数字出现在希伯来语文本的错误一侧

Use Unicode bidi isolates: wrap numbers with
\u2066...\u2069
(LTR isolate) when embedded in Hebrew text.
使用Unicode双向隔离符:在希伯来语文本中嵌入数字时,用
\u2066...\u2069
(LTR隔离符)包裹数字。

Whisper produces gibberish for Hebrew audio

Whisper为希伯来语音频生成无效内容

Switch from
medium.en
to
medium
model. The
.en
suffix means English-only.
medium.en
切换为
medium
模型。
.en
后缀表示仅支持英语。

Icons appear on the wrong side in flex rows

图标在弹性行中出现在错误一侧

In an RTL container,
justifyContent: "flex-start"
aligns to the RIGHT, not left. Do not use
flexDirection: "row-reverse"
-- it double-reverses the order. Just put the icon as the first child in the DOM.
在RTL容器中,
justifyContent: "flex-start"
会向右对齐,而非向左。请勿使用
flexDirection: "row-reverse"
——这会再次反转顺序。只需将图标放在DOM的第一个子元素位置即可。