SVG Mask Reveal
An arbitrary SVG shape used as a reveal mask over anything.
PrimitivePaths & shapes
$ npx remotion-ui@latest add svg-mask-revealThe shape grows from origin until it covers the frame, revealing whatever you
pass as children — media, a scene, a gradient, another component.
The scale it has to reach is computed from the distance to the furthest corner, not from the frame's width. A shape opening from a corner has much further to travel than one opening from the middle, and a fixed multiplier either leaves a gap on one side or overshoots so far that the last half of the animation is nothing happening.
It uses an SVG <mask> rather than a CSS clip-path, so any d string
authored anywhere drops straight in and the same shape can carry soft edges.
Names from MORPH_SHAPES work directly; custom paths should be authored on a
0–100 box, since that is the box the scale maths assumes.
invert runs the shape backwards over the content, which is how you close a
scene with the same figure you opened it with. bouncy springs the growth
instead of easing it, and rotation turns the shape as it opens — worth a few
degrees on an angular mask so the edge does not arrive parallel to the frame.
The scale is computed from the distance to the furthest corner, not from the frame width — a shape opening from a corner has much further to travel, and a fixed multiplier either leaves a gap or spends half the animation doing nothing. It uses an SVG <mask> rather than a CSS clip-path, so any authored path drops in and the shape can carry soft edges. Custom paths must be authored on a 0–100 box, which is what the scale maths assumes.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/svg-mask-reveal- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: shape, origin, delayInFrames, durationInFrames, 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 { SvgMaskReveal } from "@/remotion/primitives/svg-mask-reveal";
<SvgMaskReveal
shape="squircle"
origin={{ x: 0.32, y: 0.36 }}
durationInFrames={90}
rotation={40}
>
<YourContent />
</SvgMaskReveal>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | What the mask reveals — media, a scene, a gradient, another component. |
| shape | MorphShapeName | string | "circle" | Mask shape: a preset name, or any d string authored on a 0–100 box. |
| origin | { x: number; y: number } | { x: 0.5, y: 0.5 } | Where the shape opens from, as a fraction of the frame. |
| delayInFrames | number | 0 | Frames to wait before the reveal starts. |
| durationInFrames | number | 40 | Frames the reveal takes. |
| rotation | number | 0 | Degrees the shape turns as it opens. |
| bouncy | boolean | false | Springs the growth instead of easing it. |
| invert | boolean | false | Shrinks the shape back over the content, to close a scene with the figure that opened it. |
| backgroundColor | string | - | Painted behind the masked content. Omit for transparency. |