# Layered Cutout
URL: https://remocn.dev/docs/camera/layered-cutout

The camera dollies through layered cut sheets of paper to land on a framed logo and tagline

- Install: `npx shadcn@latest add @remocn/layered-cutout`
- Vibe: paper
- Natural length: 140f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/layered-cutout
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { LayeredCutout } from "@/components/remocn/layered-cutout";

const LayeredCutoutScene = () => (
  <LayeredCutout
    tagline="Launch films, cut from components."
    layers={5}
    theme="light"
  />
);

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

Between 4 and 6 cut sheets part in depth while the camera pushes through them. The innermost sheet, cut from gradient paper, ends up framing the core, where the logo and the `tagline` surface. Pass a `logo` node and your `tagline`; it ships light (card stock) and dark (charcoal) and the camera move ends at frame 140.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `tagline` | `string` | `"Launch films, cut from components."` | Small line under the logo; pass an empty string to hide |
| `logo` | `React.ReactNode` | — | Replaces the Remocn logo on the core sheet |
| `layers` | `number` | `5` | Number of cut sheets in front of the core, 4 to 6 |
| `accentLayer` | `number` | — | Which sheet, 0 at the front, is cut from gradient paper |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline |
| `theme` | `"dark" \| "light"` | `"light"` | Light card stock or dark charcoal stock |
| `accent` | `string` | — | Accepted for parity; the gradient paper is the accent |

## Use when
- A logo or brand reveal that should feel tactile and dimensional, like paper cut by hand.
- A closing or opening card for a launch video with a calm camera move and no UI.
- You want a premium intro where the depth comes from stacked sheets rather than a 3D scene.

## Don't use when
- You need a landscape of depth layers with a sideways truck — use `parallax-depth`.
- The effect should be a vertigo stretch, not a push through openings — use `dolly-zoom`.
- The reveal should happen on a product screenshot — use `stage`.