# Half Built
URL: https://remocn.dev/docs/typography/half-built

A sentence of unfinished verbs shows each one as an outline that fills in as it ships.

- Install: `npx shadcn@latest add @remocn/half-built`
- Vibe: clean
- Natural length: 116f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/half-built
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { HalfBuilt } from "@/components/remocn/half-built";

const HalfBuiltScene = () => (
  <HalfBuilt parts={[{ text: "It cuts," }, { text: "captions,", when: "Spring" }, { text: "narrates", when: "Summer" }]} progress={1.6} />
);

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

Each part of the sentence starts hollow and fills in as `progress` advances, with optional season tags such as Summer or Later marking what is planned. Pass `parts` and set `progress` to choose how far the roadmap has filled. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `parts` | `HalfBuiltPart[]` | `DEFAULT_PARTS` | Sentence parts as `{ text, when? }`; `when` adds a season tag. |
| `progress` | `number` | `1.6` | How many parts are filled in by the end; fractions fill partially. |
| `accent` | `string` | — | Accent color override; falls back to the theme accent. |
| `background` | `string` | — | Background color override; falls back to the theme background. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |

## Use when
- A roadmap beat showing what the product does now and what is coming.
- An honest status scene where some capabilities are shipped and others are planned.
- A build-in-public update that tags features by season.

## Don't use when
- Everything is shipped and you want a recap — use `week-shipped`.
- You want items listed as chips rather than inline words — use `feature-chips-flow`.
- You want text to appear complete word by word — use `word-insert`.