# Aspect Slit
URL: https://remocn.dev/docs/typography/aspect-slit

A film-title card opens through a slit, with a serif hero line and a small caption

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

## Installation

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

## Usage

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

const AspectSlitScene = () => <AspectSlit title="Now showing." caption="A launch film, built in React." slit={0.125} />;

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

Letterbox bars close to a thin slit, a serif title rises into it, then the bars open back to full frame as the title grows to hero size and a small caption settles underneath. Pass `title`, `caption` and `slit` (the narrowest bar gap as a share of frame height).

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Now showing."` | Short title. It first appears inside the slit, then grows to hero size. |
| `caption` | `string` | `"A launch film, built in React."` | Small line under the hero title. Pass "" to hide. |
| `slit` | `number` | `0.125` | Height of the narrowest slit, as a share of the frame height. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for the background light and the title full stop. |
| `speed` | `number` | `1` | Playback multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |

## Use when
- A film-style title card for a product launch or release announcement.
- An opening beat that frames the video as a feature film.
- A short serif title with a one-line caption.

## Don't use when
- You want a clean text reveal without letterbox bars — use `soft-blur-in`.
- The title needs a gradient or dramatic camera move — use `macro-pan`.
- You need a title that appears through a fluted scan — use `slit-scan`.