Transition Fade
Fade transition helper for TransitionSeries.
PrimitiveTransitions
transition-fade30fps · 960×540
Install
$ npx remotion-ui@latest add transition-fadeExports 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, 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 | 15 | Overlap duration between scenes. |
| variant | "linear" | "spring" | "editorial" | "editorial" | Timing curve for the fade. |