Media

Before / After — editable Remotion component

A deterministic before-and-after comparison with adjustable split progress, labels, placeholders, and three visual presets.

Component details

Version
0.1.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 a blank project first:

npx create-video --yes --blank my-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.1.0

Agent guidance

  • Choose among split, reveal, minimal before overriding accent or content.
  • Pass staticFile results or remote URLs; placeholders keep previews render-safe.
  • The component is visible from frame zero and only animates internal emphasis.
  • Leave x, y, width, and height unset for centered eighty-percent sizing.

Related Remotion components