Stack Letters
Letters tumble and stack into place to spell a caps word over a warm gradient
Installation
$ pnpm dlx shadcn@latest add @remocn/stack-lettersUsage
tsx
// src/Root.tsx
import { Composition } from "remotion";
import { StackLetters } from "@/components/remocn/stack-letters";
const StackLettersScene = () => <StackLetters word="SHIPPED" accent="#3B5BFD" />;
export const RemotionRoot = () => (
<Composition
id="StackLetters"
component={StackLettersScene}
durationInFrames={135}
fps={30}
width={1280}
height={720}
/>
);Letters drop in one by one and stack into a tower, which rocks and topples; each letter then tumbles and lands in a row that spells the word, ticking a ground rule as it lands. Pass word (a short caps word works best) and accent.
Props4
| Prop | Type | Default |
|---|---|---|
| word | string"STACK" The word to stack; short caps words fit best. | |
| accent | string"#3B5BFD" Color of the landing ticks on the ground rule. | |
| theme | "dark" | "light""dark" Color scheme; ships dark and light. | |
| speed | number1 Playback multiplier for the whole timeline. | |
- wordstring
The word to stack; short caps words fit best.
Default
"STACK" - accentstring
Color of the landing ticks on the ground rule.
Default
"#3B5BFD" - theme"dark" | "light"
Color scheme; ships dark and light.
Default
"dark" - speednumber
Playback multiplier for the whole timeline.
Default
1