# Indent Steps
URL: https://remocn.dev/docs/typography/indent-steps

Up to five lines rise in, each tabbing one step further right like indented code, then one word lights up.

- Install: `npx shadcn@latest add @remocn/indent-steps`
- Vibe: tech
- Natural length: 80f @ 30fps

## Installation

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

## Usage

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

const IndentStepsScene = () => (
  <IndentSteps
    lines={["Fork the scene.", "Change the props.", "Render tonight."]}
    highlight="tonight"
  />
);

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

Each line rises from a mask and tabs one step further right with a small snap and a guide line, with optional line numbers in the gutter. Once the last line lands, the `highlight` word fills with a gradient. Pass up to five `lines`; set `exit` to outdent and slide them out over the last 18 frames. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | — | Up to five lines, each indented one step more than the last. |
| `highlight` | `string` | `"tonight"` | Word or phrase that turns to a gradient at the end; case-insensitive. |
| `lineNumbers` | `boolean` | `true` | Show a mono line-number gutter beside the lines. |
| `exit` | `boolean` | `false` | Outdent and slide the lines out during the final 18 frames. |
| `accent` | `string` | `"#3B5BFD"` | Color of the guide line that flashes after each tab. |
| `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 write, render, ship sequence that should read like steps in an editor.
- A short developer-facing tagline where the last word is the payoff and gets a gradient.

## Don't use when
- The lines should be typed out character by character — use `typewriter`.
- Lines should read as commented-out code being switched on — use `uncomment-line`.
- You want a numbered feature list with a moving highlight row — use `index-list`.