kinetica-cli
v0.1.3
Published
Scaffold a new project from a Kinetica component template.
Readme
kinetica-cli
CLI that scaffolds a complete, ready-to-run project from one or more Kinetica compositions. Composition files are fetched directly from GitHub — no local bundling required.
Usage
# List available collections
kinetica-cli list-collections
# List compositions in a collection
kinetica-cli list --collection <collection>
# List compositions in a collection (HyperFrames)
kinetica-cli list --collection <collection> --framework hyperframes
# Scaffold a project from a collection
kinetica-cli init --collection <collection> [--name <project-name>]
# Scaffold a HyperFrames project from a collection
kinetica-cli init --collection <collection> --framework hyperframes [--name <project-name>]
# Add compositions to an existing project (by slug or collection)
kinetica-cli add-compositions <composition1> [composition2 ...]
kinetica-cli add-compositions --collection <collection>--name defaults to the collection slug when omitted.
The CLI is also available as kinetica:
kinetica init --collection general --name my-videoExamples
# Scaffold from the general collection
kinetica-cli init --collection general --name my-video
cd my-video && pnpm install && pnpm dev
# Add a specific composition to an existing project
cd my-video
kinetica-cli add-compositions chat
# Or add all compositions from a collection
kinetica-cli add-compositions --collection general
# HyperFrames project
kinetica-cli init --collection general --framework hyperframes --name my-brandpnpm dev opens Remotion Studio with the selected compositions loaded and ready to customise.
Available compositions
Remotion
| Name | Category | Description |
|---|---|---|
| world-map | data | Animated world map with configurable start/end geographic coordinates, arc path animation, and labeled markers |
| timeline-journey | data | Animated timeline that zooms in on each milestone with a year label and circular image, then travels to the next date |
| bar-chart-race | data | Animated ranking bars with smooth transitions, automatic labels and colors, and podium emphasis |
| statistic-emphasis | data | Animated statistics cards with trend bars, icons, and value counters |
| code-walkthrough | code | Syntax-highlighted code animation with typewriter, line-reveal, or fade-in styles |
| chat | data | Animated messaging conversation with bubbles, avatars, and image attachments, rendered as a chat interface |
| app-showcase-mobile | ui | Animated mobile phone mockup with fake 3D entry/exit, cycling app screenshots, and swipe-right or fade transitions between screens |
HyperFrames
| Name | Category | Description |
|---|---|---|
| brand-intro | intro | Animated brand intro block with logo reveal and typography entrance |
Run kinetica-cli list for the live list (fetched from the registry). For full prop reference and agent automation, see CONTRIBUTING.md or the kinetica skill in Claude Code.
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
└── compositions/
└── <composition-slug>/ # Composition files fetched from GitHubSingle composition — Root.tsx registers the composition as a <Composition> with its Zod schema, so props are editable in Remotion Studio.
Multiple compositions — Root.tsx wraps all compositions in a <Series> composition, sequenced in the order given. Total duration equals the sum of all composition durations.
Local development
Build the CLI (also copies the composition manifest into the bundle):
cd cli
pnpm install
pnpm buildTest locally without publishing:
node cli/dist/index.js list-collections
node cli/dist/index.js list --collection general
node cli/dist/index.js init --collection general --name my-videoHow composition fetching works
The CLI fetches manifest.json from the repo root on GitHub at runtime to resolve available compositions and their file lists. Each composition'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/manifest.json) is included as a fallback — updated automatically during pnpm build via scripts/bundle-sources.mjs.
Adding a new composition to the CLI
- Add the composition to
src/compositions/remotion/<slug>/following CONTRIBUTING.md. - Add an entry to
manifest.jsonat the repo root withfiles,defaultProps, and metadata. - Run
pnpm buildinsidecli/— the manifest is synced automatically.
