Templates

A template is one file that exports a component, a zod schema, default props and a calculateMetadata. Register it as a composition and render. Every template works at 16:9, 9:16 and 1:1, and renders with no asset files, so you can install one and render it straight away.

Install and register

npx shadcn add @reelcn/product-launch

// src/Root.tsx
import { Composition } from "remotion";
import {
  ProductLaunch,
  productLaunchDefaults,
  productLaunchMetadata,
  productLaunchSchema,
} from "./reelcn/product-launch";

export const Root = () => (
  <Composition
    id="ProductLaunch"
    component={ProductLaunch}
    schema={productLaunchSchema}
    defaultProps={productLaunchDefaults}
    calculateMetadata={productLaunchMetadata}
    width={1920}
    height={1080}
    fps={30}
    durationInFrames={1}
  />
);

durationInFrames={1} is a placeholder: calculateMetadata replaces it with the real length. Edit the props in Studio's sidebar, or pass them with --props.

Shared fields

The fourteen

Any template renders at any size: change width and height, for example to 1080 by 1920.

How long a template runs

Most templates are built on the storyboard, so they follow its length rules:

• Text runs as long as it takes to read.
• Charts run 4 seconds.
• Code runs until it finishes typing, plus a beat.

The media templates follow their media:

• talking-head-short and audiogram run as long as their video or audio file, read from the file itself.
• podcast-teaser runs from clipStart to clipEnd.
• youtube-outro runs 10 seconds.

Review before you render

Render a contact sheet, a grid of frames from across the video, and look at it before a full render:

npx shadcn add @reelcn/contact-sheet
node scripts/reelcn-contact-sheet.ts ProductLaunch --frames 9