Bloom Lockup — Remotion logo reveal from a card wall

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

Run npx shadcn@latest add @snapcn/bloom-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 Bloom 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/bloom-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

Bloom Lockup paints its own background and runs 120 frames at 30fps. Every curve is measured frame by frame off a reference recording. Fill the cards with your own screens, and pass your logo as SVG paths, the same shape Cut Lockup takes.

import { BloomLockup } from "@/components/snap-cn/bloom-lockup";

export const Intro = () => (
  <BloomLockup
    wordmark="acme"
    tagline="acme.dev"
    images={["/screens/home.png", "/screens/chart.png"]}
    logo={{ width: 32, height: 32, shapes: ["M0 0h32v32H0z"] }}
  />
);

Frequently asked questions

How do I add Bloom Lockup to a Remotion project?

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

Bloom Lockup is a Remotion logo reveal from a card wall for React. A wall of finished work blooms outward from your logo, cuts in tight on it, then bends away through a lens and a flash while the logo rises to take its wordmark.

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