Fade In
Opacity-only entrance for Remotion, with an exit that times itself to the end of its sequence.
PrimitivePrimitives
fade-in30fps · 960×540
Install
$ npx remotion-ui@latest add fade-inAnimates opacity from from to to — no transform, so it composes with anything that already moves.
Pass exit and the element leaves again on the last frame of the surrounding <Sequence>; the exit is shorter than the entrance and accelerates away, because an exit is not an entrance played backwards.
Opacity runs the full duration here; the transform primitives finish theirs at 55% so the element lands solid.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/primitives/fade-in- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: durationInFrames, delayInFrames, spring, exit, 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 { FadeIn } from "@/remotion/primitives/fade-in";
<FadeIn durationInFrames={30} exit>
<div>Hello world</div>
</FadeIn>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | ReactNode | - | Content to animate. |
| durationInFrames | number | 30 | Length of the enter animation in frames. |
| delayInFrames | number | 0 | Frames to wait before the animation starts. |
| spring | "smooth" | "snappy" | "bouncy" | Partial<SpringConfig> | boolean | - | Drive the entrance with a spring instead of the ease-out curve. |
| exit | boolean | false | Animate back out, landing on the last frame of the surrounding Sequence. |
| exitInFrames | number | 70% of durationInFrames | Length of the exit. Exits are shorter than entrances. |
| exitAtInFrames | number | - | Frame the exit starts on, overriding the end-of-window timing. |
| exitTravel | number | 0.6 | Share of the enter distance the exit travels. |
| exitDirection | "reverse" | "continue" | "reverse" | reverse leaves the way it came in, continue carries on through. |
| block | boolean | false | Fill the parent's width instead of shrink-wrapping the child. |
| style | CSSProperties | - | Styles merged onto the wrapper. |
| from | number | 0 | Opacity the fade starts from. |
| to | number | 1 | Opacity the fade settles on. |