# Fade Through
URL: https://remocn.dev/docs/typography/fade-through

Old text fades out as new fades in with a soft delay, Material-style

- Install: `npx shadcn@latest add @remocn/fade-through`
- Vibe: clean
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/fade-through
```

## Usage

```tsx
// src/Root.tsx
import { Composition, Sequence } from "remotion";
import { FadeThrough } from "@/components/remocn/fade-through";

const FadeThroughScene = () => (
  <>
    <Sequence durationInFrames={40}>
      <FadeThrough fromText="Calm transitions." toText="Fade through content." />
    </Sequence>
    <Sequence from={40} durationInFrames={40}>
      <FadeThrough fromText="Fade through content." toText="Focus shifts smoothly." />
    </Sequence>
  </>
);

export const RemotionRoot = () => (
  <Composition
    id="FadeThrough"
    component={FadeThroughScene}
    durationInFrames={80}
    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 with a Material-style fade-through. The old phrase fades and lifts away, then the new phrase fades up into the same slot with a soft scale and blur settle—no directional meaning, good for same-level content swaps.

### Chained example

This is the two-`Sequence` chain above rendered on an 80-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 { FadeThrough } from "@/components/remocn/fade-through";
import { Backdrop } from "@/components/remocn/backdrop";

const FadeThroughScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <FadeThrough
      fromText="Calm transitions."
      toText="Fade through content."
    />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `fromText` (required) | `string` | — | The outgoing phrase, shown first then fades out. |
| `toText` (required) | `string` | — | The incoming phrase that fades through 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
- One label, stat, or short phrase needs to swap cleanly into another in the same slot.
- The transition should be neutral and unobtrusive — content changes, nothing moves.
- You're following Material motion guidelines where the gap between out and in reinforces the content change.

## Don't use when
- You want the incoming words to arrive one by one — use `per-word-crossfade` for a sequential word-level fade instead.
- The A→B swap should carry kinetic weight or directional momentum — use `line-by-line-slide` (slide direction) or `blur-out-up` (upward drift).
- There is no outgoing text (first entrance only) — skip the "from" slot and use `micro-scale-fade` or `mask-reveal-up` for a single entrance.