Fade Out
Held exit that accelerates away, timed to the last frame of its sequence.
PrimitivePrimitives
fade-out30fps · 960×540
Install
$ npx remotion-ui@latest add fade-outHolds, then leaves on an ease-in curve.
Leave delayInFrames out and the fade lands on the last frame of the surrounding <Sequence> — one less number to keep in sync when the window changes.
Uses an ease-in curve — an exit accelerates away, it never decelerates into nothing.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/primitives/fade-out- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: durationInFrames, delayInFrames, from, to, 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 { FadeOut } from "@/remotion/primitives/fade-out";
<FadeOut durationInFrames={24}>
<div>Goodbye</div>
</FadeOut>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | ReactNode | - | Content to fade away. |
| durationInFrames | number | 30 | Length of the fade in frames. |
| delayInFrames | number | end of the sequence | Frame the fade starts on. Omitted, it lands on the last frame of the surrounding Sequence. |
| from | number | 1 | Opacity held before the fade. |
| to | number | 0 | Opacity it ends on. |
| block | boolean | false | Fill the parent's width instead of shrink-wrapping. |
| style | CSSProperties | - | Styles merged onto the wrapper. |