# chatzisathanasios/motioncorexp architecture

> Architecture diagram of the GitHub repository chatzisathanasios/motioncorexp, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/chatzisathanasios/motioncorexp
- Repository: https://github.com/chatzisathanasios/motioncorexp

## Overview

Motioncore is a React-based programmatic video framework. The main workflow is authoring a registered composition, bundling it, capturing deterministic frames in headless Chromium, then encoding an MP4 with optional audio. Its runtime also includes Studio preview and a motion kernel, plus specialized composition packages for captions, media, charts, maps, code, and transitions. The CLI/renderer/encoder flow is evidenced by sampled imports and calls; several package capabilities are documented or apparent from the tree, but their internal wiring was not sampled.

Main entry points: [`packages/cli/src/index.ts`](https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/cli/src/index.ts) (Motioncore CLI), [`packages/studio/src/client/App.tsx`](https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/studio/src/client/App.tsx) (Studio composition picker), [`packages/core/src/index.ts`](https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/core/src/index.ts) (Frame runtime), [`packages/renderer/src/index.ts`](https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/renderer/src/index.ts) (Frame renderer)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_authoring["Composition runtime"]
  node_composition["React composition"]
  node_core["Frame runtime<br/>[index.ts]"]
  node_registry["Composition registry<br/>[registry.ts]"]
  node_preview["Preview contexts<br/>[preview.ts]"]
end

subgraph group_rendering["Render pipeline"]
  node_cli["Motioncore CLI<br/>[index.ts]"]
  node_bundler["Composition bundler<br/>[index.ts]"]
  node_renderer["Frame renderer<br/>[index.ts]"]
  node_encoder["FFmpeg encoder<br/>[index.ts]"]
end

subgraph group_studio["Studio preview"]
  node_studio["Studio server<br/>[index.ts]"]
  node_studioapp["Studio composition picker<br/>[App.tsx]"]
  node_player["Live frame player<br/>[Player.tsx]"]
end

subgraph group_motion["Motion components"]
  node_kernel["Motion kernel<br/>[index.ts]"]
  node_transitions["Scene transitions<br/>[index.ts]"]
end

subgraph group_media["Media and visuals"]
  node_captions["Captions and transcription<br/>[index.tsx]"]
  node_media_pkg["Video and audio media<br/>[index.tsx]"]
  node_charts["Animated charts<br/>[index.tsx]"]
  node_maps["Animated maps<br/>[index.tsx]"]
  node_code["Code visuals<br/>[index.tsx]"]
  node_data["Data helpers<br/>[index.ts]"]
end

node_creator(("Video author"))
node_chromium["Headless Chromium"]
node_mp4["Rendered video"]

node_creator -->|"authors"| node_composition
node_composition -->|"registers composition"| node_core
node_core -->|"stores configuration"| node_registry
node_creator -->|"runs render"| node_cli
node_cli -->|"bundles entry"| node_bundler
node_cli -->|"requests frame capture"| node_renderer
node_renderer -->|"captures frames"| node_chromium
node_cli -->|"encodes frames and audio"| node_encoder
node_encoder -->|"writes video"| node_mp4
node_creator -->|"starts preview"| node_studio
node_studio -->|"serves client"| node_studioapp
node_studioapp -->|"lists and resolves"| node_registry
node_studioapp -->|"mounts composition"| node_player
node_preview -->|"provides frame contexts"| node_player
node_composition -->|"uses animation primitives"| node_kernel
node_composition -->|"uses scene sequencing"| node_transitions
node_composition -->|"adds captions"| node_captions
node_composition -->|"uses media components"| node_media_pkg
node_composition -->|"adds data visuals"| node_charts
node_composition -->|"adds map visuals"| node_maps
node_composition -->|"adds code visuals"| node_code
node_composition -.->|"uses data utilities"| node_data

