Per Character Rise

Letters slide up from below with no blur - crisp and kinetic

Installation
$ pnpm dlx shadcn@latest add @remocn/per-character-rise

Usage

tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PerCharacterRise } from "@/components/remocn/per-character-rise";
 
const PerCharacterRiseScene = () => (
  <PerCharacterRise text="One more thing." distance={32} fontSize={72} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="PerCharacterRise"
    component={PerCharacterRiseScene}
    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 { PerCharacterRise } from "@/components/remocn/per-character-rise";
import { Backdrop } from "@/components/remocn/backdrop";
 
const PerCharacterRiseScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <PerCharacterRise text="One more thing." distance={32} fontSize={72} />
  </Backdrop>
);
 
export const RemotionRoot = () => (
  <Composition
    id="PerCharacterRise"
    component={PerCharacterRiseScene}
    durationInFrames={60}
    fps={30}
    width={1280}
    height={720}
  />
);

Props6

PropTypeDefault
textrequired
string—

The text to reveal

distance
number32

Vertical travel in pixels each character 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

  • distancenumber

    Vertical travel in pixels each character rises from. Animates to 0.

    Default32

  • 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