Blob Morph
An organic blob that never settles, travelling a ring of generated shapes and coming back to where it started.
PrimitivePaths & shapes
$ npx remotion-ui@latest add blob-morphThe blob loops through a ring of generated outlines and returns to the first, so the wrap from the end of the period back to the start lands on the same geometry and the loop has no seam. There is no entrance and no exit — it is alive from the first frame.
Outlines are generated, not authored: points around a circle, displaced by three
sine harmonics whose phases come from the seed. Two harmonics leave a shape
that reads as symmetrical; the third breaks it. Every variant uses the same
point count, so they all reduce to the same number of curve commands and morph
into each other without the interpolator inventing segments.
Control arms are computed from the point count rather than being a constant —
the arm wants to be (4/3)·tan(π/2N) of the radius, taken along the neighbours'
chord. A guessed constant gives you a polygon when it is too short and scalloped
bulges between the points when it is too long, and both look like a bug rather
than a blob.
rotation is continuous rather than wrapping, so for a seamless loop set it to
0 or a multiple of 360.
It is an SVG shape, not a background. Give it a colour and put it behind
something, or hand the same idea to svg-mask-reveal as a mask.
Outlines are generated from three sine harmonics seeded by the seed prop — two alone leave a shape that reads as symmetrical. Every variant shares a point count so they reduce to the same curve commands and morph without invented segments. Control arms are computed from the point count, (4/3)·tan(π/2N) of the radius along the neighbours' chord: a guessed constant gives a polygon when short and scalloped bulges when long. No entrance or exit — it is alive from frame 0.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/blob-morph- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: size, fill, stroke, strokeWidth, 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 { BlobMorph } from "@/remotion/primitives/blob-morph";
<BlobMorph size={320} periodInFrames={96} amplitude={0.22} seed={1} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 260 | Rendered size in pixels. |
| fill | string | "#E8B86D" | Blob fill. Pass undefined for an outline only. |
| stroke | string | - | Outline colour. Omit for a filled blob. |
| strokeWidth | number | 3 | Outline weight, when stroke is set. |
| periodInFrames | number | 150 | Frames for one full trip around the ring of shapes. |
| states | number | 4 | How many shapes the loop travels through. Three to six reads as organic. |
| points | number | 10 | Points around the outline. More points, more detail and more wobble. |
| amplitude | number | 0.22 | How far the outline deviates from a circle, as a fraction of the radius. |
| seed | number | 1 | Changes the shape family without changing anything else. |
| rotation | number | 12 | Degrees per period. Continuous, so a seamless loop wants 0 or a multiple of 360. |