# Unmask Line
URL: https://remocn.dev/docs/typography/unmask-line

A monospace line is unmasked letter by letter, 'Out of stealth.', the last word in green

- Install: `npx shadcn@latest add @remocn/unmask-line`
- Vibe: tech
- Natural length: 77f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/unmask-line
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { UnmaskLine } from "@/components/remocn/unmask-line";

const UnmaskLineScene = () => <UnmaskLine lines={["Out of", "stealth."]} highlight={-1} />;

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

Dots appear for each letter, breathe, then open into monospace characters line by line, with the chosen line tinted green. Pass `lines` and `highlight` (a line index; -1 means the last line); it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | `["Out of", "stealth."]` | Lines unmasked letter by letter. |
| `highlight` | `number` | `-1` | Index of the line tinted green; -1 is the last line. |
| `accent` | `string` | — | Accent colour (any CSS colour). |
| `background` | `string` | — | Overrides the theme background colour. |
| `speed` | `number` | `1` | Playback multiplier; above 1 plays faster. |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |

## Use when
- A tech or developer-tool announcement where a monospace line is unmasked letter by letter.
- A status-style reveal, like going live, with the last line tinted green.

## Don't use when
- You want a classic typing cursor — use `typewriter`.
- You want the words to rise in softly — use `staggered-fade-up`.