Gather Lockup

Installation

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

Component code

The exact file shadcn add copies into your project.

Usage

Gather Lockup paints its own background and runs 60 frames at 24fps, every pose measured off a reference recording. It cuts between held poses instead of easing, so keep it at 24fps. Pass fifteen pictures: seven for the wall, four for the row, four for the swaps. Tiles crop to fit, so portrait pictures work best. The title reads best at five words on three lines.

import { GatherLockup } from "@/components/snap-cn/gather-lockup";

export const Outro = () => (
  <GatherLockup
    lines={[["Ship"], ["your", "demo"], ["in", "code"]]}
    wordmark="acme"
    images={pictures}
    captions={["Launch film", "Product demo"]}
    logo={{ width: 32, height: 32, shapes: ["M0 0h32v32H0z"] }}
  />
);

Frequently asked questions

How do I add Gather Lockup to a Remotion project?

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

Gather Lockup is a Remotion logo reveal from a photo wall for React. A wall of your work sits under a line of type.

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