Column Reflow

A justified paragraph reflows its column width, redistributing lines with even word spacing

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { ColumnReflow } from "@/components/remocn/column-reflow";
 
const ColumnReflowScene = () => <ColumnReflow text="Good motion starts with good typography." accentWord="typography" direction="widen" />;
 
export const RemotionRoot = () => (
  <Composition
    id="ColumnReflow"
    component={ColumnReflowScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

A justified serif paragraph sits in a column, then the column widens (or narrows) while words glide to new lines and the spacing is redistributed evenly, ending with one accent word in italic. Pass text, accentWord and direction.

Props6

Prop	Type	Default
text	stringDEFAULT_TEXT The paragraph to set and reflow.
accentWord	string"room" Word set in accent color and italic.
direction	"widen" \| "narrow""widen" Whether the column starts narrow and widens, or the reverse.
theme	"dark" \| "light""dark" Color scheme; ships dark and light.
speed	number1 Playback multiplier for the whole timeline.
accent	string— Color of the accent word; also tints the glow.

textstring
The paragraph to set and reflow.
DefaultDEFAULT_TEXT
accentWordstring
Word set in accent color and italic.
Default"room"
direction"widen" | "narrow"
Whether the column starts narrow and widens, or the reverse.
Default"widen"
theme"dark" | "light"
Color scheme; ships dark and light.
Default"dark"
speednumber
Playback multiplier for the whole timeline.
Default1
accentstring
Color of the accent word; also tints the glow.