# Slit Scan
URL: https://remocn.dev/docs/typography/slit-scan

A word is slit-scanned into view through fluted slices, with a speed stat in the caption

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

## Installation

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

## Usage

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

const SlitScanScene = () => (
  <SlitScan word="Faster." caption="First render in 1.8s, down from 4.7s" />
);

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

A word streaks through vertical fluted slices and resolves into clean type, then a caption with a stat fades in under it. Pass `word`, `caption` and `slices`; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `word` | `string` | `"Faster."` | The word that resolves from the scan. |
| `caption` | `string` | `"First render in 1.8s, down from 4.7s"` | Stat line under the word. |
| `slices` | `number` | `120` | Number of vertical slices in the scan. |
| `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 speed or performance claim where a single word resolves out of a streaked, fluted blur.
- A benchmark beat with a one-line stat caption under the word.

## Don't use when
- You want the word to slow down on a key syllable — use `speed-ramp-word`.
- The word should resolve from a plain blur — use `focus-blur-resolve`.