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

tsx

// 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}
  />
);

Props8

Prop	Type	Default
textrequired	string— The text to animate. Split on spaces into words.
staggerDelay	number4 Frames between the start of each word's animation
distance	number20 Vertical distance in pixels each word travels upward
fontSize	number72 Font size in pixels
fontWeight	number600 CSS font-weight
color	string"#171717" Text color (any valid CSS color)
speed	number1 Playback speed multiplier (1 = normal, 2 = twice as fast)
className	string— Optional className passed to the underlying span

textrequiredstring
The text to animate. Split on spaces into words.
staggerDelaynumber
Frames between the start of each word's animation
Default4
distancenumber
Vertical distance in pixels each word travels upward
Default20
fontSizenumber
Font size in pixels
Default72
fontWeightnumber
CSS font-weight
Default600
colorstring
Text color (any valid CSS color)
Default"#171717"
speednumber
Playback speed multiplier (1 = normal, 2 = twice as fast)
Default1
classNamestring
Optional className passed to the underlying span