OpenMontage 的 Remotion 工具箱扩展共享组件、自定义转场与帧驱动视频工程规范【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage本文围绕 OpenMontage 仓库中面向 Agent 的 Remotion 技能文档 .claude/skills/remotion/SKILL.md 展开完整解读其在官方 Remotion 能力之上封装的工具箱级约定可复用共享组件、超越remotion/transitions的自定义转场库、8 条渲染期最佳实践与按场景类型划分的时间轴规范。读者读完后可以在本项目 remotion-composer 中直接使用这些组件与转场写出帧率无关、渲染稳定、节奏统一的可编程视频合成。该技能文档定位为“工具箱扩展”Toolkit Extensions官方 Remotion 框架知识hooks、动画、渲染等统一沉淀在.claude/skills/remotion-official/由官方 remotion-dev/skills 仓库同步而本文讨论的这份文件只覆盖本项目特有的模式——共享组件、自定义转场、工程约定与时间规划。换句话说前者回答“Remotion 怎么用”后者回答“在这个项目里 Remotion 应该怎么写”。共享组件开箱即用的可复用视频组件技能文档规定可复用的视频组件统一放在lib/components/下模板中通过相对导入引用import { AnimatedBackground, SlideTransition, Label } from ../../../../lib/components;组件用途AnimatedBackground浮动形状背景变体subtle、tech、warm、darkSlideTransition场景转场fade、zoom、slide-up、blur-fadeLabel浮动标签徽章可选携带 JIRA 引用Vignette电影感边缘压暗遮罩LogoWatermark角落 Logo 品牌水印SplitScreen并排视频对比NarratorPiP画中画主讲人叠加层Envelope带开合翻盖动画的 3D 信封PointingHand滑动进入并带脉冲效果的动画手形 emojiMazeDecoration角落装饰用的等距网格动画在 OpenMontage 当前仓库中这套组件模式的落地实现位于 remotion-composer/src/components/index.ts统一导出 16 个场景组件TextCard、StatCard、ProgressBar、CalloutBox、ComparisonCard、BarChart/LineChart/PieChart/KPIGrid、CaptionOverlay、SectionTitle、StatReveal、HeroTitle、ParticleOverlay、AnimeScene、TerminalScene、ScreenshotScene、ProviderChip并附带ParticleType、CameraMotion、TerminalStep、ScreenshotStep等类型。例如Vignette在 Explainer.tsx 中以径向渐变实现边缘压暗直接叠加在图片/视频场景之上AnimatedBackground在 Explainer.tsx 中实现为主题驱动的渐变网格 浮动光球背景。组件导入路径以实际项目结构为准本仓库统一从src/components入口导入例如import { TextCard } from ./components/TextCard;见 Explainer.tsx新增组件时同步更新src/components/index.ts即可被全项目发现。自定义转场超越官方 transitions 包的场景过渡库技能文档强调工具箱在官方remotion/transitions包之外维护了一套位于lib/transitions/的自定义转场库用于场景间的特效过渡。使用 TransitionSeries 编排转场import { TransitionSeries, linearTiming } from remotion/transitions; // Import custom transitions from lib (adjust path based on your project location) import { glitch, lightLeak, clockWipe, checkerboard } from ../../../../lib/transitions; // Or import from remotion/transitions for official ones import { slide, fade } from remotion/transitions/slide; TransitionSeries TransitionSeries.Sequence durationInFrames{90} TitleSlide / /TransitionSeries.Sequence TransitionSeries.Transition presentation{glitch({ intensity: 0.8 })} timing{linearTiming({ durationInFrames: 30 })} / TransitionSeries.Sequence durationInFrames{120} ContentSlide / /TransitionSeries.Sequence /TransitionSeries可用自定义转场一览转场可选参数最适合glitch()intensity、slices、rgbShift科技演示、硬核揭示、赛博朋克rgbSplit()direction、displacement现代科技感、活力转场zoomBlur()direction、blurAmountCTA、高能时刻、冲击感lightLeak()temperature、direction庆典、胶片美学、温暖时刻clockWipe()startAngle、direction、segments时间相关内容、俏皮揭示pixelate()maxBlockSize、gridSize、scanlines、glitchArtifacts、randomness复古/游戏风、数字变换checkerboard()gridSize、pattern、stagger、squareAnimation俏皮揭示、结构化转场Checkerboard 可用图案patternsequential、random、diagonal、alternating、spiral、rows、columns、center-out、corners-in转场参数示例// Tech/cyberpunk feel glitch({ intensity: 0.8, slices: 8, rgbShift: true }) // Warm celebration lightLeak({ temperature: warm, direction: right }) // High energy zoom zoomBlur({ direction: in, blurAmount: 20 }) // Chromatic aberration rgbSplit({ direction: diagonal, displacement: 30 }) // Clock sweep reveal clockWipe({ direction: clockwise, startAngle: 0 }) // Retro pixelation pixelate({ maxBlockSize: 50, glitchArtifacts: true }) // Checkerboard patterns checkerboard({ pattern: diagonal, gridSize: 8 }) checkerboard({ pattern: spiral, gridSize: 10 }) checkerboard({ pattern: center-out, squareAnimation: scale })转场时长建议类型帧数说明Quick cut快切15-20快、有冲击力Standard标准30-45最常用Dramatic戏剧化50-60缓慢揭示Glitch effects故障效果20-30应给人突然感Light leak漏光45-60需要时间扫过画面预览全部转场cd showcase/transitions npm run studio在 OpenMontage 中remotion/transitions已作为正式依赖声明在 remotion-composer/package.json版本与 remotion 核心一致^4.0.484并支持npx remotion upgrade统一升级。除了 TransitionSeries 式的“两段之间插入转场”编排本项目还在场景内部实现了另一种转场通道每个Cut支持transition_in、transition_out与transition_duration字段Explainer.tsx 中的VideoScene会根据这些字段在场景开头/结尾计算淡入淡出帧区间当取值为cut/none时走硬切否则按transitionDuration默认 8 帧做插值渐变。工具箱最佳实践8 条渲染期铁律技能文档给出了本工具箱开发 Remotion 合成时必须遵守的 8 条最佳实践这些规则在 remotion-composer 的源码中均有直接印证只用帧驱动动画Frame-based animations only——避免使用 CSS transitions/animations否则渲染时会产生闪烁。Explainer.tsx 中所有动效光球位移、渐变角度、Ken Burns 缩放、淡入淡出全部由useCurrentFrame()interpolate/spring计算并显式声明willChange: transform, opacity配合浏览器合成。从useVideoConfig()取 fps——让动画与帧率无关。例如ImageScene中const { fps, durationInFrames } useVideoConfig()所有以秒为单位的时长都通过* fps换算成帧。钳制插值Clamp interpolations——使用extrapolateRight: clamp防止数值越界失控。仓库中几乎每一次interpolate调用都同时声明extrapolateLeft: clamp与extrapolateRight: clamp例如图片淡出区间interpolate(frame, [fadeOutStart, durationInFrames], [1, 0.3], {...})。优先使用OffthreadVideo——复杂合成中性能优于Video。Explainer.tsx 的VideoScene与 CinematicRenderer.tsx 的场景视频全部使用OffthreadVideo并配合muted、trimBefore/trimAfter、playbackRate等属性。异步用delayRender阻塞渲染——始终等待数据就绪再渲染。完整用法见 reference.mddelayRender返回句柄数据就绪后continueRender(handle)解除阻塞出错时cancelRender异步场景如calculateMetadata中 fetch 数据是渲染期数据依赖的标准解法。staticFile引用资源——正确引用public/目录下的文件。仓库中的 resolveAsset.ts 做了统一封装远程 URLhttp/https/data:直接透传绝对路径转成file://其余相对路径走staticFile(clean)指向public/。所有项目统一 30fps——换算公式帧数 秒数 × 30。这一点在 Root.tsx 中体现得极为彻底Explainer、CinematicRenderer、TalkingHead、TitledVideo、HeroTitle、ProductReveal、CollageBurst、LyricOverlay、EndTag等全部 Composition 一律fps{30}而EndTag的 5.5 秒正好注册为 165 帧EndTagOverlay的 8.19 秒为 246 帧都严格遵循 30fps 换算。playbackRate必须恒定——需要变速/极端速度时先用 FFmpeg 预处理素材而不是在 Remotion 里动态变速。相关经验可参考 skills/core/ffmpeg.md。项目时间规划约定技能文档同时给出了按场景类型划分的时长约定配音以约150 词/分钟的语速驱动整体节奏场景类型时长说明Title标题3-5s90-150fLogo 主标题Overview概览10-20s3-5 个要点Demo演示10-30s用 playbackRate 调整以匹配Stats数据8-12s3-4 张统计卡Credits片尾5-10s快速淡出在 Root.tsx 中Explainer的calculateMetadata是这套“时间由内容驱动”约定的源码级实现根据cuts中每个镜头的out_seconds取最大值Math.ceil((lastEnd 1) * 30)得到总帧数——即在最后一个镜头结束后追加 1 秒用于最终淡出末尾的空cuts则回退到 30 × 60 帧的默认时长。这与文档“Overview 以 3-5 个要点为准、Stats 以 3-4 张卡片为准”的规划思路一致先定内容再由内容反推时长。高级 API一份可全文引用的速查手册技能文档将 hooks、组件、渲染器、Lambda 与 Player 的完整 API 文档指向同目录的 reference.md覆盖以下能力建议在编写合成前先查阅核心 HooksuseCurrentFrame()返回当前帧Sequence内为相对帧useVideoConfig()返回width/height/fps/durationInFrames/id/defaultProps。动画工具interpolate(input, inputRange, outputRange, options)支持extrapolateLeft/Rightextend/clamp/identity/wrap与easingspring({frame, fps, config})提供damping/mass/stiffness/overshootClamping等物理参数高弹{damping:5, stiffness:200}、无弹{damping:20, overshootClamping:true}、慢速{damping:20, mass:2}measureSpring可测算弹簧动画的实际帧数interpolateColors做颜色插值Easing提供线性到贝塞尔、回弹、弹性的全套缓动。核心组件Composition含lazyComponent与calculateMetadata动态元数据、Sequence、Series支持负 offset 产生交叠、Loop、AbsoluteFill。媒体组件Img、Videovolume支持逐帧回调、OffthreadVideotransparent、toneMapped、Audio、AnimatedImageGIF/APNG。渲染管线remotion/bundler的bundleremotion/renderer的selectComposition/renderMedia/renderStill/renderFrames/stitchFramesToVideo支持codech264/h265/vp8/vp9/gif/prores、crf质量、concurrency并发等参数。Lambda 云渲染deployFunction→deploySite→renderMediaOnLambda→getRenderProgress→downloadMedia的完整链路。Player 播放器Player的 30 配置项与PlayerRef命令式 APIplay/pause/seekTo/setVolume/mute/requestFullscreen等以及onPlay/onPause/onEnded/onSeeked/onTimeUpdate事件回调。辅助工具staticFile/prefetch/getStaticFiles、getInputProps读取--propsCLI 传入数据、getRemotionEnvironment区分 Studio/渲染/Player 环境、random(seed)同 seed 每次渲染结果一致保证确定性。在 OpenMontage 中的端到端使用路径技能文档描述的是工具箱通用约定而 OpenMontage 仓库将其落地为独立的 remotion-composer 合成工程脚本如下# 启动 Remotion Studio 预览--props 传入 JSON 即可实时调整 npm start # 等价于 npx remotion studio # 渲染 Explainer 合成为 mp4 npm run build # 等价于 npx remotion render src/index.tsx Explainer out/video.mp4 # 升级 Remotion 全家桶保持版本一致 npm run upgrade # 等价于 npx remotion upgrade运行时通过--props传入 JSON驱动Explainer的cuts/overlays/captions/audio四层数据各 Cut 类型与必填字段的完整对照见 SCENE_TYPES.md从text_card、stat_card、callout、comparison、四类图表到anime_scene、terminal_scene、screenshot_scene均有记录Root.tsx则统一注册了 12 个 Composition覆盖横屏解说、竖屏口播TalkingHead1080×1920、电影感渲染器CinematicRenderer与片尾卡EndTag。工具箱的 Python 侧同样以该工程为渲染后端tools/video/remotion_caption_burn.py通过查找仓库根下的remotion-composer目录、探测 Remotion 可用性最终以npx remotion render完成字幕烧录合成并把remotion声明为可选的首选渲染运行时render_runtimeremotion。这印证了技能文档中的定位remotion-composer是 OpenMontage 面向“动画解说”类管线的官方渲染栈与npx remotion render的 CLI 约定一脉相承。License 注意Remotion 采用特殊许可证special license。技能文档特别提醒公司用于商业用途时可能需要购买许可证请前往 remotion.dev/license 确认自身使用场景的授权要求。在将 OpenMontage 的渲染产物用于商业项目前务必核对这一条款。【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
OpenMontage 的 Remotion 工具箱扩展：共享组件、自定义转场与帧驱动视频工程规范
OpenMontage 的 Remotion 工具箱扩展共享组件、自定义转场与帧驱动视频工程规范【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage本文围绕 OpenMontage 仓库中面向 Agent 的 Remotion 技能文档 .claude/skills/remotion/SKILL.md 展开完整解读其在官方 Remotion 能力之上封装的工具箱级约定可复用共享组件、超越remotion/transitions的自定义转场库、8 条渲染期最佳实践与按场景类型划分的时间轴规范。读者读完后可以在本项目 remotion-composer 中直接使用这些组件与转场写出帧率无关、渲染稳定、节奏统一的可编程视频合成。该技能文档定位为“工具箱扩展”Toolkit Extensions官方 Remotion 框架知识hooks、动画、渲染等统一沉淀在.claude/skills/remotion-official/由官方 remotion-dev/skills 仓库同步而本文讨论的这份文件只覆盖本项目特有的模式——共享组件、自定义转场、工程约定与时间规划。换句话说前者回答“Remotion 怎么用”后者回答“在这个项目里 Remotion 应该怎么写”。共享组件开箱即用的可复用视频组件技能文档规定可复用的视频组件统一放在lib/components/下模板中通过相对导入引用import { AnimatedBackground, SlideTransition, Label } from ../../../../lib/components;组件用途AnimatedBackground浮动形状背景变体subtle、tech、warm、darkSlideTransition场景转场fade、zoom、slide-up、blur-fadeLabel浮动标签徽章可选携带 JIRA 引用Vignette电影感边缘压暗遮罩LogoWatermark角落 Logo 品牌水印SplitScreen并排视频对比NarratorPiP画中画主讲人叠加层Envelope带开合翻盖动画的 3D 信封PointingHand滑动进入并带脉冲效果的动画手形 emojiMazeDecoration角落装饰用的等距网格动画在 OpenMontage 当前仓库中这套组件模式的落地实现位于 remotion-composer/src/components/index.ts统一导出 16 个场景组件TextCard、StatCard、ProgressBar、CalloutBox、ComparisonCard、BarChart/LineChart/PieChart/KPIGrid、CaptionOverlay、SectionTitle、StatReveal、HeroTitle、ParticleOverlay、AnimeScene、TerminalScene、ScreenshotScene、ProviderChip并附带ParticleType、CameraMotion、TerminalStep、ScreenshotStep等类型。例如Vignette在 Explainer.tsx 中以径向渐变实现边缘压暗直接叠加在图片/视频场景之上AnimatedBackground在 Explainer.tsx 中实现为主题驱动的渐变网格 浮动光球背景。组件导入路径以实际项目结构为准本仓库统一从src/components入口导入例如import { TextCard } from ./components/TextCard;见 Explainer.tsx新增组件时同步更新src/components/index.ts即可被全项目发现。自定义转场超越官方 transitions 包的场景过渡库技能文档强调工具箱在官方remotion/transitions包之外维护了一套位于lib/transitions/的自定义转场库用于场景间的特效过渡。使用 TransitionSeries 编排转场import { TransitionSeries, linearTiming } from remotion/transitions; // Import custom transitions from lib (adjust path based on your project location) import { glitch, lightLeak, clockWipe, checkerboard } from ../../../../lib/transitions; // Or import from remotion/transitions for official ones import { slide, fade } from remotion/transitions/slide; TransitionSeries TransitionSeries.Sequence durationInFrames{90} TitleSlide / /TransitionSeries.Sequence TransitionSeries.Transition presentation{glitch({ intensity: 0.8 })} timing{linearTiming({ durationInFrames: 30 })} / TransitionSeries.Sequence durationInFrames{120} ContentSlide / /TransitionSeries.Sequence /TransitionSeries可用自定义转场一览转场可选参数最适合glitch()intensity、slices、rgbShift科技演示、硬核揭示、赛博朋克rgbSplit()direction、displacement现代科技感、活力转场zoomBlur()direction、blurAmountCTA、高能时刻、冲击感lightLeak()temperature、direction庆典、胶片美学、温暖时刻clockWipe()startAngle、direction、segments时间相关内容、俏皮揭示pixelate()maxBlockSize、gridSize、scanlines、glitchArtifacts、randomness复古/游戏风、数字变换checkerboard()gridSize、pattern、stagger、squareAnimation俏皮揭示、结构化转场Checkerboard 可用图案patternsequential、random、diagonal、alternating、spiral、rows、columns、center-out、corners-in转场参数示例// Tech/cyberpunk feel glitch({ intensity: 0.8, slices: 8, rgbShift: true }) // Warm celebration lightLeak({ temperature: warm, direction: right }) // High energy zoom zoomBlur({ direction: in, blurAmount: 20 }) // Chromatic aberration rgbSplit({ direction: diagonal, displacement: 30 }) // Clock sweep reveal clockWipe({ direction: clockwise, startAngle: 0 }) // Retro pixelation pixelate({ maxBlockSize: 50, glitchArtifacts: true }) // Checkerboard patterns checkerboard({ pattern: diagonal, gridSize: 8 }) checkerboard({ pattern: spiral, gridSize: 10 }) checkerboard({ pattern: center-out, squareAnimation: scale })转场时长建议类型帧数说明Quick cut快切15-20快、有冲击力Standard标准30-45最常用Dramatic戏剧化50-60缓慢揭示Glitch effects故障效果20-30应给人突然感Light leak漏光45-60需要时间扫过画面预览全部转场cd showcase/transitions npm run studio在 OpenMontage 中remotion/transitions已作为正式依赖声明在 remotion-composer/package.json版本与 remotion 核心一致^4.0.484并支持npx remotion upgrade统一升级。除了 TransitionSeries 式的“两段之间插入转场”编排本项目还在场景内部实现了另一种转场通道每个Cut支持transition_in、transition_out与transition_duration字段Explainer.tsx 中的VideoScene会根据这些字段在场景开头/结尾计算淡入淡出帧区间当取值为cut/none时走硬切否则按transitionDuration默认 8 帧做插值渐变。工具箱最佳实践8 条渲染期铁律技能文档给出了本工具箱开发 Remotion 合成时必须遵守的 8 条最佳实践这些规则在 remotion-composer 的源码中均有直接印证只用帧驱动动画Frame-based animations only——避免使用 CSS transitions/animations否则渲染时会产生闪烁。Explainer.tsx 中所有动效光球位移、渐变角度、Ken Burns 缩放、淡入淡出全部由useCurrentFrame()interpolate/spring计算并显式声明willChange: transform, opacity配合浏览器合成。从useVideoConfig()取 fps——让动画与帧率无关。例如ImageScene中const { fps, durationInFrames } useVideoConfig()所有以秒为单位的时长都通过* fps换算成帧。钳制插值Clamp interpolations——使用extrapolateRight: clamp防止数值越界失控。仓库中几乎每一次interpolate调用都同时声明extrapolateLeft: clamp与extrapolateRight: clamp例如图片淡出区间interpolate(frame, [fadeOutStart, durationInFrames], [1, 0.3], {...})。优先使用OffthreadVideo——复杂合成中性能优于Video。Explainer.tsx 的VideoScene与 CinematicRenderer.tsx 的场景视频全部使用OffthreadVideo并配合muted、trimBefore/trimAfter、playbackRate等属性。异步用delayRender阻塞渲染——始终等待数据就绪再渲染。完整用法见 reference.mddelayRender返回句柄数据就绪后continueRender(handle)解除阻塞出错时cancelRender异步场景如calculateMetadata中 fetch 数据是渲染期数据依赖的标准解法。staticFile引用资源——正确引用public/目录下的文件。仓库中的 resolveAsset.ts 做了统一封装远程 URLhttp/https/data:直接透传绝对路径转成file://其余相对路径走staticFile(clean)指向public/。所有项目统一 30fps——换算公式帧数 秒数 × 30。这一点在 Root.tsx 中体现得极为彻底Explainer、CinematicRenderer、TalkingHead、TitledVideo、HeroTitle、ProductReveal、CollageBurst、LyricOverlay、EndTag等全部 Composition 一律fps{30}而EndTag的 5.5 秒正好注册为 165 帧EndTagOverlay的 8.19 秒为 246 帧都严格遵循 30fps 换算。playbackRate必须恒定——需要变速/极端速度时先用 FFmpeg 预处理素材而不是在 Remotion 里动态变速。相关经验可参考 skills/core/ffmpeg.md。项目时间规划约定技能文档同时给出了按场景类型划分的时长约定配音以约150 词/分钟的语速驱动整体节奏场景类型时长说明Title标题3-5s90-150fLogo 主标题Overview概览10-20s3-5 个要点Demo演示10-30s用 playbackRate 调整以匹配Stats数据8-12s3-4 张统计卡Credits片尾5-10s快速淡出在 Root.tsx 中Explainer的calculateMetadata是这套“时间由内容驱动”约定的源码级实现根据cuts中每个镜头的out_seconds取最大值Math.ceil((lastEnd 1) * 30)得到总帧数——即在最后一个镜头结束后追加 1 秒用于最终淡出末尾的空cuts则回退到 30 × 60 帧的默认时长。这与文档“Overview 以 3-5 个要点为准、Stats 以 3-4 张卡片为准”的规划思路一致先定内容再由内容反推时长。高级 API一份可全文引用的速查手册技能文档将 hooks、组件、渲染器、Lambda 与 Player 的完整 API 文档指向同目录的 reference.md覆盖以下能力建议在编写合成前先查阅核心 HooksuseCurrentFrame()返回当前帧Sequence内为相对帧useVideoConfig()返回width/height/fps/durationInFrames/id/defaultProps。动画工具interpolate(input, inputRange, outputRange, options)支持extrapolateLeft/Rightextend/clamp/identity/wrap与easingspring({frame, fps, config})提供damping/mass/stiffness/overshootClamping等物理参数高弹{damping:5, stiffness:200}、无弹{damping:20, overshootClamping:true}、慢速{damping:20, mass:2}measureSpring可测算弹簧动画的实际帧数interpolateColors做颜色插值Easing提供线性到贝塞尔、回弹、弹性的全套缓动。核心组件Composition含lazyComponent与calculateMetadata动态元数据、Sequence、Series支持负 offset 产生交叠、Loop、AbsoluteFill。媒体组件Img、Videovolume支持逐帧回调、OffthreadVideotransparent、toneMapped、Audio、AnimatedImageGIF/APNG。渲染管线remotion/bundler的bundleremotion/renderer的selectComposition/renderMedia/renderStill/renderFrames/stitchFramesToVideo支持codech264/h265/vp8/vp9/gif/prores、crf质量、concurrency并发等参数。Lambda 云渲染deployFunction→deploySite→renderMediaOnLambda→getRenderProgress→downloadMedia的完整链路。Player 播放器Player的 30 配置项与PlayerRef命令式 APIplay/pause/seekTo/setVolume/mute/requestFullscreen等以及onPlay/onPause/onEnded/onSeeked/onTimeUpdate事件回调。辅助工具staticFile/prefetch/getStaticFiles、getInputProps读取--propsCLI 传入数据、getRemotionEnvironment区分 Studio/渲染/Player 环境、random(seed)同 seed 每次渲染结果一致保证确定性。在 OpenMontage 中的端到端使用路径技能文档描述的是工具箱通用约定而 OpenMontage 仓库将其落地为独立的 remotion-composer 合成工程脚本如下# 启动 Remotion Studio 预览--props 传入 JSON 即可实时调整 npm start # 等价于 npx remotion studio # 渲染 Explainer 合成为 mp4 npm run build # 等价于 npx remotion render src/index.tsx Explainer out/video.mp4 # 升级 Remotion 全家桶保持版本一致 npm run upgrade # 等价于 npx remotion upgrade运行时通过--props传入 JSON驱动Explainer的cuts/overlays/captions/audio四层数据各 Cut 类型与必填字段的完整对照见 SCENE_TYPES.md从text_card、stat_card、callout、comparison、四类图表到anime_scene、terminal_scene、screenshot_scene均有记录Root.tsx则统一注册了 12 个 Composition覆盖横屏解说、竖屏口播TalkingHead1080×1920、电影感渲染器CinematicRenderer与片尾卡EndTag。工具箱的 Python 侧同样以该工程为渲染后端tools/video/remotion_caption_burn.py通过查找仓库根下的remotion-composer目录、探测 Remotion 可用性最终以npx remotion render完成字幕烧录合成并把remotion声明为可选的首选渲染运行时render_runtimeremotion。这印证了技能文档中的定位remotion-composer是 OpenMontage 面向“动画解说”类管线的官方渲染栈与npx remotion render的 CLI 约定一脉相承。License 注意Remotion 采用特殊许可证special license。技能文档特别提醒公司用于商业用途时可能需要购买许可证请前往 remotion.dev/license 确认自身使用场景的授权要求。在将 OpenMontage 的渲染产物用于商业项目前务必核对这一条款。【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
 从 JS 文件部署 Worker 并通过覆盖源文件完成更新？)
