Layout Swap

Headlines swap by shifting layout, each new line growing out of the one before.

Installation

$ pnpm dlx shadcn@latest add @remocn/layout-swap

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { LayoutSwap } from "@/components/remocn/layout-swap";
 
const LayoutSwapScene = () => (
  <LayoutSwap headlines={["Animations.", "Animations, transitions, backgrounds."]} highlight="backgrounds." align="left" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="LayoutSwap"
    component={LayoutSwapScene}
    durationInFrames={170}
    fps={30}
    width={1280}
    height={720}
  />
);

Each headline in headlines replaces the last by sliding its shared words into the new layout, and the highlight phrase lands in the accent color. Pass headlines and tune hold and move for pacing. It ships in light and dark through the theme prop.

Props9

Prop	Type	Default
headlines	string[]— Headlines in order; each builds on the previous.
highlight	string"ready to install." Phrase in the last headline lit in the accent color.
align	"center" \| "left""center" Text alignment of the headline block.
hold	number28 Frames each headline holds before moving.
move	number28 Frames the layout shift between headlines takes.
accent	string"#3B5BFD" 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.

headlinesstring[]
Headlines in order; each builds on the previous.
highlightstring
Phrase in the last headline lit in the accent color.
Default"ready to install."
align"center" | "left"
Text alignment of the headline block.
Default"center"
holdnumber
Frames each headline holds before moving.
Default28
movenumber
Frames the layout shift between headlines takes.
Default28
accentstring
Accent color override; falls back to the theme accent.
Default"#3B5BFD"
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"