Bottom-Up Letters

Letters rise from below in a pronounced staircase, one symbol at a time

Installation

$ pnpm dlx shadcn@latest add @remocn/bottom-up-letters

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { BottomUpLetters } from "@/components/remocn/bottom-up-letters";
 
const BottomUpLettersScene = () => (
  <BottomUpLetters text="Shift" staggerDelay={3} distance={46} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="BottomUpLetters"
    component={BottomUpLettersScene}
    durationInFrames={60}
    fps={30}
    width={1280}
    height={720}
  />
);

With Backdrop

The component renders transparent — supply the background via Backdrop. It ships single-theme; edit the copied file to re-theme colors.

Pair with Backdrop to place the text inside a full-frame fill with a rounded, shadowed content frame:

tsx

import { Composition } from "remotion";
import { BottomUpLetters } from "@/components/remocn/bottom-up-letters";
import { Backdrop } from "@/components/remocn/backdrop";
 
const BottomUpLettersScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <BottomUpLetters text="Shift" staggerDelay={3} distance={46} />
  </Backdrop>
);
 
export const RemotionRoot = () => (
  <Composition
    id="BottomUpLetters"
    component={BottomUpLettersScene}
    durationInFrames={60}
    fps={30}
    width={1280}
    height={720}
  />
);

Props7

Prop	Type	Default
textrequired	string— The text to reveal
staggerDelay	number3 Per-character delay in frames. Larger values make the staircase more pronounced.
distance	number46 Vertical travel in pixels each letter rises from. Animates to 0.
fontSize	number72 Font size in pixels
fontWeight	number600 CSS font-weight
color	string"#171717" Text color (any valid CSS color)
className	string— Optional className passed to the underlying span

textrequiredstring
The text to reveal
staggerDelaynumber
Per-character delay in frames. Larger values make the staircase more pronounced.
Default3
distancenumber
Vertical travel in pixels each letter rises from. Animates to 0.
Default46
fontSizenumber
Font size in pixels
Default72
fontWeightnumber
CSS font-weight
Default600
colorstring
Text color (any valid CSS color)
Default"#171717"
classNamestring
Optional className passed to the underlying span