Line-by-Line Slide

Installation

$ pnpm dlx shadcn@latest add @remocn/line-by-line-slide

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { LineByLineSlide } from "@/components/remocn/line-by-line-slide";

const LineByLineSlideScene = () => (
  <LineByLineSlide text={"Think different.\nDo more."} distance={48} />
);

export const RemotionRoot = () => (
  <Composition
    id="LineByLineSlide"
    component={LineByLineSlideScene}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
  />
);

The text is split on newline characters into individual lines. Each line slides in from the left, holds steady in the middle of the composition, then slides out to the right—so the duration should leave room for the staggered entry and exit animations.

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:

import { Composition } from "remotion";
import { LineByLineSlide } from "@/components/remocn/line-by-line-slide";
import { Backdrop } from "@/components/remocn/backdrop";

const LineByLineSlideScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <LineByLineSlide text={"Think different.\nDo more."} distance={48} />
  </Backdrop>
);

export const RemotionRoot = () => (
  <Composition
    id="LineByLineSlide"
    component={LineByLineSlideScene}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`text`required	`string`	—	The text to animate. Split on newline characters into lines.
`distance`	`number`	`48`	Horizontal slide distance in pixels each line travels.
`fontSize`	`number`	`72`	Font size in pixels
`fontWeight`	`number`	`600`	CSS font-weight
`color`	`string`	`"#171717"`	Text color (any valid CSS color)
`className`	`string`	—	Optional className passed to the underlying span