Kinetica Remotion

A collection of self-contained Remotion components by extrAI-lab. Users install one or more components via the CLI — files are fetched directly from this repo and composed sequentially into a ready-to-run Remotion video.

Local Development

pnpm install
pnpm dev

pnpm dev opens Remotion Studio at src/main.ts. All components are registered under the components folder with editable Zod-backed props.

Components

Components live in src/components/. Each component is a self-contained Remotion composition — no cross-component imports, all visual properties driven by Remotion props.

| Component | 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 |

CLI

Users install components with the kinetica-remotion-cli (or kinetica) CLI:

# List available components
npx kinetica-remotion-cli list

# Scaffold a project with one component
npx kinetica-remotion-cli init bar-chart-race --name my-video

# Scaffold a project with multiple components (sequenced in order)
npx kinetica-remotion-cli init world-map bar-chart-race --name my-video

See cli/README.md for full CLI details.

Adding a New Component

See CONTRIBUTING.md for the full acceptance criteria and file structure.

Short version:

1. Copy src/components/_template/ to src/components/<your-component-slug>/.
2. Rename all files and exports to match your component name.
3. Every visual property must be a Zod-validated prop — no hardcoded colors, strings, or sizes.
4. Export component, schema, defaults, and type from index.ts.
5. Add an entry to src/components/manifest.json.
6. Register for Studio: update src/kinetica-components.json and src/Root.tsx (see CONTRIBUTING.md).
7. Run pnpm render:preview <component-slug> to generate preview.png.

Scripts

pnpm dev                               # Open Remotion Studio
pnpm build                             # Build the library (dist/)
pnpm typecheck                         # TypeScript check
pnpm render:preview <component-slug>   # Render first frame → src/components/<slug>/preview.png

Package Build

The public package entry is src/index.ts, built to dist/ with tsup. The jsrepo registry (jsrepo.config.ts) and the CLI manifest (src/components/manifest.json) are both kept in sync with the src/components/ structure.