click node_core "https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/core/src/index.ts"
click node_registry "https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/core/src/registry.ts"
click node_cli "https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/cli/src/index.ts"
click node_bundler "https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/bundler/src/index.ts"
click node_renderer "https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/renderer/src/index.ts"
click node_encoder "https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/encoder/src/index.ts"
click node_studio "https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/studio/src/index.ts"
click node_studioapp "https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/studio/src/client/App.tsx"
click node_player "https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/studio/src/client/Player.tsx"
click node_preview "https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/core/src/preview.ts"
click node_kernel "https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/motion-kernel/src/index.ts"
click node_transitions "https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/transitions/src/index.ts"
click node_captions "https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/captions/src/index.tsx"
click node_media_pkg "https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/media/src/index.tsx"
click node_charts "https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/charts/src/index.tsx"
click node_maps "https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/maps/src/index.tsx"
click node_code "https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/code/src/index.tsx"
click node_data "https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/data/src/index.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_composition,node_core,node_registry,node_preview toneBlue
class node_cli,node_bundler,node_renderer,node_encoder toneAmber
class node_studio,node_studioapp,node_player toneMint
class node_kernel,node_transitions toneRose
class node_captions,node_media_pkg,node_charts,node_maps,node_code,node_data,node_creator,node_chromium,node_mp4 toneIndigo
```

## Components

### Composition runtime

- **React composition**
- [Frame runtime](https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/core/src/index.ts): `packages/core/src/index.ts`
- [Composition registry](https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/core/src/registry.ts): `packages/core/src/registry.ts`
- [Preview contexts](https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/core/src/preview.ts): `packages/core/src/preview.ts`

### Render pipeline

- [Motioncore CLI](https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/cli/src/index.ts): `packages/cli/src/index.ts`
- [Composition bundler](https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/bundler/src/index.ts): `packages/bundler/src/index.ts`
- [Frame renderer](https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/renderer/src/index.ts): `packages/renderer/src/index.ts`
- [FFmpeg encoder](https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/encoder/src/index.ts): `packages/encoder/src/index.ts`

### Studio preview

- [Studio server](https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/studio/src/index.ts): `packages/studio/src/index.ts`
- [Studio composition picker](https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/studio/src/client/App.tsx): `packages/studio/src/client/App.tsx`
- [Live frame player](https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/studio/src/client/Player.tsx): `packages/studio/src/client/Player.tsx`

### Motion components

- [Motion kernel](https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/motion-kernel/src/index.ts): `packages/motion-kernel/src/index.ts`
- [Scene transitions](https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/transitions/src/index.ts): `packages/transitions/src/index.ts`

### Media and visuals

- [Captions and transcription](https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/captions/src/index.tsx): `packages/captions/src/index.tsx`
- [Video and audio media](https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/media/src/index.tsx): `packages/media/src/index.tsx`
- [Animated charts](https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/charts/src/index.tsx): `packages/charts/src/index.tsx`
- [Animated maps](https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/maps/src/index.tsx): `packages/maps/src/index.tsx`
- [Code visuals](https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/code/src/index.tsx): `packages/code/src/index.tsx`
- [Data helpers](https://github.com/chatzisathanasios/motioncorexp/blob/main/packages/data/src/index.ts): `packages/data/src/index.ts`

### Other components

- **Video author**
- **Headless Chromium**
- **Rendered video**

## Connections

- Video author → React composition: authors
- React composition → Frame runtime: registers composition
- Frame runtime → Composition registry: stores configuration
- Video author → Motioncore CLI: runs render
- Motioncore CLI → Composition bundler: bundles entry
- Motioncore CLI → Frame renderer: requests frame capture
- Frame renderer → Headless Chromium: captures frames
- Motioncore CLI → FFmpeg encoder: encodes frames and audio
- FFmpeg encoder → Rendered video: writes video
- Video author → Studio server: starts preview
- Studio server → Studio composition picker: serves client
- Studio composition picker → Composition registry: lists and resolves
- Studio composition picker → Live frame player: mounts composition
- Preview contexts → Live frame player: provides frame contexts
- React composition → Motion kernel: uses animation primitives
- React composition → Scene transitions: uses scene sequencing
- React composition → Captions and transcription: adds captions
- React composition → Video and audio media: uses media components
- React composition → Animated charts: adds data visuals
- React composition → Animated maps: adds map visuals
- React composition → Code visuals: adds code visuals
- React composition → Data helpers: uses data utilities