kinetica-remotion-cli

CLI that scaffolds a complete, ready-to-run Remotion project from one or more Kinetica components. Component files are fetched directly from GitHub — no local bundling required.

Usage

# List available components
kinetica-remotion-cli list

# Scaffold a project with one component
kinetica-remotion-cli init <component> [--name <project-name>]

# Scaffold a project with multiple components (sequenced in order)
kinetica-remotion-cli init <component1> <component2> ... [--name <project-name>]

# Add components to an existing project
kinetica-remotion-cli add-components <component1> [component2 ...]

--name defaults to the first component slug when omitted.

The CLI is also available as kinetica:

kinetica init bar-chart-race --name my-video

Examples

# Single component
kinetica-remotion-cli init bar-chart-race --name my-charts
cd my-charts && pnpm install && pnpm dev

# Multiple components composed sequentially
kinetica-remotion-cli init world-map bar-chart-race --name my-video
cd my-video && pnpm install && pnpm dev

# Add a component to an existing scaffolded project
cd my-video
kinetica-remotion-cli add-components world-map

pnpm dev opens Remotion Studio with the selected components loaded and ready to customise.

Available components

| Name | Description | |---|---| | world-map | Animated world map with configurable start/end geographic coordinates, arc path animation, and labeled markers | | bar-chart-race | Animated ranking bars with smooth transitions, automatic labels and colors, CSV/JSON source support, and podium emphasis |

Run kinetica-remotion-cli list for the live list (fetched from the registry).

What gets scaffolded

<project-name>/
├── package.json          # react, remotion, zod, tailwindcss
├── tsconfig.json
├── remotion.config.ts    # Tailwind v4 Webpack integration
└── src/
    ├── main.ts           # Remotion Studio entry point
    ├── Root.tsx          # Single or Series composition (auto-generated)
    ├── index.css
    └── components/
        └── <component-slug>/ # Component files fetched from GitHub

Single component — Root.tsx registers the component as a <Composition> with its Zod schema, so props are editable in Remotion Studio.

Multiple components — Root.tsx wraps all components in a <Series> composition, sequenced in the order given. Total duration equals the sum of all component durations.

Local development

Build the CLI (also copies the component manifest into the bundle):

cd cli
pnpm install
pnpm build

Test locally without publishing:

node cli/dist/index.js list
node cli/dist/index.js init bar-chart-race --name my-video

How component fetching works

The CLI fetches src/components/manifest.json from GitHub at runtime to resolve available components and their file lists. Each component's files are then fetched in parallel via raw GitHub URLs and written into the new project.

A bundled copy of the manifest (cli/src/components-manifest.json) is included as a fallback — updated automatically during pnpm build via scripts/bundle-sources.mjs.

Adding a new component to the CLI

1. Add the component to src/components/<slug>/ following CONTRIBUTING.md.
2. Add an entry to src/components/manifest.json with files, defaultProps, and metadata.
3. Run pnpm build inside cli/ — the manifest is synced automatically.