Cut Lockup — Remotion logo reveal with hard cuts

Q: How do I add Cut Lockup to a Remotion project?

Run npx shadcn@latest add @snapcn/cut-lockup. The source is copied into components/snap-cn/ (or wherever your components.json points) with anything it depends on, and you own the code from then on — there is no runtime package to keep installed.

Q: What do I need before using Cut Lockup?

An existing Remotion project (npx create-video@latest) with a components.json. shadcn init does not recognise Remotion, so the installation guide has you write that file by hand — it takes two minutes. The component is MIT licensed and free.

Installation

$ pnpm dlx shadcn@latest add @snapcn/cut-lockup

Needs an existing Remotion project and a components.json. Two-minute setup if this is your first snapcn component.

Component code

The exact file shadcn add copies into your project.

Usage

Cut Lockup paints its own background and runs 108 frames at 30fps. Every cut, scale, push and the wipe are measured frame by frame off a reference recording; each one is a prop with that measured value as its default.

import { CutLockup } from "@/components/snap-cn/cut-lockup";

export const Intro = () => <CutLockup />;

Your logo goes in as SVG paths — paste the d of each <path> from your logo's SVG (outline text first in Figma: Outline stroke / Flatten). Each subpath is drawn as its own construction line, with a dot on every anchor point.

<CutLockup
  logo={{
    width: 120,
    height: 32,
    shapes: ["M0 0h20v32H0z", "M30 16a16 16 0 1 0 32 0a16 16 0 1 0-32 0z"],
  }}
  ink="#111111"
  night="#0a0a0a"
/>

Props

Prop	Type	Default	Description
`logo`	`{ width: number; height: number; shapes: string[] }`	`snapcn mark + wordmark`	Your logo as SVG paths in a width × height box
`size`	`number`	`0.2335`	Resting logo width as a fraction of the frame width
`ink`	`string`	`"#1f1f1f"`	Logo colour on paper
`paper`	`[string, string, string]`	`["#f6f6f6", "#f8f8f8", "#fcfcfc"]`	Paper, left edge → middle → right edge
`grid`	`{ color: string; pitch: number; width: number }`	`{ color: "rgba(0,0,0,0.014)", pitch: 22, width: 1 }`	Grid-paper lines on the left of the paper (ref px)
`roughness`	`number`	`0.35`	Printed-edge roughness; 0 for clean vector edges
`steps`	`CutStep[]`	`4 measured cuts`	The hard cuts: { from, scale, x?, y?, drift? } — scale × resting width, offsets in logo widths
`push`	`[frame, scale][]`	`frames 36–42`	Push-in before the cut to night
`night`	`string`	`"#242424"`	Night background
`line`	`string`	`"rgba(255,255,255,0.11)"`	Construction line colour
`dot`	`string`	`"rgba(255,255,255,0.22)"`	Anchor dot colour
`nightAt`	`number`	`43`	Frame of the cut to night
`nightScale`	`number`	`1.154`	Logo scale at night
`drawFrames`	`number`	`7`	Frames each shape takes to draw
`drawSpread`	`number`	`22`	Frames between the first and last shape starting, left to right
`wipe`	`[frame, top][]`	`frames 91–102`	Paper wipe: top edge as a fraction of the height
`endPaper`	`string`	`"#f8f8f8"`	Paper after the wipe
`endScale`	`number`	`1.1894`	Resting logo scale after the wipe
`speed`	`number`	`1`	Time multiplier

Frequently asked questions

How do I add Cut Lockup to a Remotion project?

Run npx shadcn@latest add @snapcn/cut-lockup. The source is copied into components/snap-cn/ (or wherever your components.json points) with anything it depends on, and you own the code from then on — there is no runtime package to keep installed.

What is Cut Lockup?

Cut Lockup is a Remotion logo reveal with hard cuts for React. A logo reveal in hard cuts — huge on grid paper, three cuts down, a push to night where its construction lines draw themselves, then paper wipes up onto the lockup.

What do I need before using Cut Lockup?

An existing Remotion project (npx create-video@latest) with a components.json. shadcn init does not recognise Remotion, so the installation guide has you write that file by hand — it takes two minutes. The component is MIT licensed and free.