# Scan Reveal
URL: https://remocn.dev/docs/typography/scan-reveal

A scan line reveals a headline over an underline with a small subtitle below

- Install: `npx shadcn@latest add @remocn/scan-reveal`
- Vibe: premium
- Natural length: 107f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/scan-reveal
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ScanReveal } from "@/components/remocn/scan-reveal";

const ScanRevealScene = () => (
  <ScanReveal title="Built frame by frame" subtitle="Launch films from components you own." />
);

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

Guide marks appear, a scan line travels down to reveal the headline, then it moves up and parks while the subtitle fades in beneath. Pass `title` and `subtitle`; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Built frame by frame"` | The headline revealed by the scan. |
| `subtitle` | `string` | `"Launch films from components you own."` | One-line subtitle under the headline. |
| `accent` | `string` | `"#3B5BFD"` | Accent colour (any CSS colour). |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |
| `speed` | `number` | `1` | Playback multiplier; above 1 plays faster. |

## Use when
- A section title where a scan line sweeps down and reveals the headline over an underline.
- A short opener with a headline and one-line subtitle, in a precise, technical tone.

## Don't use when
- You need several headlines in sequence — use `rewrite-bars`.
- You want a soft blurred entrance instead of a scan — use `focus-blur-resolve`.