Staggered Fade Up

Words slide up and fade in sequentially with a wave-like cascade

Installation

$ pnpm dlx shadcn@latest add @remocn/staggered-fade-up

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { StaggeredFadeUp } from "@/components/remocn/staggered-fade-up";

const StaggeredFadeUpScene = () => (
  <StaggeredFadeUp text="Ship videos faster" staggerDelay={4} />
);

export const RemotionRoot = () => (
  <Composition
    id="StaggeredFadeUp"
    component={StaggeredFadeUpScene}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

PropTypeDefaultDescription
textrequired
stringThe text to animate. Split on spaces into words.
staggerDelay
number4Frames between the start of each word's animation
distance
number20Vertical distance in pixels each word travels upward
fontSize
number72Font size in pixels
fontWeight
number600CSS font-weight
color
string"#171717"Text color (any valid CSS color)
speed
number1Playback speed multiplier (1 = normal, 2 = twice as fast)
className
stringOptional className passed to the underlying span