# mherick/video-shotcraft architecture

> Architecture diagram of the GitHub repository mherick/video-shotcraft, 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/mherick/video-shotcraft
- Repository: https://github.com/mherick/video-shotcraft
- Video tour (about a minute): https://gitdiagram.com/mherick/video-shotcraft/video

## Overview

video-shotcraft combines a catalog of Remotion motion recipes with a ready-made promo template and a browser-based editor. The main workflow is to browse or select motion ideas, assemble and preview a film in the workbench or use the Ink Press template, then render the result; the README also documents JianYing draft export. The tree supports the gallery, demos, template, workbench, and export modules, but does not expose the agent-skill instructions or all runtime wiring, so those details are not modeled.

Main entry points: [`gallery/app.js`](https://github.com/mherick/video-shotcraft/blob/main/gallery/app.js) (Motion gallery), [`workbench/src/App.tsx`](https://github.com/mherick/video-shotcraft/blob/main/workbench/src/App.tsx) (Workbench app), [`template/src/aifl/Main.tsx`](https://github.com/mherick/video-shotcraft/blob/main/template/src/aifl/Main.tsx) (Ink Press template), [`workbench/src/preview/PreviewPanel.tsx`](https://github.com/mherick/video-shotcraft/blob/main/workbench/src/preview/PreviewPanel.tsx) (Film preview)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_catalog["Recipe catalog"]
  node_gallery["Motion gallery<br/>[app.js]"]
end

subgraph group_motion["Motion recipes"]
  node_camera["Camera moves"]
  node_data["Data motion"]
  node_effects["Visual effects"]
  node_interaction["UI interactions"]
  node_rhythm["Edit rhythm"]
  node_transitions["Shot transitions"]
  node_typography["Motion typography"]
  node_ui["UI entrances"]
end

subgraph group_production["Video production"]
  node_template["Ink Press template<br/>[Main.tsx]"]
  node_scenes["Template scenes"]
end

subgraph group_editing["Browser workbench"]
  node_workbench["Workbench app<br/>[App.tsx]"]
  node_library["Motion library<br/>[LibraryPanel.tsx]"]
  node_inspector["Clip inspector<br/>[Inspector.tsx]"]
  node_timeline["Timeline editor<br/>[Timeline.tsx]"]
  node_preview["Film preview<br/>[PreviewPanel.tsx]"]
  node_composition["Project composition<br/>[Composition.tsx]"]
  node_store[("Project state<br/>[store.ts]")]
end

subgraph group_delivery["Delivery"]
  node_remotion["Remotion renderer"]
  node_jianying["JianYing draft export"]
end

node_creator(("Product creator"))

node_creator -->|"browse recipes"| node_gallery
node_creator -->|"edit film"| node_workbench
node_creator -->|"use template"| node_template
node_gallery -->|"browse previews"| node_camera
node_gallery -->|"browse previews"| node_data
node_gallery -->|"browse previews"| node_effects
node_gallery -->|"browse previews"| node_interaction
node_gallery -->|"browse previews"| node_rhythm
node_gallery -->|"browse previews"| node_transitions
node_gallery -->|"browse previews"| node_typography
node_gallery -->|"browse previews"| node_ui
node_template -->|"renders sequences"| node_scenes
node_workbench -->|"shows"| node_library
node_workbench -->|"shows"| node_inspector
node_workbench -->|"shows"| node_timeline
node_workbench -->|"shows"| node_preview
node_workbench -->|"reads and updates"| node_store
node_preview -->|"previews project"| node_composition
node_workbench -->|"submits render"| node_remotion
node_creator -.->|"export draft"| node_jianying

click node_gallery "https://github.com/mherick/video-shotcraft/blob/main/gallery/app.js"
click node_camera "https://github.com/mherick/video-shotcraft/tree/main/demos/camera"
click node_data "https://github.com/mherick/video-shotcraft/tree/main/demos/data"
click node_effects "https://github.com/mherick/video-shotcraft/tree/main/demos/effects"
click node_interaction "https://github.com/mherick/video-shotcraft/tree/main/demos/interaction"
click node_rhythm "https://github.com/mherick/video-shotcraft/tree/main/demos/rhythm"
click node_transitions "https://github.com/mherick/video-shotcraft/tree/main/demos/transition"
click node_typography "https://github.com/mherick/video-shotcraft/tree/main/demos/typography"
click node_ui "https://github.com/mherick/video-shotcraft/tree/main/demos/ui-entrance"
click node_template "https://github.com/mherick/video-shotcraft/blob/main/template/src/aifl/Main.tsx"
click node_scenes "https://github.com/mherick/video-shotcraft/tree/main/template/src/aifl/live"
click node_workbench "https://github.com/mherick/video-shotcraft/blob/main/workbench/src/App.tsx"
click node_library "https://github.com/mherick/video-shotcraft/blob/main/workbench/src/panels/LibraryPanel.tsx"
click node_inspector "https://github.com/mherick/video-shotcraft/blob/main/workbench/src/panels/Inspector.tsx"
click node_timeline "https://github.com/mherick/video-shotcraft/blob/main/workbench/src/timeline/Timeline.tsx"
click node_preview "https://github.com/mherick/video-shotcraft/blob/main/workbench/src/preview/PreviewPanel.tsx"
click node_composition "https://github.com/mherick/video-shotcraft/blob/main/workbench/src/preview/Composition.tsx"
click node_store "https://github.com/mherick/video-shotcraft/blob/main/workbench/src/store.ts"
click node_jianying "https://github.com/mherick/video-shotcraft/tree/main/jianying-export"

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_gallery toneBlue
class node_camera,node_data,node_effects,node_interaction,node_rhythm,node_transitions,node_typography,node_ui toneAmber
class node_template,node_scenes toneMint
class node_workbench,node_library,node_inspector,node_timeline,node_preview,node_composition,node_store toneRose
class node_remotion,node_jianying,node_creator toneIndigo
```

## Components

### Recipe catalog

- [Motion gallery](https://github.com/mherick/video-shotcraft/blob/main/gallery/app.js): `gallery/app.js`

### Motion recipes

- [Camera moves](https://github.com/mherick/video-shotcraft/tree/main/demos/camera): `demos/camera`
- [Data motion](https://github.com/mherick/video-shotcraft/tree/main/demos/data): `demos/data`
- [Visual effects](https://github.com/mherick/video-shotcraft/tree/main/demos/effects): `demos/effects`
- [UI interactions](https://github.com/mherick/video-shotcraft/tree/main/demos/interaction): `demos/interaction`
- [Edit rhythm](https://github.com/mherick/video-shotcraft/tree/main/demos/rhythm): `demos/rhythm`
- [Shot transitions](https://github.com/mherick/video-shotcraft/tree/main/demos/transition): `demos/transition`
- [Motion typography](https://github.com/mherick/video-shotcraft/tree/main/demos/typography): `demos/typography`
- [UI entrances](https://github.com/mherick/video-shotcraft/tree/main/demos/ui-entrance): `demos/ui-entrance`

### Video production

- [Ink Press template](https://github.com/mherick/video-shotcraft/blob/main/template/src/aifl/Main.tsx): `template/src/aifl/Main.tsx`
- [Template scenes](https://github.com/mherick/video-shotcraft/tree/main/template/src/aifl/live): `template/src/aifl/live`

### Browser workbench

- [Workbench app](https://github.com/mherick/video-shotcraft/blob/main/workbench/src/App.tsx): `workbench/src/App.tsx`
- [Motion library](https://github.com/mherick/video-shotcraft/blob/main/workbench/src/panels/LibraryPanel.tsx): `workbench/src/panels/LibraryPanel.tsx`
- [Clip inspector](https://github.com/mherick/video-shotcraft/blob/main/workbench/src/panels/Inspector.tsx): `workbench/src/panels/Inspector.tsx`
- [Timeline editor](https://github.com/mherick/video-shotcraft/blob/main/workbench/src/timeline/Timeline.tsx): `workbench/src/timeline/Timeline.tsx`
- [Film preview](https://github.com/mherick/video-shotcraft/blob/main/workbench/src/preview/PreviewPanel.tsx): `workbench/src/preview/PreviewPanel.tsx`
- [Project composition](https://github.com/mherick/video-shotcraft/blob/main/workbench/src/preview/Composition.tsx): `workbench/src/preview/Composition.tsx`
- [Project state](https://github.com/mherick/video-shotcraft/blob/main/workbench/src/store.ts): `workbench/src/store.ts`

### Delivery

- **Remotion renderer**
- [JianYing draft export](https://github.com/mherick/video-shotcraft/tree/main/jianying-export): `jianying-export`

### Other components

- **Product creator**

## Connections

- Product creator → Motion gallery: browse recipes
- Product creator → Workbench app: edit film
- Product creator → Ink Press template: use template
- Motion gallery → Camera moves: browse previews
- Motion gallery → Data motion: browse previews
- Motion gallery → Visual effects: browse previews
- Motion gallery → UI interactions: browse previews
- Motion gallery → Edit rhythm: browse previews
- Motion gallery → Shot transitions: browse previews
- Motion gallery → Motion typography: browse previews
- Motion gallery → UI entrances: browse previews
- Ink Press template → Template scenes: renders sequences
- Workbench app → Motion library: shows
- Workbench app → Clip inspector: shows
- Workbench app → Timeline editor: shows
- Workbench app → Film preview: shows
- Workbench app → Project state: reads and updates
- Film preview → Project composition: previews project
- Workbench app → Remotion renderer: submits render
- Product creator → JianYing draft export: export draft