Circle Reveal
A circular mask that opens from any point in the frame onto the next scene.
PrimitiveTransitions
$ npx remotion-ui@latest add transition-circle-revealThe incoming scene is revealed through a circle growing from originX/originY,
while the outgoing one holds whole underneath. Only the arriving scene is
masked — punching the hole in both would open it onto the page background
instead of onto the next scene.
The radius is sized against the corner furthest from the origin, so an
off-centre reveal still clears the frame; half the diagonal would leave a wedge
unrevealed for any origin that is not dead centre. edgeSoftness feathers the
edge as a share of that radius, and the mask is grown past full coverage by the
feather width so no translucent ring survives into the last frames.
underScale gives the outgoing scene a little push-back under the hole, which
sells the circle as depth rather than as a sticker. Leave it at 1 for a flat
graphic reveal.
Exports transitionCircleReveal() and getTransitionCircleRevealDuration() for
use with TransitionSeries.Transition.
Requires @remotion/transitions. Run npx remotion add @remotion/transitions if not already installed.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/transition-circle-reveal- Use when: scene transitions and composition pacing.
- Customize: durationInFrames, originX, originY, edgeSoftness, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { transitionCircleReveal } from "@/remotion/primitives/transition-circle-reveal";
<TransitionSeries.Transition {...transitionCircleReveal({ originX: 0.3, originY: 0.4 })} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| durationInFrames | number | 22 | Transition overlap length. |
| originX | number | 0.5 | Centre of the circle, 0→1 of the frame width. |
| originY | number | 0.5 | Centre of the circle, 0→1 of the frame height. |
| edgeSoftness | number | 0.04 | Feathered edge as a share of the final radius. 0 cuts hard. |
| underScale | number | 1 | Scale the outgoing scene drifts to under the hole. 1 holds it still. |
| variant | "linear" | "spring" | "editorial" | "editorial" | Timing curve. |