用途:制作 Remotion Studio 时间线布局的前后对比揭示视频。主要使用 packages/brand/src/TimelineLayoutReveal.tsx 及其在 packages/brand/src/Root.tsx 中的注册,截图放在 packages/brand/public/timeline-reveal/before.png 与 after.png。
截图要点:从 packages/jonnys-videos 截取指定 composition。用 bunx remotion studio --no-open --port=<free-port> 启动后打开打印的 URL。现有示例用 RollerSkiCommute-new 第 2025 帧(牛的特写),composition 变化时需确认该画面仍存在。标准取景为 1280×800 CSS 视口、设备缩放 2、336 像素时间线面板,2x 截图须为 2560×1600 像素。两次截图须保持视口、面板分割、缩放、滚动、播放头与选择一致,指针移开时间线避免悬停反馈,并等待媒体、缩略图与波形加载完成。
历史 before 视图:当前 main 默认启用 tracks,需用指定修订版本并关闭相关实验开关来复现原始布局;可用临时 worktree,必要时先运行 bun install 和 bunx turbo run make --filter='@remotion/jonnys-videos...'。
揭示与导出:before 在下、after 在上,用 useCurrentFrame() 驱动的 interpolate() 将 after 的 cropRight 从 1 动画到 0,两端 clamp,使用 crop 属性保证确定性渲染。现有版本 6 秒 60fps。渲染命令:bunx remotion render src/index.ts TimelineLayoutReveal ../../out/timeline-layout-reveal.mp4 --codec=h264 --crf=16 --image-format=png --pixel-format=yuv420p --concurrency=4。渲染后检查开头、中点与结尾。手机观看可上传 MP4 并返回直链。该工作流不主动提交、推送或创建 PR。其他收费、平台等信息暂未提供。