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-letters

Usage

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

PropTypeDefault
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.

    Default1