Remotion 视频布局排版指南安全区、字号基线与视频优先构图法则【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion导读在 Remotion 中用 React 写视频时最容易犯的错误是把一帧画面当作网页来排版。本指南围绕 remotion-create 技能中的 video-layout.md 布局规则展开它是创建新视频组合Composition时设计而非写页面的第一手规范。读完本文你将掌握视频构图的核心决策顺序、1080px 基准画布下的安全区与最小字号数值、随画布宽度等比缩放的换算方法以及如何用 Remotion 的AbsoluteFill、useVideoConfig与文本测量工具把这些规则落地成像素精确的代码。一、这份规范在 Remotion 技能体系中的位置video-layout.md 并非独立文档而是 remotion-create 技能SKILL.mdDesigning a video环节明确要求遵循的两份规范之一Follow Remotion React Markup Best Practices and Video Layout Rules for video-first layout and text sizing guidance.也就是说新建视频项目的推荐流程是先按 SKILL.md 脚手架创建工程再按照 remotion-markup 技能 编写 React 标记最后用 video-layout.md 的规则做视频优先的版式与字号校正。对应的完整操作链包括npx create-videolatest --yes --blank --no-tailwind my-video cd my-video npm i开发中可在 Remotion Studio 中即时预览构图npx remotion studio --no-open渲染成品则使用npx remotion render布局规则正是在预览→渲染之前对每一帧画面的质量把关属于创作流程中的设计审查层。二、视频不是网页围绕第一眼焦点构图video-layout.md 开门见山第一条原则是You are designing a video, not a webpage.这句话背后是两种媒介的本质差异网页用户会在页面上停留、滚动、扫描多个模块排版可以容纳并列的多条信息视频中的每一帧通常只在观众眼前停留零点几秒画面一旦推进或切换阅读时间就结束。因此规范给出两条可操作的决策决定每一场景中观众首先注意到什么Decide what the viewer should notice first in each scene让画面围绕这一个事物构建Build the frame around that one thing并且Do not add redundant elements不添加冗余元素。在实践中画面围绕一个焦点意味着同一屏内不宜同时出现大标题、副标题、说明文字、Logo、统计数据和装饰图形多余元素会把观众的注意力从唯一的焦点上稀释掉。实现上Remotion 的典型做法是用层级化组件组织画面——焦点内容放在最高层其他元素依据其与焦点的关系决定是否保留或弱化。从源码可以印证 Remotion 为这种层级化叠加提供的原语AbsoluteFill是绝对定位、占满画布、flex 布局的容器组件packages/core/src/AbsoluteFillElement.tsx其内部AbsoluteFillInner会把自身包进一个layoutnone的Sequence中packages/core/src/AbsoluteFill.tsx从而同时具备时间轴控制能力。多个AbsoluteFill天然支持背景层、焦点层、前景层叠加构图时应该主动删掉那些不服务于单一焦点的层。三、安全区设计1080px 画布的明确数值规范为安全区给出了可执行的硬性基准针对 1080px 宽的画面关键文字距画面左右两侧至少 80px关键文字距画面顶部与底部至少 100px。Keep important content inside a generous safe area. For 1080px-wide videos, keep key text at least 80px from the sides and 100px from the top and bottom.安全区之所以慷慨generous是因为视频成品几乎总会经历二次裁切或遮挡平台播放器的时间轴与控件悬浮在画面边缘、竖屏信息流会圆角裁切、不同设备存在 overscan/安全区裁剪而这些都属于渲染引擎无法控制的展示环节。因此设计时必须把关键内容收缩在安全区内宁可留白不可压线。换算到一块 1080×1080 的方形画布上安全区即中央920px × 880px的矩形区域无论下方左右留多少装饰标题与正文的包围盒都应落在这个矩形内。用 AbsoluteFill 落实安全区最直接的实现方式是把安全区内边距做成常量并应用到根布局// 1080px 基准画布 export const SAFE_AREA { horizontal: 80, // 左右至少 80px vertical: 100, // 上下至少 100px }; import {AbsoluteFill} from remotion; export const TitleCard: React.FC () { return ( AbsoluteFill style{{ padding: ${SAFE_AREA.vertical}px ${SAFE_AREA.horizontal}px, justifyContent: center, }} h1主标题保持在安全区内/h1 /AbsoluteFill ); };AbsoluteFill默认样式为position: absolute、四周0、宽高100%、flex-direction: column见 packages/core/src/AbsoluteFillElement.tsx因此直接在它上面设置padding就等价于给整个画面加了一圈安全区护栏。四、字号基线主标题与说明文字的最小值规范针对 1080px 宽画布给出的是粗略最小值rough minimums原文表述很克制值得逐字理解主标题Main headline84px 起重要辅助文字Important supporting text44px 起For 1080px-wide compositions, use these rough minimums: - Main headline: 84px - Important supporting text: 44px之所以强调rough minimums是因为字号必须结合文本长度与内容总量再微调短标题可以更大以增强冲击力长说明则要在不小于 44px与不越出安全区之间做平衡。这两个数值的设定逻辑是1080px 宽的画面在常规播放尺寸下84px 的字号大约占画面宽度 7.8%能保证标题跨屏可读44px 的辅助文字约为画面宽度 4.1%是远距离观看仍能辨认的下限。低于这两个值的文字在手机竖屏、横屏投屏等实际观看距离下都容易变得难以辨认。标题层级建议参照如下比例关系组织单位为 px基于 1080 宽文本角色建议字号相对主标题主标题841×重要辅助文字44≈ 0.52×次要标注时间、脚注、字幕辅助不超过辅助文字 0.52×需要留意Remotion 的字体渲染以实际像素为准px字号会直接映射到合成帧的真实像素因此上述数值就是最终渲染帧中的物理尺寸不存在网页中的 rem/视口缩放折损。五、随画布宽度等比缩放换算公式与速查表规范最后一条是关键通则Scale those values with the composition width.安全区与字号全部以 1080px 宽为基准画布一旦改变宽度所有数值都应等比缩放从而保证文本在画面中所占比例恒定。缩放公式非常简单目标值 基准值 × (画布宽度 / 1080)例如主标题84 × (width / 1080)辅助文字44 × (width / 1080)左右安全区80 × (width / 1080)上下安全区100 × (width / 1080)。常见画布速查表画布宽度左右安全区上下安全区主标题最小辅助文字最小72053675629108080100844412809511910052192014217814978表中的 1920×1080 是典型的横屏成品如packages/skills中地图渲染用例常见的 1920×1080 构图此时主标题约为 149px而 1080×1920 竖屏视频仍以 1080 为宽度基准直接套用 1080 一行的数值即可。用 useVideoConfig 自动缩放Remotion 在 packages/core/src/index.ts 中导出了useVideoConfig它能读取当前组合的width/height等配置。把基准值定义为常量、用宽度实时换算是最稳妥的实现import {AbsoluteFill, useVideoConfig} from remotion; // 1080px 基准下的布局规范 const TYPE_SCALE { headline: 84, supporting: 44, safeX: 80, safeY: 100, } as const; const scale (base: number, width: number) Math.round((base * width) / 1080); export const Layout: React.FC () { const {width} useVideoConfig(); const headline scale(TYPE_SCALE.headline, width); const supporting scale(TYPE_SCALE.supporting, width); const padX scale(TYPE_SCALE.safeX, width); const padY scale(TYPE_SCALE.safeY, width); return ( AbsoluteFill style{{ padding: ${padY}px ${padX}px, justifyContent: center, alignItems: flex-start, }} h1 style{{fontSize: headline, margin: 0}}主标题/h1 p style{{fontSize: supporting, marginTop: supporting / 2}} 重要说明文字同样落在安全区内。 /p /AbsoluteFill ); };这样同一套代码注册为不同尺寸的Composition宽度不同排版会自动保持相同视觉比例避免换了画布字号就失控的问题。组合的画布尺寸由Composition的width/height/fps/durationInFrames定义参数写法可参考 compositions.mdimport {Composition} from remotion; import {Layout} from ./Layout; export const RemotionRoot: React.FC () ( Composition idSquarePromo component{Layout} durationInFrames{150} fps{30} width{1080} height{1080} / Composition idWidePromo component{Layout} durationInFrames{150} fps{30} width{1920} height{1080} / / );六、把字号规范做到像素级文本测量与兜底字号给出的是最小值而真正严格的布局还需要验证文本最终没有溢出安全区。Remotion 生态为此提供了文本测量工具集 packages/layout-utils它在渲染前就能算出字符串在给定字族、字重、字号下的实际宽度measureText测量单行文本渲染宽度fitText根据容器宽度反向计算出刚好放得下的fontSize其核心思路是用 100px 采样字号测量文本宽度再按比例反推目标字号fit-text.tsfitTextOnNLines把文本限制在 N 行内并计算合适字号。例如某段长标题既要满足不小于 84px又必须在安全区宽度内显示就可以先用安全区宽度约束测量必要时让文案换行或使用fitText收紧字号实现下限与溢出两个约束同时满足。典型用法形如import {fitText} from remotion/layout-utils; import {useVideoConfig} from remotion; // 仅示意withinWidth 应取安全区可用宽度 const {fontSize} fitText({ text: Your headline, withinWidth: safeWidth, fontFamily: Inter, });文本测量类库在仓库中有配套测试如packages/layout-utils/src/test/下的用例用于验证fitText/fitTextOnNLines在超长不可断单词等边界情况下的行为可作为布局规则需要被程序化验证的参照。七、与 TailwindCSS 的联动注意点视频项目常引入 TailwindCSS 做原子化样式。此时有两个约束需要与字号/安全区规范配合字体与间距类可用但动画类禁用。同仓库 tailwind.md 明确规定不要使用transition-*或animate-*类——Remotion 的所有动画都应由useCurrentFrame()钩子按帧驱动这样渲染器才能在每一帧拿到确定值并逐帧导出而不是依赖浏览器 CSS 过渡的运行时行为。Tailwind 的任意值语法天然适合本规范。例如text-[84px]、px-[80px]、pt-[100px]可以直接映射 1080 基准的数值与安全区常量一一对应便于在设计稿与代码间对齐。仓库中 Tailwind 的接入与模板如packages/tailwind、packages/tailwind-v4可供参考若项目明确要求 Tailwind应保证其已正确启用后再使用上述任意值类。八、规范速查清单video-layout.md 的全部规则可收敛为五条可自查清单建议在提交渲染前逐条过一遍媒介意识我在设计视频不是网页——画面不承载慢慢浏览的任务单一焦点每个场景先确定观众第一眼看到什么画面围绕它构建安全区1080px 宽画布下关键文字距左右 ≥ 80px、距上下 ≥ 100px零冗余删除一切不服务于焦点的重复或装饰元素字号下限1080px 宽画布下主标题 ≥ 84px、重要辅助文字 ≥ 44px画布宽度变化时上述全部数值按宽度/1080比例等比缩放。结语video-layout.md 虽然只有寥寥数行却浓缩了 Remotion 项目用代码排版视频的设计内核以单一视觉焦点组织画面、以慷慨的安全区保护关键信息、以明确的字号下限保障远距可读性、以画布宽度为唯一缩放基准。配合仓库中的AbsoluteFill层级原语、useVideoConfig运行时画布信息、layout-utils 的文本测量工具以及 remotion-markup 技能 的配套规范这些看似简单的数值就能转化为稳定、可复现、逐帧精确的渲染结果。把这份清单当作每次新建组合时的默认自检是让 Remotion 视频从像网页走向像成片的第一步。【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考