# Column Reflow
URL: https://remocn.dev/docs/typography/column-reflow

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

- Install: `npx shadcn@latest add @remocn/column-reflow`
- Vibe: paper
- Natural length: 90f @ 30fps

## Installation

```bash
npx 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`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `DEFAULT_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` | `number` | `1` | Playback multiplier for the whole timeline. |
| `accent` | `string` | — | Color of the accent word; also tints the glow. |

## Use when
- A beat about layout, responsiveness or editorial typography where the text itself reflows.
- A paragraph that should demonstrate how content adapts to a new width.
- A calm body-text moment with one emphasized word.

## Don't use when
- You need a short punchy headline rather than a paragraph — use `soft-blur-in`.
- You want a paragraph to set itself into a column once — use `tagline-justify`.
- The text should be revealed line by line — use `line-by-line-slide`.