Column Slide

Vertical columns slide across in a stagger and swap one headline for another

Installation

$ pnpm dlx shadcn@latest add @remocn/column-slide

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { ColumnSlide } from "@/components/remocn/column-slide";
 
const ColumnSlideScene = () => (
  <ColumnSlide
    from="Plan the launch"
    to="Launch day"
    columns={5}
    accent="#3B5BFD"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="ColumnSlide"
    component={ColumnSlideScene}
    durationInFrames={96}
    fps={30}
    width={1280}
    height={720}
  />
);

The from headline sits on the stage. Between 3 and 7 vertical columns, set by columns, then slide across in a stagger, each carrying a slice of both headlines, and the new scene settles with a slight scale-down. Pass from and to as short strings; it ships light and dark and the move finishes at frame 66.

Props6

Prop	Type	Default
from	string"Plan the launch" Outgoing headline
to	string"Launch day" Incoming headline
columns	number5 Number of vertical columns, clamped between 3 and 7
accent	string"#3B5BFD" Accent color used by the scenes
theme	"dark" \| "light""dark" Light or dark stage
speed	number1 Playback multiplier for the whole timeline

fromstring
Outgoing headline
Default"Plan the launch"
tostring
Incoming headline
Default"Launch day"
columnsnumber
Number of vertical columns, clamped between 3 and 7
Default5
accentstring
Accent color used by the scenes
Default"#3B5BFD"
theme"dark" | "light"
Light or dark stage
Default"dark"
speednumber
Playback multiplier for the whole timeline
Default1