Layered Cutout

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

Installation

$ pnpm dlx 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.

Props7

Prop	Type	Default
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	number5 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	number1 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

taglinestring
Small line under the logo; pass an empty string to hide
Default"Launch films, cut from components."
logoReact.ReactNode
Replaces the Remocn logo on the core sheet
layersnumber
Number of cut sheets in front of the core, 4 to 6
Default5
accentLayernumber
Which sheet, 0 at the front, is cut from gradient paper
speednumber
Playback multiplier for the whole timeline
Default1
theme"dark" | "light"
Light card stock or dark charcoal stock
Default"light"
accentstring
Accepted for parity; the gradient paper is the accent