Shape Morph
One shape becoming another, and another, on a single progress ramp.
PrimitivePaths & shapesAdvanced
$ npx remotion-ui@latest add shape-morphGive it a chain of shapes and it travels through them on one ramp. Names come
from the MORPH_SHAPES presets, and anything else is treated as a raw d
string — so a logo can sit in the chain beside a circle.
The chain is prepared once and evaluated per frame. Preparation is the expensive
half — parsing, winding alignment, box fitting — and it depends on nothing but
the d strings, so doing it inside the render would re-parse every path thirty
times a second for strings that never change. That is what prepareMorph in
lib/path-morph.ts exists for, and it is shared with blob-morph and the
displacement transitions.
Steps inside the chain are linear on purpose. Easing each hop individually puts a stall at every shape, which reads as a slideshow; the easing belongs on the ramp that drives the whole chain, which is where it is.
rotation turns the shape across the chain. A little is worth having: without
it, a symmetrical pair like square-to-diamond can look like a still image at the
midpoint. loop closes the ring back to the first shape so a looping driver has
no seam.
Shapes morph cleanly when they reduce to a similar number of curves — the presets are all authored as four-curve closed paths for exactly that reason. A detailed logo morphing into a circle will always fold somewhere.
The chain is prepared once and evaluated per frame — preparation (parsing, winding alignment, box fitting) depends only on the d strings, so doing it in the render would re-parse every path 30 times a second. Steps inside the chain are linear on purpose: easing each hop puts a stall at every shape, which reads as a slideshow. Shapes morph cleanly when they reduce to a similar curve count; the presets are all four-curve closed paths.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/shape-morph- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: shapes, delayInFrames, durationInFrames, loop, 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 { ShapeMorph } from "@/remotion/primitives/shape-morph";
<ShapeMorph
shapes={["circle", "squircle", "triangle", "diamond"]}
size={300}
durationInFrames={96}
exitAtInFrames={92}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| shapes | (MorphShapeName | string)[] | ["circle", "squircle", "triangle", "diamond"] | Shapes to travel through. Preset names, or raw d strings authored on a 0–100 box. |
| delayInFrames | number | 0 | Frames to wait before the morph starts. |
| durationInFrames | number | 90 | Frames the whole chain takes, end to end. |
| loop | boolean | false | Returns to the first shape so a looping driver has no seam. |
| size | number | 220 | Rendered size in pixels. |
| fill | string | "#E8B86D" | Shape fill. Pass undefined for an outline only. |
| stroke | string | - | Outline colour. Omit for a filled shape with no outline. |
| strokeWidth | number | 3 | Outline weight, when stroke is set. |
| rotation | number | 18 | Degrees turned across the chain. Stops a symmetrical pair looking static. |
| exitAtInFrames | number | - | Frame the shape starts leaving. Omit to leave it on screen. |
| exitInFrames | number | 16 | Frames the exit takes. |