# Hairline Open
URL: https://remocn.dev/docs/transitions/hairline-open

A hairline of light draws across the frame and opens like a slit onto the next serif statement

- Install: `npx shadcn@latest add @remocn/hairline-open`
- Vibe: premium
- Natural length: 78f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/hairline-open
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { HairlineOpen } from "@/components/remocn/hairline-open";

const HairlineOpenScene = () => (
  <HairlineOpen
    from="Write the story"
    to="Ship the film"
    accent="#3B5BFD"
  />
);

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

The `from` statement sits on the stage. A hairline of light draws across the middle, shears slightly, then opens like a slit as the outgoing scene splits away, revealing the `to` statement on a soft gradient. Pass `from` and `to` as short text or any React node; it ships light and dark and settles by frame 78.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `from` | `React.ReactNode` | `"Write the story"` | Outgoing statement: a short headline or any React node |
| `to` | `React.ReactNode` | `"Ship the film"` | Incoming statement: a short headline or any React node |
| `accent` | `string` | `"#3B5BFD"` | Accent color used by the scenes |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark stage |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline |

## Use when
- A calm, editorial swap between two statements, such as a plan and its result.
- A premium beat that should feel like a curtain opening rather than a wipe.
- A title-to-title change in a product launch video with a thin line of light as the hinge.

## Don't use when
- You want a screenshot or product scene revealed inside the slit — use `slit-reveal`.
- The opening should be a thick band across the middle — use `band-open`.
- The cut must be fast and energetic — use `flash-sweep`.