# Per-Word Crossfade
URL: https://remocn.dev/docs/typography/per-word-crossfade

One phrase fades out as the next fades in, word by word

- Install: `npx shadcn@latest add @remocn/per-word-crossfade`
- Vibe: clean
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/per-word-crossfade
```

## Usage

```tsx
// src/Root.tsx
import { Composition, Sequence } from "remotion";
import { PerWordCrossfade } from "@/components/remocn/per-word-crossfade";

const PerWordCrossfadeScene = () => (
  <>
    <Sequence durationInFrames={50}>
      <PerWordCrossfade fromText="Beautifully simple." toText="Designed for focus." />
    </Sequence>
    <Sequence from={50} durationInFrames={50}>
      <PerWordCrossfade fromText="Designed for focus." toText="Built for people." />
    </Sequence>
  </>
);

export const RemotionRoot = () => (
  <Composition
    id="PerWordCrossfade"
    component={PerWordCrossfadeScene}
    durationInFrames={100}
    fps={30}
    width={1280}
    height={720}
  />
);
```

Chaining two instances in back-to-back `Sequence`s walks through a full phrase chain — the second transition reuses the first's `toText` as its `fromText`, so the text flows A → B → C. The component transitions from one phrase to another, word by word. The fromText words drift up and fade out while the toText words fade in from below, overlapping for a calm keynote-style swap.

### Chained example

This is the two-`Sequence` chain above rendered on a 100-frame timeline:

### 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 { PerWordCrossfade } from "@/components/remocn/per-word-crossfade";
import { Backdrop } from "@/components/remocn/backdrop";

const PerWordCrossfadeScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <PerWordCrossfade
      fromText="Beautifully simple."
      toText="Designed for focus."
    />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `fromText` (required) | `string` | — | The outgoing phrase, shown first then exits. |
| `toText` (required) | `string` | — | The incoming phrase that fades in to replace it. |
| `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 wrapper |

## Use when
- Two short phrases need to swap with a soft, word-by-word transition that reads as calm and composed.
- A keynote-style slide replacement is needed — the sequential word drift matches presentation pacing.
- The A→B content change should feel deliberate but unhurried, with the crossfade reinforcing continuity.

## Don't use when
- The transition should be a single-block fade with no word-level staging — use `fade-through` for a unified opacity swap instead.
- You want the incoming words to build upward or slide in rather than drift-and-fade — use `line-by-line-slide` or `mask-reveal-up` for directional entrances.
- There is no outgoing text (first entrance only) — use `micro-scale-fade` or `per-character-rise` for a standalone reveal without a `fromText`.
- The phrases are spoken subtitles timed to audio — use `caption-subtitle` or another caption style, which pages a real transcript.