# blixvip/motionclone architecture

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

- Interactive diagram: https://gitdiagram.com/blixvip/motionclone
- Repository: https://github.com/blixvip/motionclone

## Overview

MotionClone turns a video reference into an editable motion project, then lets users compare, organize, and export the result. The primary workflow is import and configure a reference, generate a reconstruction with the connected Codex account, render it, review it beside the source, and download video or project files. The Editor also assembles multi-segment sequences; the library and recording exports support ongoing project work. Several subsystem links reflect README capabilities because their source was not sampled; uncertain internal wiring is omitted.

Main entry points: [`app/server.py`](https://github.com/blixvip/motionclone/blob/main/app/server.py) (API and jobs), [`app/scene_pipeline.py`](https://github.com/blixvip/motionclone/blob/main/app/scene_pipeline.py) (Scene pipeline), [`app/media.py`](https://github.com/blixvip/motionclone/blob/main/app/media.py) (Reference import), [`app/recording_routes.py`](https://github.com/blixvip/motionclone/blob/main/app/recording_routes.py) (Recording exports)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_workflow["Reference workflow"]
  node_webapp["Studio interface<br/>[app.js]"]
  node_server["API and jobs<br/>[server.py]"]
  node_media["Reference import<br/>[media.py]"]
  node_jobdata[("Project files<br/>[server.py]")]
  node_hosted["Hosted gateway<br/>[hosted_gateway.py]"]
end

subgraph group_authoring["Reconstruction"]
  node_account["Account connection<br/>[connection.py]"]
  node_author["Editable authoring<br/>[rebuild_author.py]"]
  node_scene["Scene pipeline<br/>[scene_pipeline.py]"]
  node_reconstruction["Project reconstruction<br/>[reconstruction.py]"]
  node_models["Project models<br/>[models.py]"]
end

subgraph group_studio["Studio workspace"]
  node_editorui["Sequence editor<br/>[editor.js]"]
  node_editorapi["Editor API<br/>[editor.py]"]
  node_library["Saved library<br/>[library.js]"]
  node_compare["Playback comparison<br/>[previews.js]"]
end

subgraph group_exports["Rendering and exports"]
  node_render["Render orchestration<br/>[render.py]"]
  node_remotion["Remotion renderer<br/>[Composition.jsx]"]
  node_hyperframes["HyperFrames export<br/>[hyperframes.py]"]
  node_recordings["Recording exports"]
  node_exportui["Export controls"]
end

node_user(("Creator"))
node_source_service(("Video source"))
node_codex(("ChatGPT via Codex"))

node_user -->|"imports and edits"| node_webapp
node_webapp -->|"submits jobs"| node_server
node_server -->|"imports reference"| node_media
node_media -.->|"downloads link"| node_source_service
node_media -->|"saves media"| node_jobdata
node_server -->|"persists jobs"| node_jobdata
node_server -->|"checks connection"| node_account
node_account -->|"authenticates"| node_codex
node_server -->|"runs rebuild"| node_scene
node_scene -->|"authors scenes"| node_author
node_author -->|"requests analysis"| node_codex
node_scene -->|"checkpoints scenes"| node_jobdata
node_scene -->|"validates projects"| node_models
node_server -->|"builds project"| node_reconstruction
node_reconstruction -->|"writes project assets"| node_jobdata
node_user -->|"assembles sequence"| node_editorui
node_editorui -->|"saves sequence"| node_editorapi
node_editorapi -->|"creates project"| node_server
node_user -->|"organizes projects"| node_library
node_library -->|"loads project list"| node_server
node_user -->|"reviews playback"| node_compare
node_compare -->|"plays source and result"| node_jobdata
node_server -->|"renders output"| node_render
node_render -->|"renders animation"| node_remotion
node_remotion -->|"reads project assets"| node_jobdata
node_server -->|"serves editable project"| node_hyperframes
node_user -->|"chooses recording"| node_exportui
node_exportui -->|"requests export"| node_recordings
node_recordings -->|"reads saved videos"| node_jobdata
node_recordings -->|"renders recording"| node_render
node_user -.->|"uses online studio"| node_hosted
node_hosted -.->|"submits hosted job"| node_server

click node_webapp "https://github.com/blixvip/motionclone/blob/main/web/app.js"
click node_server "https://github.com/blixvip/motionclone/blob/main/app/server.py"
click node_media "https://github.com/blixvip/motionclone/blob/main/app/media.py"
click node_jobdata "https://github.com/blixvip/motionclone/blob/main/app/server.py"
click node_account "https://github.com/blixvip/motionclone/blob/main/app/connection.py"
click node_author "https://github.com/blixvip/motionclone/blob/main/app/rebuild_author.py"
click node_scene "https://github.com/blixvip/motionclone/blob/main/app/scene_pipeline.py"
click node_reconstruction "https://github.com/blixvip/motionclone/blob/main/app/reconstruction.py"
click node_models "https://github.com/blixvip/motionclone/blob/main/app/models.py"
click node_editorui "https://github.com/blixvip/motionclone/blob/main/web/editor.js"
click node_editorapi "https://github.com/blixvip/motionclone/blob/main/app/editor.py"
click node_library "https://github.com/blixvip/motionclone/blob/main/web/library.js"
click node_compare "https://github.com/blixvip/motionclone/blob/main/web/previews.js"
click node_render "https://github.com/blixvip/motionclone/blob/main/app/render.py"
click node_remotion "https://github.com/blixvip/motionclone/blob/main/remotion/src/Composition.jsx"
click node_hyperframes "https://github.com/blixvip/motionclone/blob/main/app/hyperframes.py"
click node_recordings "https://github.com/blixvip/motionclone/blob/main/app/recording_routes.py"
click node_exportui "https://github.com/blixvip/motionclone/blob/main/web/recording-presets.js"
click node_hosted "https://github.com/blixvip/motionclone/blob/main/app/hosted_gateway.py"

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_webapp,node_server,node_media,node_jobdata,node_hosted toneBlue
class node_account,node_author,node_scene,node_reconstruction,node_models toneAmber
class node_editorui,node_editorapi,node_library,node_compare toneMint
class node_render,node_remotion,node_hyperframes,node_recordings,node_exportui toneRose
class node_user,node_source_service,node_codex toneIndigo
```

## Components

### Reference workflow

- [Studio interface](https://github.com/blixvip/motionclone/blob/main/web/app.js): `web/app.js`
- [API and jobs](https://github.com/blixvip/motionclone/blob/main/app/server.py): `app/server.py`
- [Reference import](https://github.com/blixvip/motionclone/blob/main/app/media.py): `app/media.py`
- [Project files](https://github.com/blixvip/motionclone/blob/main/app/server.py): `app/server.py`
- [Hosted gateway](https://github.com/blixvip/motionclone/blob/main/app/hosted_gateway.py): `app/hosted_gateway.py`

### Reconstruction

- [Account connection](https://github.com/blixvip/motionclone/blob/main/app/connection.py): `app/connection.py`
- [Editable authoring](https://github.com/blixvip/motionclone/blob/main/app/rebuild_author.py): `app/rebuild_author.py`
- [Scene pipeline](https://github.com/blixvip/motionclone/blob/main/app/scene_pipeline.py): `app/scene_pipeline.py`
- [Project reconstruction](https://github.com/blixvip/motionclone/blob/main/app/reconstruction.py): `app/reconstruction.py`
- [Project models](https://github.com/blixvip/motionclone/blob/main/app/models.py): `app/models.py`

### Studio workspace

- [Sequence editor](https://github.com/blixvip/motionclone/blob/main/web/editor.js): `web/editor.js`
- [Editor API](https://github.com/blixvip/motionclone/blob/main/app/editor.py): `app/editor.py`
- [Saved library](https://github.com/blixvip/motionclone/blob/main/web/library.js): `web/library.js`
- [Playback comparison](https://github.com/blixvip/motionclone/blob/main/web/previews.js): `web/previews.js`

### Rendering and exports

- [Render orchestration](https://github.com/blixvip/motionclone/blob/main/app/render.py): `app/render.py`
- [Remotion renderer](https://github.com/blixvip/motionclone/blob/main/remotion/src/Composition.jsx): `remotion/src/Composition.jsx`
- [HyperFrames export](https://github.com/blixvip/motionclone/blob/main/app/hyperframes.py): `app/hyperframes.py`
- [Recording exports](https://github.com/blixvip/motionclone/blob/main/app/recording_routes.py): `app/recording_routes.py`
- [Export controls](https://github.com/blixvip/motionclone/blob/main/web/recording-presets.js): `web/recording-presets.js`

### Other components

- **Creator**
- **Video source**
- **ChatGPT via Codex**

## Connections

- Creator → Studio interface: imports and edits
- Studio interface → API and jobs: submits jobs
- API and jobs → Reference import: imports reference
- Reference import → Video source: downloads link
- Reference import → Project files: saves media
- API and jobs → Project files: persists jobs
- API and jobs → Account connection: checks connection
- Account connection → ChatGPT via Codex: authenticates
- API and jobs → Scene pipeline: runs rebuild
- Scene pipeline → Editable authoring: authors scenes
- Editable authoring → ChatGPT via Codex: requests analysis
- Scene pipeline → Project files: checkpoints scenes
- Scene pipeline → Project models: validates projects
- API and jobs → Project reconstruction: builds project
- Project reconstruction → Project files: writes project assets
- Creator → Sequence editor: assembles sequence
- Sequence editor → Editor API: saves sequence
- Editor API → API and jobs: creates project
- Creator → Saved library: organizes projects
- Saved library → API and jobs: loads project list
- Creator → Playback comparison: reviews playback
- Playback comparison → Project files: plays source and result
- API and jobs → Render orchestration: renders output
- Render orchestration → Remotion renderer: renders animation
- Remotion renderer → Project files: reads project assets
- API and jobs → HyperFrames export: serves editable project
- Creator → Export controls: chooses recording
- Export controls → Recording exports: requests export
- Recording exports → Project files: reads saved videos
- Recording exports → Render orchestration: renders recording
- Creator → Hosted gateway: uses online studio
- Hosted gateway → API and jobs: submits hosted job