Per-Word Crossfade

Installation

$ pnpm dlx shadcn@latest add @remocn/per-word-crossfade

Usage

// 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 Sequences 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:

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