Sky Lockup

Installation

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

Component code

The exact file shadcn add copies into your project.

Usage

Sky Lockup paints its own background and runs 57 frames at 30fps, under two seconds, so it closes a video without slowing it down. Every curve is measured frame by frame off a reference recording. The words, the wordmark, your mark and the sky are all props.

import { SkyLockup } from "@/components/snap-cn/sky-lockup";

export const Outro = () => (
  <SkyLockup before="your product" after="as one video" wordmark="acme" />
);

Your logo goes in as SVG paths, the same shape Cut Lockup takes. Any image works as the sky, and mode="dark" swaps the white page for your dark card.

<SkyLockup
  logo={{ width: 32, height: 32, shapes: ["M0 0h32v32H0z"] }}
  sky="https://example.com/your-sky.jpg"
  mode="dark"
/>

Frequently asked questions

How do I add Sky Lockup to a Remotion project?

Run npx shadcn@latest add @snapcn/sky-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 Sky Lockup?

Sky Lockup is a Remotion logo outro with a sky wipe for React. A one-line promise takes itself apart word by word, the page washes off to a soft sky, and the mark in the middle of the sentence slides over and becomes your logo.

What do I need before using Sky 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.