Morph Shape
A reveal through a shape that changes form as it grows across the frame.
PrimitiveTransitionsAdvanced
$ npx remotion-ui@latest add transition-morph-shapeThe arriving scene is revealed through a shape that both grows and morphs, so the reveal has a silhouette rather than an edge. A circle that only grows is Circle Reveal; reach for this when the shape itself should be part of the cut.
from and to take the shared MORPH_SHAPES presets — circle, square,
squircle, triangle, diamond, blob — which are authored on one box with
matched curve counts. A raw path d works too, but a pair with mismatched
segment counts interpolates into geometry that is valid SVG and nonsense on
screen.
overshoot is the final size as a multiple of the frame diagonal; below 1 the
corners furthest from the origin are never revealed. warp adds turbulence to
the revealed scene and is 0 by default — the warp is
Liquid Warp's job.
This is a configuration of the shared displacement presentation: the mask channel with the turbulence channel switched off.
Exports transitionMorphShape() and getTransitionMorphShapeDuration() for use
with TransitionSeries.Transition.
Requires @remotion/transitions. Run npx remotion add @remotion/transitions if not already installed.
Configuration of the shared displacement presentation: the mask channel with turbulence off.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/transition-morph-shape- Use when: scene transitions and composition pacing.
- Customize: durationInFrames, from, to, originX, 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 { transitionMorphShape } from "@/remotion/primitives/transition-morph-shape";
<TransitionSeries.Transition {...transitionMorphShape({ from: "circle", to: "diamond" })} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| durationInFrames | number | 24 | Transition overlap length. |
| from | "circle" | "square" | "squircle" | "triangle" | "diamond" | "blob" | string | "circle" | Shape the reveal starts as, at zero size. A raw path d also works. |
| to | "circle" | "square" | "squircle" | "triangle" | "diamond" | "blob" | string | "squircle" | Shape it has become once it covers the frame. |
| originX | number | 0.5 | Where the shape grows from, 0→1 of the frame width. |
| originY | number | 0.5 | Where the shape grows from, 0→1 of the frame height. |
| overshoot | number | 1.06 | Final size as a multiple of the frame diagonal. Below 1 leaves corners unrevealed. |
| warp | number | 0 | Optional turbulence on the revealed scene, in px. 0 keeps the silhouette crisp. |
| variant | "linear" | "spring" | "editorial" | "editorial" | Timing curve. |