Transitions

Circle Reveal Transition — editable Remotion component

A native Remotion TransitionSeries presentation where the incoming scene expands through a configurable circular mask until it covers every corner.

Component details

Version
0.1.0
License
MIT
Duration
3.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 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 circle-reveal-transition@0.1.0

Agent guidance

  • Use circleReveal({width, height}) as the presentation prop of TransitionSeries.Transition for native Remotion timeline integration.
  • Control transition duration and easing with linearTiming or springTiming; the presentation consumes Remotion's presentationProgress.
  • Choose clean for the crisp reference edge or soft for a feathered circular boundary.
  • The circle radius is calculated against the farthest corner, so off-center origins still finish with complete coverage.
  • Use normalized centerX and centerY values to place the reveal origin over a button, logo, cursor, or focal object.
  • CircleRevealTransition is a fixed internal A/B preview; production compositions should use the exported circleReveal presentation.