This component no longer exists. It was in remotionui’s manifest when we first indexed it and is not there now — the registry served its inventory on 2026-08-11 and this item was not on it. The install command below will fail. It is kept here because a tutorial somewhere still tells people to run it.

fade-in

remotionui/fade-in

RemovedComponent

Opacity-only entrance, with an exit that lands on the end of its sequence

Live preview

live · rendered by the registry

Rendered by remotionui on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://remotionui.com/r/fade-in.json

Source

registry/bases/default/primitives/fade-in.tsxremotionui.com/r/fade-in.json

1import { interpolate } from "remotion";
2import {
3  useEnterExit,
4  type MotionPrimitiveProps,
5} from "@/remotion/lib/motion-primitive";
6import { MotionWrapper } from "@/remotion/lib/motion-wrapper";
7 
8export type FadeInProps = MotionPrimitiveProps & {
9  /** Opacity the fade starts from. */
10  from?: number;
11  /** Opacity the fade settles on. */
12  to?: number;
13};
14 
15/**
16 * Opacity alone — no transform, so it composes with anything already moving.
17 *
18 * The curve spends the whole duration here instead of leading it the way the
19 * transform primitives do: with nothing travelling underneath, a fade that
20 * finishes early just reads as a short fade.
21 */
22export const FadeIn: React.FC<FadeInProps> = ({
23  children,
24  from = 0,
25  to = 1,
26  block,
27  style,
28  className,
29  ...motionProps
30}) => {
31  const { motion } = useEnterExit(motionProps);
32  const opacity = interpolate(motion, [0, 1], [from, to], {
33    extrapolateLeft: "clamp",
34    extrapolateRight: "clamp",
35  });
36 
37  return (
38    <MotionWrapper block={block} className={className} style={{ ...style, opacity }}>
39      {children}
40    </MotionWrapper>
41  );
42};