Media
Before / After — editable Remotion component
A deterministic before-and-after comparison that reveals the result from left to right with adjustable timing, labels, and placeholders.
Component details
- Version
- 0.3.0
- License
- MIT
- Duration
- 5.0 seconds
- Dimensions
- 1920 × 1080
Prerequisite: Create a Remotion project
Agent Motion installs components into an existing Remotion project. If you are starting fresh, create the standard project structure first:
npx @agent-motion/cli create remotion my-remotion-video
Add editable source
Run this command from the root of your Remotion project. No separate Agent Motion CLI installation is required.
npx @agent-motion/cli add before-after@0.3.0
Agent guidance
- The outer canvas is transparent; the supplied images or placeholders provide the comparison surface.
- Pass staticFile results or remote URLs; placeholders keep previews render-safe.
- The before image is fully visible at frame zero; the after image then reveals from left to right.
- Use paceInFrames to control when the reveal reaches one hundred percent.
- Leave x, y, width, and height unset for centered eighty-percent sizing.