# Torn Edge
URL: https://remocn.dev/docs/typography/torn-edge

A torn paper sheet rips away to reveal a bold headline printed on the gradient stage

- Install: `npx shadcn@latest add @remocn/torn-edge`
- Vibe: paper
- Natural length: 76f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/torn-edge
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { TornEdge } from "@/components/remocn/torn-edge";

const TornEdgeScene = () => <TornEdge title="Make it yours." accent="#3B5BFD" />;

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

A gradient paper sheet tears across the frame, the halves part, and the headline is printed on the stage underneath. Pass `title` and `accent` (the mid colour of the sheet gradient); it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Make it yours."` | Headline printed on the stage underneath the sheet. |
| `accent` | `string` | `"#3B5BFD"` | Mid colour of the sheet's gradient (gradients.sh "fluted"). |
| `speed` | `number` | `1` | Playback multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |

## Use when
- A reveal that rips a paper sheet away to show a bold headline underneath.
- A tactile, handmade moment between more polished scenes.

## Don't use when
- You want a clean wipe with no paper texture — use `slash-wipe`.
- You want a soft fade into the headline — use `fade-through`.