timeline-layout-reveal

时间线布局揭示

使用 packages/brand/src/TimelineLayoutReveal.tsx 及其在 packages/brand/src/Root.tsx 中的注册。截图应放在 packages/brand/public/timeline-reveal/before.png 和 after.png。

匹配截图

从 packages/jonnys-videos 捕获所需构图。运行 bunx remotion studio --no-open --port=<free-port> 启动 Studio，然后打开打印出的 URL。 对于现有的揭示效果，使用 RollerSkiCommute-new，帧 2025：奶牛特写。 如果构图有变化，请确认此处仍显示奶牛。

已批准的取景为 1280 × 800 CSS 视口，设备缩放系数为 2， 时间线面板高度为 336 像素。这样可生成类似 MacBook 的 16:10 截图， 时间线比原来的 480 像素面板短 30%。用户要求不同取景时，请相应调整这些数值。 2 倍截图必须包含 2560 × 1600 像素；仅更改 CSS 视口尺寸并不足够。

两张截图中的视口、面板分割、时间线缩放、滚动位置、播放头和选区必须一致。 缩小时间线以显示完整的水平时长。如果需要保持构图预览可见，请捕获完整的 Studio 视口；如果用户要求仅截取时间线，则只捕获时间线。 将指针移离时间线，避免出现悬停反馈和工具提示。

等待构图、时间线活动扫描、缩略图和波形加载完成。 仅有空的渲染延迟句柄并不能证明时间线媒体已加载完毕：保存最终截图前，请先检查截图。

历史版本的 before 画面

检查两个修订版本的标志和源代码。当前 main 默认启用轨道，因此在当前 main 上停用序列活动无法重现原来的阶梯式布局。现有的 before 截图使用修订版本 836e5f3597f90cb7b24a5de89b501e89942b0f41，并同时停用了实验性轨道和序列活动。 如果所需比较需要不同的基准版本，请选择其他基准版本。

使用合适的现有检出版本，或在基准修订版本上创建临时托管工作树。对于全新检出，启动 Studio 前请运行 bun install 和 bunx turbo run make --filter='@remotion/jonnys-videos...'； 仅构建 CLI 依赖会缺少字体、噪声和布局工具。

不同端口使用独立的浏览器存储。在两个 Studio 中明确匹配取景和播放头。关闭基准服务并归档临时托管工作树之前，请将保存的截图复制到当前 brand 项目中。 还原所有临时更改的配置。只有在用户要求时才从 main 更新。

揭示效果与交付

除非用户要求添加其他内容，否则仅使用两张截图图层。 将 before 图像放在 after 图像下方。使用由 useCurrentFrame() 驱动的内联 interpolate()，将 after 图像的 cropRight 从 1 动画到 0，并在两端进行钳制。使用裁剪属性而非 CSS 动画，这样擦除效果能够确定性渲染，并且仍可在 Studio 中编辑。

构图尺寸应与截图像素尺寸一致。现有揭示效果时长为 6 秒，帧率为 60 fps：先保持 before 1.2 秒，擦除至 3.8 秒，然后保持 after。根据请求保留或调整时长。

按照 remotion-render 中的说明，从 packages/brand 渲染：

bunx remotion render src/index.ts TimelineLayoutReveal ../../out/timeline-layout-reveal.mp4 --codec=h264 --crf=16 --image-format=png --pixel-format=yuv420p --concurrency=4

检查导出视频的开头、中间和结尾，确认预览和播放头保持对齐，且只有时间线发生变化。对更改的源文件运行有针对性的格式化和 lint 检查。

如需在手机上观看，请按照 upload-r2 中的说明，将渲染后的 MP4 上传至唯一的内容哈希键下，验证其公开 URL，并提供可直接观看的链接。如果用户要求将截图保留在 brand 中，请保留本地截图。 此工作流本身不要求提交、推送或创建 PR。