How chatzisathanasios/motioncorexp works
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: src/index.ts Motioncore CLI · App.tsx Studio composition picker · src/index.ts Frame runtime · src/index.ts Frame renderer
Components 22
Composition runtime
- React composition
- Frame runtime
packages/core/src/index.ts - Composition registry
packages/core/src/registry.ts - Preview contexts
packages/core/src/preview.ts
Render pipeline
- Motioncore CLI
packages/cli/src/index.ts - Composition bundler
packages/bundler/src/index.ts - Frame renderer
packages/renderer/src/index.ts - FFmpeg encoder
packages/encoder/src/index.ts
Studio preview
- Studio server
packages/studio/src/index.ts - Studio composition picker
packages/studio/src/client/App.tsx - Live frame player
packages/studio/src/client/Player.tsx
Motion components
- Motion kernel
packages/motion-kernel/src/index.ts - Scene transitions
packages/transitions/src/index.ts
Media and visuals
- Captions and transcription
packages/captions/src/index.tsx - Video and audio media
packages/media/src/index.tsx - Animated charts
packages/charts/src/index.tsx - Animated maps
packages/maps/src/index.tsx - Code visuals
packages/code/src/index.tsx - Data helpers
packages/data/src/index.ts
Other components
- Video author
- Headless Chromium
- Rendered video
Connections 22
- 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