# Three Steps
URL: https://remocn.dev/docs/typography/three-steps

Three large numerals light up along a line as a dot travels, each with a title and detail.

- Install: `npx shadcn@latest add @remocn/three-steps`
- Vibe: clean
- Natural length: 118f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/three-steps
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ThreeSteps } from "@/components/remocn/three-steps";

const ThreeStepsScene = () => (
  <ThreeSteps
    steps={[
      { title: "Install", detail: "Add a scene with the CLI" },
      { title: "Compose", detail: "Arrange scenes in React" },
      { title: "Render", detail: "Export an MP4" },
    ]}
    outcome="Your launch video, shipped"
  />
);

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

A line draws across the frame and ghost numerals appear, then a dot travels along it, lighting each numeral in a gradient as its title and detail rise in. The final step also shows the `outcome` in serif italic. Pass `steps` as `{ title, detail? }`, an `eyebrow` label, and the `outcome`. It ships light and dark; three steps fit best.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `steps` | `{ title: string; detail?: string }[]` | `DEFAULT_STEPS` | Steps left to right, each with a title and optional detail. |
| `eyebrow` | `string` | `"How it works"` | Small caps label above the line. |
| `outcome` | `string` | `"Your launch video, shipped"` | Serif italic line shown under the last step. |
| `accent` | `string` | `"#3B5BFD"` | Color of the outcome line. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A how-it-works beat that explains the product in three steps, such as install, compose, render.
- A process summary that ends on a single outcome line for the last step.

## Don't use when
- You have a longer feature list that needs rows and a highlight — use `index-list`.
- You want three one-word features with notes and progress ticks — use `feature-trio`.
- The steps should read like indented code lines — use `indent-steps`.