Capture Remotion Studio timelines with matching framing and create a video that wipes between the before and after images. The workflow also covers recreating an older layout from a historical code revision.
中文简介正在准备中。当前显示英语简介。
Capture matching 2x Remotion Studio timeline screenshots and make a before/after crop reveal in packages/brand. Use for timeline layout comparison videos, including recapturing a historical layout.
安装前可以查看交给 AI 代理的指令内容。
Use packages/brand/src/TimelineLayoutReveal.tsx and its registration in
packages/brand/src/Root.tsx. Screenshots belong in
packages/brand/public/timeline-reveal/before.png and after.png.
Capture the requested composition from packages/jonnys-videos. Start Studio
with bunx remotion studio --no-open --port=<free-port> and open the printed URL.
For the existing reveal, use RollerSkiCommute-new, frame 2025: the cow close-up.
Confirm the cow still appears there if the composition has changed.
The approved framing is a 1280 × 800 CSS viewport at device scale factor 2, with a 336-pixel timeline panel. This gives a MacBook-like 16:10 screenshot and a timeline 30% shorter than the original 480-pixel panel. Adapt these values when the user requests different framing. A 2x capture must contain 2560 × 1600 pixels; changing only the CSS viewport size is insufficient.
Keep the viewport, panel split, timeline zoom, scroll position, playhead, and selection identical between captures. Zoom out to show the entire horizontal duration. Capture the full Studio viewport when the composition preview should remain visible; capture only the timeline when requested. Move the pointer away from the timeline to avoid hover feedback and tooltips.
Wait for the composition, timeline activity scan, thumbnails, and waveforms to load. Empty render-delay handles alone do not establish that timeline media has finished loading: inspect a screenshot before saving the final captures.
Inspect the flags and source at both revisions. Main now enables tracks by
default, so disabling sequence activity on current main does not recreate the
original staircase layout. The existing before capture used revision
836e5f3597f90cb7b24a5de89b501e89942b0f41 with both experimental tracks and sequence
activity disabled. Choose a different baseline when the requested comparison
requires it.
Use a suitable existing checkout or a temporary managed worktree at the baseline
revision. For a fresh checkout, run bun install and
bunx turbo run make --filter='@remotion/jonnys-videos...' before starting Studio;
building only CLI dependencies misses fonts, noise, and layout utilities.
Different ports have separate browser storage. Match the framing and playhead explicitly in both Studios. Copy saved screenshots into the active brand project before closing the baseline server and archiving a temporary managed worktree. Restore any temporarily changed config. Update from main only when requested.
Use only the two screenshot layers, unless the user requests additional content.
Keep the before image underneath the after image. Animate the after image's
cropRight from 1 to 0 with an inline interpolate() driven by
useCurrentFrame(), clamped at both ends. Use crop props rather than a CSS
animation so the wipe renders deterministically and remains editable in Studio.
Match the composition dimensions to the screenshot pixels. The existing reveal is six seconds at 60 fps: hold before for 1.2 seconds, wipe until 3.8 seconds, then hold after. Preserve or adjust timing according to the request.
Render from packages/brand, following remotion-render:
bunx remotion render src/index.ts TimelineLayoutReveal ../../out/timeline-layout-reveal.mp4 --codec=h264 --crf=16 --image-format=png --pixel-format=yuv420p --concurrency=4
Inspect the beginning, midpoint, and ending of the exported video, checking that the preview and playhead stay aligned and only the timeline changes. Run focused formatting and lint checks for the changed source files.
For phone viewing, follow upload-r2 to upload the rendered MP4 under a unique content-hashed key, verify its public URL, and return a direct watch link. Retain the local screenshots when the user requested them in brand. This workflow does not itself request a commit, push, or PR.
还没有评价。欢迎分享你的使用感受。
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
Add a reported Remotion bug to the bugs API with its affected versions, a short title, and upgrade guidance. Follow the existing entry format and place the new record first so recent bugs appear at the top.
中文简介正在准备中。当前显示英语简介。
Add a Remotion command-line or configuration option, or convert a hardcoded flag into a shared option definition. Connect parsing, configuration setters, help entries, and generated documentation so the option is consistently available and documented.
中文简介正在准备中。当前显示英语简介。
Add a new effect to @remotion/effects, including its implementation, package entry points, documentation, interactive demo, and preview images. Follow the package conventions and verify the changes with tests, formatting checks, and builds.
中文简介正在准备中。当前显示英语简介。
Add a person to the Remotion experts page by placing their portrait, entering their profile and contact links, and generating an expert card image. The instructions specify file locations, profile fields, and how to verify card generation.
中文简介正在准备中。当前显示英语简介。
Create a new @remotion package within the Remotion monorepo, a repository containing multiple packages. Set up its files, register it across the project, and prepare documentation, usage examples, and build configuration.
中文简介正在准备中。当前显示英语简介。
Add a new sound effect to @remotion/sfx, from registering the audio file to exporting its URL and documenting its use. The workflow covers playback examples, attribution, navigation entries, waveform generation, and the package build.
中文简介正在准备中。当前显示英语简介。