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.
Review the instructions the agent will receive before you install.
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.
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
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.