Staggered Fade Up
Words slide up and fade in sequentially with a wave-like cascade
Installation
$ pnpm dlx shadcn@latest add @remocn/staggered-fade-upUsage
// 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
| Prop | Type | Default | Description |
|---|---|---|---|
textrequired | string | — | The text to animate. Split on spaces into words. |
staggerDelay | number | 4 | Frames between the start of each word's animation |
distance | number | 20 | Vertical distance in pixels each word travels upward |
fontSize | number | 72 | Font size in pixels |
fontWeight | number | 600 | CSS font-weight |
color | string | "#171717" | Text color (any valid CSS color) |
speed | number | 1 | Playback speed multiplier (1 = normal, 2 = twice as fast) |
className | string | — | Optional className passed to the underlying span |