Per-Word Crossfade

// 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}
  />
);

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}
  />
);