How we built shadcn a launch video

This one is a gift — an introducing spot for shadcn/ui made by a fan, not the owner. Fifty-five seconds, and by the end the viewer should know one thing: shadcn/ui is not a component library, it's how you build your own. remocn exists because of the shadcn model, so this video is also a thank-you note.

The storyboard

1. The component field — a camera glide across a dense wall of real shadcn/ui components, installed from the registry and rendered live. No text for seven seconds. The product is the spectacle.
2. The name — "This is shadcn/ui" resolves alone, then the tagline gets its own beat.
3. The creed — two beats: "Not a component library" holds solo, then "How you build your own" assembles word by word. The negation creates the question; the next beat answers it.
4. The montage — four hard cuts, each a label plus live UI proving it: Blocks (a sidebar block assembling itself), Charts (a bar chart drawing live), Themes (a card hard-flipping dark → light → dark), Colors (the full Tailwind palette sweeping in as a wave).
5. The pillars — three claims stack as a block: accessible, composable, open code.
6. The mechanism — npx shadcn add button types itself, then the component name flips through the registry like a rolodex.
7. The preset story — the ui.shadcn.com/create builder flips Style, Base Color, Theme, and Font while a live sign-in card reshapes; the choices condense into one preset code; the code flips and the same installed components re-theme live. "Switch it any time."
8. The ownership line — "And the code is yours."
9. The proof — a count slams into 1,000,000 apps a month, a whip-pan carries into Startups / YC / Fortune 500s, and the kicker lands: "Everyone needs UI."
10. The lockup — a muted smoke ring, the name, "Open Source. Open Code." No URL anywhere. It's a gift, not an ad.

Director's notes

The hook is the product, not an illustration of it. The opening wall and the category montage are real shadcn/ui components running live inside the video pipeline (Tailwind enabled in Remotion). Recognition does the persuading — you have met these cards in the wild.

Color lives only where the brand allows it. The video is monochrome — zinc-950, ink, Geist at regular weight only, nothing bolder anywhere. The only color in the whole piece sits inside the shader covers between scenes, and even that was sampled from shadcn's X avatar and heavily muted. Restraint is the brand.

Every line is its own beat. No headline ever carries a subtitle. A statement lands alone, plays its exit, and yields. That single rule is most of why the typography feels calm at fifty-five seconds.

The prompt

The brief, as a prompt (validated against a clean project + the remocn skill before publishing):

I'm making a gift video introducing shadcn/ui with remocn (remocn.dev) —
an unofficial spot made by a fan — in a Remotion project with Tailwind
enabled. Install anything you need with `npx shadcn add @remocn/<name>`.
 
Build a ~55-second, 1280×720, 30fps cut:
 
1. Hook — a camera glide across a dense wall of REAL shadcn/ui components
   installed from the registry and rendered live. No text; the product is
   the spectacle.
2. Name — "This is shadcn/ui" resolves alone, then "Beautifully designed
   components" as its own beat.
3. Creed — two beats: "Not a component library" solo, then "How you build
   your own" assembling word by word (kinetic-center-build).
4. Montage — four hard cuts, each a label plus live UI proving it:
   Blocks, Charts, Themes, Colors.
5. Pillars — "Accessible by default / Composable by design / Open code,
   always" stacking line by line (line-by-line-slide).
6. Mechanism — `npx shadcn add button` types itself, then the component
   name rolodex-flips through the registry.
7. Presets — the ui.shadcn.com/create builder flips Style, Base Color,
   Theme and Font while a live sign-in card reshapes; the choices condense
   into a preset code; `npx shadcn init --preset <code>` re-themes the
   same components on every code flip; then "Switch it any time."
8. Ownership — "And the code is yours."
9. Proof — a count slams into 1,000,000 ("apps every month"), whip-pan
   into "Startups. YC. Fortune 500s.", then the kicker: "Everyone needs UI."
10. Lockup — a muted smoke ring, "shadcn/ui", "Open Source. Open Code."
    No URL anywhere.
 
Style: zinc-950 canvas, #fafafa ink, Geist at regular weight only,
monochrome throughout. The only color lives inside the shader covers
between scenes — muted plum, navy, dusty rose — nothing bright. One quiet
simplex-noise field carries the whole video. Every line gets its own
beat — never a subtitle under a headline.

Make one for your product

Same anatomy, your words: Launch video. For the lines themselves, Words on screen is the cheat sheet.