Factor Out

Three short imperatives stack above a big blue "in your editor."

Installation

$ pnpm dlx shadcn@latest add @remocn/factor-out

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { FactorOut } from "@/components/remocn/factor-out";
 
const FactorOutScene = () => <FactorOut heads={["Write the scenes", "Pick the colors", "Fix the typos"]} tail="in your editor." />;
 
export const RemotionRoot = () => (
  <Composition
    id="FactorOut"
    component={FactorOutScene}
    durationInFrames={190}
    fps={30}
    width={1280}
    height={720}
  />
);

Short imperative lines enter one by one and align, then the shared tail merges out of them: lines collapse one at a time until a single stack sits above a big tail phrase. Pass heads (the repeated beginnings) and tail (the shared ending).

Props6

Prop	Type	Default
heads	string[]DEFAULT_HEADS Short repeated lines that stack, one per row.
tail	stringDEFAULT_TAIL Shared ending shown large after the lines merge.
accent	string— Color of the tail phrase; defaults to the theme accent.
background	string— Stage fill color; pass "transparent" to overlay your own footage.
speed	number1 Playback multiplier for the whole timeline.
theme	"dark" \| "light""dark" Color scheme; ships dark and light.

headsstring[]
Short repeated lines that stack, one per row.
DefaultDEFAULT_HEADS
tailstring
Shared ending shown large after the lines merge.
DefaultDEFAULT_TAIL
accentstring
Color of the tail phrase; defaults to the theme accent.
backgroundstring
Stage fill color; pass "transparent" to overlay your own footage.
speednumber
Playback multiplier for the whole timeline.
Default1
theme"dark" | "light"
Color scheme; ships dark and light.
Default"dark"