Blur Reveal
The outgoing scene softens away while the incoming one resolves out of blur.
PrimitiveTransitionsAdvanced
$ npx remotion-ui@latest add blur-revealThe incoming scene resolves out of maxBlur under a slight scale settle while
the outgoing one softens and gives up its opacity. Both are perfectly sharp
outside the overlap — the blur exists only for the frames the cut is running.
Set shouldBlurOutExitingScene to false to hold the outgoing scene sharp
underneath and let the new one resolve on top of it. scaleBy controls the
scale headroom the blur rides on; 0 keeps the frame dead still.
Exports transitionBlurReveal() and getTransitionBlurRevealDuration() for use
with TransitionSeries.Transition.
Requires @remotion/transitions. Run npx remotion add @remotion/transitions if not already installed.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/blur-reveal- Use when: scene transitions and composition pacing.
- Customize: durationInFrames, maxBlur, scaleBy, shouldBlurOutExitingScene, 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 { transitionBlurReveal } from "@/remotion/primitives/blur-reveal";
<TransitionSeries.Transition {...transitionBlurReveal({ maxBlur: 24 })} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| durationInFrames | number | 22 | Transition overlap length. |
| maxBlur | number | 24 | Peak blur radius in px, reached only mid-transition. |
| scaleBy | number | 0.03 | Scale headroom the blur rides on. 0 keeps the frame still. |
| shouldBlurOutExitingScene | boolean | true | Blur the outgoing scene too. false holds it sharp underneath. |
| variant | "linear" | "spring" | "editorial" | "editorial" | Timing curve. |