Turnabout

One sentence turns into its mirror image as words flip, ending with an accent-colored phrase.

Installation

$ pnpm dlx shadcn@latest add @remocn/turnabout

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { Turnabout } from "@/components/remocn/turnabout";
 
const TurnaboutScene = () => (
  <Turnabout before="You work for the video." after="The video works for you." highlight="you." />
);
 
export const RemotionRoot = () => (
  <Composition
    id="Turnabout"
    component={TurnaboutScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

The before sentence enters word by word, then turns into the after sentence while shared words travel to their new spots. The highlight phrase in after lights up in the accent color. It ships in light and dark through the theme prop.

Props7

Prop	Type	Default
before	string"You work for the video." Opening sentence.
after	string"The video works for you." Sentence it turns into.
highlight	string"you." Phrase inside `after` lit in the accent color.
accent	string— Accent color override; falls back to the theme accent.
background	string— Background color override; falls back to the theme background.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Ships light and dark; picks the palette.

beforestring
Opening sentence.
Default"You work for the video."
afterstring
Sentence it turns into.
Default"The video works for you."
highlightstring
Phrase inside `after` lit in the accent color.
Default"you."
accentstring
Accent color override; falls back to the theme accent.
backgroundstring
Background color override; falls back to the theme background.
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Ships light and dark; picks the palette.
Default"dark"