# Line-by-Line Slide
URL: https://remocn.dev/docs/typography/line-by-line-slide

Each line slides in from the left with a staggered flow then exits to the right

- Install: `npx shadcn@latest add @remocn/line-by-line-slide`
- Vibe: clean
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/line-by-line-slide
```

## Usage

```tsx
// 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:

```tsx
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 |

## Use when
- A multi-line headline or short paragraph needs a flowing, line-by-line entrance with a matching exit.
- Directional slide motion (left-in / right-out) should underscore the reading rhythm of the text.
- A body-copy-style reveal is needed for bullet points or list items staged as stacked lines.

## Don't use when
- The text is a single short phrase — the stagger has nothing to stage; use `mask-reveal-up` or `per-character-rise` for single-line reveals instead.
- The reveal should move upward rather than slide horizontally — use `mask-reveal-up` (upward, masked) or `blur-out-up` (upward, blurred exit).
- The lines should not exit — this component slides lines out to the right; for a hold-in-place reveal, use `mask-reveal-up`.