# Centered Word Build
URL: https://remocn.dev/docs/typography/centered-word-build

Words appear sharply from below while the centered phrase pushes closer on every beat

- Install: `npx shadcn@latest add @remocn/centered-word-build`
- Vibe: clean
- Natural length: 63f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/centered-word-build
```

## Usage

The visible prefix is laid out as one centered line. Each word becomes fully visible on a hard cut `rise` em below the baseline and settles upward over `settleFrames`; opacity is never animated. In the same frame, the whole phrase starts another cumulative `zoomStep` push-in and holds the closer scale until the next word. The first two word gaps establish the rhythm; later gaps are multiplied by `accel` to tighten the cadence. At `exitAt`, a broad opacity mask wipes through the completed phrase from left to right. All timings were measured frame-by-frame from the reference footage.

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { CenteredWordBuild } from "@/components/remocn/centered-word-build";

const CenteredWordBuildScene = () => (
  <CenteredWordBuild text="everything we learn from" />
);

export const RemotionRoot = () => (
  <Composition
    id="CenteredWordBuild"
    component={CenteredWordBuildScene}
    durationInFrames={75}
    fps={30}
    width={1280}
    height={720}
  />
);
```

### With Backdrop

The component is transparent. Add the scene color separately with `Backdrop`; the reference pairs warm white text with an orange radial glow.

```tsx
import { Composition } from "remotion";
import { CenteredWordBuild } from "@/components/remocn/centered-word-build";
import { Backdrop } from "@/components/remocn/backdrop";

const CenteredWordBuildScene = () => (
  <Backdrop
    fill={{
      type: "gradient",
      value:
        "radial-gradient(circle at 50% 108%, #ffd77a 0%, #ff6840 31%, #f13d21 78%)",
    }}
  >
    <CenteredWordBuild text="everything we learn from" />
  </Backdrop>
);

export const RemotionRoot = () => (
  <Composition
    id="CenteredWordBuild"
    component={CenteredWordBuildScene}
    durationInFrames={75}
    fps={30}
    width={1280}
    height={720}
  />
);
```

### Syncing

With the defaults, a four-word phrase reveals on frames 0, 11, 22, and 30, reaching cumulative scales of 1, 1.035, 1.07, and 1.105. The exported `centeredWordBuildLength(text, wordGap, accel, settleFrames, exitAt, exitFrames)` helper returns the frame on which all motion finishes.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The phrase to build word by word |
| `fontSize` | `number` | `52` | Font size in pixels |
| `color` | `string` | `"#fff3df"` | Text color (any valid CSS color) |
| `fontWeight` | `number` | `400` | CSS font-weight |
| `wordGap` | `number` | `11` | Frames between each of the first two word additions |
| `accel` | `number` | `0.75` | Multiplier applied to each later word gap; lower values accelerate more strongly |
| `rise` | `number` | `0.18` | Starting vertical offset of each new word in em |
| `zoomStep` | `number` | `0.035` | Cumulative scale added to the whole visible phrase after each new word |
| `settleFrames` | `number` | `9` | Frames used by the synchronized word rise and whole-phrase push-in |
| `exitAt` | `number` | `51` | Frame on which the left-to-right opacity wipe begins |
| `exitFrames` | `number` | `12` | Duration of the opacity wipe in frames |
| `speed` | `number` | `1` | Playback speed multiplier |
| `className` | `string` | — | Optional className passed to the text span |

## Use when
- A short statement should assemble one word at a time while every visible prefix stays centered and pushes closer.
- You want beat-synced typography where words appear sharply but still travel up into place.
- The completed line should leave through a soft left-to-right opacity wipe.

## Don't use when
- Each new word should physically drive the existing line aside — use `word-push`.
- Words should replace one another in the same fixed slot — use `per-word-crossfade`.
- You need character-by-character input with a caret — use `typewriter`.