Transition Fade
Crossfade between scenes, or dip through a colour on the way.
PrimitiveTransitions
transition-fade30fps · 960×540
Install
$ npx remotion-ui@latest add transition-fadeBy default the two scenes crossfade directly. Pass dipTo and the cut goes
through that colour instead — the outgoing scene sinks into it, the frame holds
it for an instant, and the new scene rises back out. Each scene paints its own
colour layer and reaches full opacity by the midpoint, so the dip is solid
whatever sits behind the transition.
<TransitionSeries.Transition {...transitionFade({ dipTo: "#000" })} />Exports transitionFade() and getTransitionFadeDuration() for use with TransitionSeries.Transition.
Requires @remotion/transitions. Run npx remotion add @remotion/transitions if not already installed.
Returns a config object for `TransitionSeries.Transition`, not a React component.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/primitives/transition-fade- Use when: scene transitions and composition pacing.
- Customize: durationInFrames, dipTo, variant, 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
Example
import { TransitionSeries } from "@remotion/transitions";
import { transitionFade } from "@/remotion/primitives/transition-fade";
<TransitionSeries>
<TransitionSeries.Sequence durationInFrames={60}>...</TransitionSeries.Sequence>
<TransitionSeries.Transition {...transitionFade({ durationInFrames: 15 })} />
<TransitionSeries.Sequence durationInFrames={60}>...</TransitionSeries.Sequence>
</TransitionSeries>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| durationInFrames | number | 18 | Overlap duration between scenes. |
| dipTo | string | - | Colour the cut passes through. Omit to crossfade the scenes directly. |
| variant | "linear" | "spring" | "editorial" | "editorial" | Timing curve for the fade. |