# Moves Up
URL: https://remocn.dev/docs/typography/moves-up

A roadmap list under Now, Next and Later where each shipped item exits and the rest move up and grow.

- Install: `npx shadcn@latest add @remocn/moves-up`
- Vibe: clean
- Natural length: 152f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/moves-up
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { MovesUp } from "@/components/remocn/moves-up";

const MovesUpScene = () => (
  <MovesUp
    items={["Captions", "Voiceover", "Vertical cuts", "Brand kits", "Templates"]}
    shipped="live"
  />
);

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

The first three `items` settle under the Now, Next and Later labels at descending sizes. Every item past the third then advances the queue: the current Now item gets a `shipped` tag and exits upward while the others move up and enlarge. Pass five or more `items` to see movement; timing adapts to the composition length, and 152 frames is the uncompressed length for five items. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `items` | `string[]` | `DEFAULT_ITEMS` | Roadmap items in order; the first three show, the rest queue behind them. |
| `labels` | `[string, string, string]` | `["Now", "Next", "Later"]` | Three row labels, for the current, next and later rows. |
| `shipped` | `string` | `"shipped"` | Tag shown beside an item as it ships. |
| `accent` | `string` | — | Color of the Now label and the shipped tag. |
| `background` | `string` | — | Background fill; pass "transparent" to drop it. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A roadmap beat showing what is shipping now and what is coming next.
- A changelog or progress moment where finished items should visibly leave and the queue advances.

## Don't use when
- Items are unfinished verbs that fill in and carry dates — use `half-built`.
- You want a column of claims that dim until one is highlighted — use `what-sticks`.
- A scrolling list of changes with one enlarged entry is enough — use `changelog-scroll`.