Liquid Warp
A liquid displacement warp that stirs one scene into the next.
PrimitiveTransitionsAdvanced
$ npx remotion-ui@latest add transition-liquid-warpA turbulence field displaces the frame hardest in the middle of the cut and is
exactly zero at both ends, so a settled scene carries no filter at all. The
default frequency of 0.006 gives large, slow lobes that read as liquid; the
core's higher default reads as sand at 30 fps, and anything above about 0.02
reads as noise rather than as a warp.
A warp on its own never reveals anything — the frame is still the old scene, just stirred — so the arriving scene dissolves onto the outgoing one underneath. Only the arriving scene fades: ramping both at once leaves two half-transparent layers and the page background flashes through the middle of the cut.
churn is how much the noise field re-seeds across the cut. 0 holds one
static field and reads as a lens; the default boils. affect chooses whether
both scenes warp or only the arriving one.
This is a configuration of the shared displacement presentation: the turbulence channel with no mask.
Exports transitionLiquidWarp() and getTransitionLiquidWarpDuration() 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 turbulence channel with no mask.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/transition-liquid-warp- Use when: scene transitions and composition pacing.
- Customize: durationInFrames, scale, frequency, octaves, 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 { transitionLiquidWarp } from "@/remotion/primitives/transition-liquid-warp";
<TransitionSeries.Transition {...transitionLiquidWarp({ scale: 140 })} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| durationInFrames | number | 26 | Transition overlap length. Long enough for the field to boil. |
| scale | number | 140 | Peak displacement in px at the middle of the cut. |
| frequency | number | 0.006 | Turbulence base frequency. Below 0.004 reads as a lens, above 0.02 as noise. |
| octaves | number | 2 | Turbulence octaves. Above 3 costs a lot and adds almost nothing. |
| churn | number | 6 | How much the noise field re-seeds across the cut. 0 holds one static lens. |
| blur | number | 3 | Peak blur in px, on the same curve as the displacement. |
| seed | number | 7 | Turbulence seed. |
| affect | "both" | "entering" | "both" | Warp both scenes, or only the arriving one. |
| variant | "linear" | "spring" | "editorial" | "editorial" | Timing curve. |