Kinetica

A collection of self-contained animated 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 video.

Local Development

pnpm install
pnpm dev

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

Components

Remotion

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

| Component | Category | Description | |---|---|---| | brand-intro | intro | Animated brand intro block with logo reveal and typography entrance |

CLI

Users install components with kinetica-cli (also available as kinetica):

# List available collections
npx kinetica-cli list-collections

# List compositions in a collection
npx kinetica-cli list --collection general

# List compositions in a collection (HyperFrames)
npx kinetica-cli list --collection general --framework hyperframes

# Scaffold a project from a collection
npx kinetica-cli init --collection general --name my-video

# Scaffold a HyperFrames project from a collection
npx kinetica-cli init --collection general --framework hyperframes --name my-video

# Add a specific composition to an existing project
npx kinetica-cli add-compositions chat

# Add all compositions from a collection to an existing project
npx kinetica-cli add-compositions --collection general

# Show CLI version
npx kinetica-cli --version

See cli/README.md for full CLI details.

Agent Skill

Install the Kinetica skill for full prop reference, CLI commands, and agent automation support:

npx skills add extrAI-lab/kinetica

If the skill is not available, see CONTRIBUTING.md — For AI Agents for the full prop reference, scaffolding checklist, and component sequencing instructions.

Adding a New Component

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

Short version:

1. Copy src/compositions/remotion/_template/ to src/compositions/remotion/<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 manifest.json at the repo root.
6. Register for Studio: update src/compositions/remotion/compositions.json and src/compositions/remotion/Root.tsx (see CONTRIBUTING.md).

Scripts

pnpm dev                               # Open Remotion Studio
pnpm build                             # Build the library (dist/)
pnpm typecheck                         # TypeScript check

Package Build

The public package entry is src/compositions/remotion/index.ts, built to dist/ with tsup. manifest.json at the repo root is the source of truth for the CLI.