Word Stack
Caps words push up into a tight poster stack, and the last one turns into a serif gradient italic
$ pnpm dlx shadcn@latest add @remocn/word-stackUsage
// src/Root.tsx
import { Composition } from "remotion";
import { WordStack } from "@/components/remocn/word-stack";
const WordStackScene = () => (
<WordStack words={["Write", "it", "once", "ship", "it", "everywhere"]} />
);
export const RemotionRoot = () => (
<Composition
id="WordStack"
component={WordStackScene}
durationInFrames={140}
fps={30}
width={1280}
height={720}
/>
);Each word pushes in from below on its own beat, and the earlier words in the stack shift up and out to make room. The last word swaps to a serif italic with a gradient sheen that slowly drifts while the poster holds. Pass words as a list of short words; it ships light and dark through theme.
Props4
| Prop | Type | Default |
|---|---|---|
| words | string[]— Words pushed into the stack in order; the last one turns serif italic. | |
| accent | string"#3B5BFD" Accent color mixed into the closing word's gradient. | |
| theme | "dark" | "light""dark" Ships light and dark. | |
| speed | number1 Playback speed multiplier. | |
- wordsstring[]
Words pushed into the stack in order; the last one turns serif italic.
- accentstring
Accent color mixed into the closing word's gradient.
Default
"#3B5BFD" - theme"dark" | "light"
Ships light and dark.
Default
"dark" - speednumber
Playback speed multiplier.
Default
1