# chiragdalmia/motion-studio architecture

> Architecture diagram of the GitHub repository chiragdalmia/motion-studio, 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/chiragdalmia/motion-studio
- Repository: https://github.com/chiragdalmia/motion-studio

## Overview

motion-studio is a multi-brand animation studio: creators author ordered film beats, apply a brand’s visual and craft rules, validate and package the film as a self-contained HTML artifact, then preview or embed it. The main stages are authoring, brand configuration, preparation and checking, packaging, and playback/host control. The graph includes the shared craft layer and the documented player/host capabilities. Tool and build internals are only sampled in part, so uncertain calls are omitted.

Main entry points: [`tools/prepare.mjs`](https://github.com/chiragdalmia/motion-studio/blob/main/tools/prepare.mjs) (Film preparation), [`tools/do.mjs`](https://github.com/chiragdalmia/motion-studio/blob/main/tools/do.mjs) (Command orchestration), [`tools/build.mjs`](https://github.com/chiragdalmia/motion-studio/blob/main/tools/build.mjs) (HTML packaging), [`work/relo/alf-walkthrough`](https://github.com/chiragdalmia/motion-studio/tree/main/work/relo/alf-walkthrough) (Film sources)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_authoring["Film authoring"]
  node_new["Film creation<br/>[new.mjs]"]
  node_film["Film sources"]
end

subgraph group_brand["Brand system"]
  node_brandpack["Brand pack schema<br/>[pack.ts]"]
  node_relo["RELO identity<br/>[brand.ts]"]
  node_wkt["WKT identity<br/>[brand.ts]"]
  node_brandtokens["Token validation<br/>[tokens.mjs]"]
  node_brandmedia["Shared brand media"]
end

subgraph group_production["Prepare and ship"]
  node_prepare["Film preparation<br/>[prepare.mjs]"]
  node_craft["Craft rules<br/>[craft.mjs]"]
  node_guard["Repository checks<br/>[guard.mjs]"]
  node_law["Film rules<br/>[law.mjs]"]
  node_workflow["Command orchestration<br/>[do.mjs]"]
  node_builder["HTML packaging<br/>[build.mjs]"]
end

subgraph group_playback["Playback and embedding"]
  node_artifact["Standalone film"]
  node_world["Shared film template<br/>[world.html]"]
  node_beat["Beat template<br/>[beat.html]"]
  node_chrome["Player controls<br/>[chrome.js]"]
end

node_creator(("Creator"))
node_preview(("Preview browser"))
node_host(("Embedding host"))

node_creator -->|"creates film"| node_new
node_new -->|"writes sources"| node_film
node_creator -->|"edits beats"| node_film
node_film -->|"prepares"| node_prepare
node_brandpack -->|"defines schema"| node_relo
node_brandpack -->|"defines schema"| node_wkt
node_relo -->|"validates pack"| node_brandtokens
node_wkt -->|"validates pack"| node_brandtokens
node_brandtokens -->|"supplies tokens"| node_prepare
node_brandmedia -->|"supplies assets"| node_prepare
node_workflow -->|"runs preparation"| node_prepare
node_workflow -->|"runs checks"| node_guard
node_workflow -->|"checks films"| node_law
node_law -->|"applies predicates"| node_craft
node_workflow -->|"runs packaging"| node_builder
node_prepare -->|"provides prepared film"| node_builder
node_builder -->|"assembles template"| node_world
node_world -->|"uses beat template"| node_beat
node_builder -->|"writes HTML"| node_artifact
node_preview -.->|"previews edits"| node_film
node_artifact -->|"runs player"| node_chrome
node_host -->|"sends controls"| node_chrome
node_chrome -->|"posts events"| node_host

click node_new "https://github.com/chiragdalmia/motion-studio/blob/main/tools/new.mjs"
click node_film "https://github.com/chiragdalmia/motion-studio/tree/main/work/relo/alf-walkthrough"
click node_brandpack "https://github.com/chiragdalmia/motion-studio/blob/main/brands/pack.ts"
click node_relo "https://github.com/chiragdalmia/motion-studio/blob/main/brands/relo/brand.ts"
click node_wkt "https://github.com/chiragdalmia/motion-studio/blob/main/brands/wkt/brand.ts"
click node_brandtokens "https://github.com/chiragdalmia/motion-studio/blob/main/tools/tokens.mjs"
click node_brandmedia "https://github.com/chiragdalmia/motion-studio/tree/main/media/relo"
click node_prepare "https://github.com/chiragdalmia/motion-studio/blob/main/tools/prepare.mjs"
click node_craft "https://github.com/chiragdalmia/motion-studio/blob/main/lib/craft.mjs"
click node_guard "https://github.com/chiragdalmia/motion-studio/blob/main/tools/guard.mjs"
click node_law "https://github.com/chiragdalmia/motion-studio/blob/main/tools/law.mjs"
click node_workflow "https://github.com/chiragdalmia/motion-studio/blob/main/tools/do.mjs"
click node_builder "https://github.com/chiragdalmia/motion-studio/blob/main/tools/build.mjs"
click node_artifact "https://github.com/chiragdalmia/motion-studio/blob/main/builds/relo-brand-logo.html"
click node_world "https://github.com/chiragdalmia/motion-studio/blob/main/lib/world.html"
click node_beat "https://github.com/chiragdalmia/motion-studio/blob/main/lib/beat.html"
click node_chrome "https://github.com/chiragdalmia/motion-studio/blob/main/lib/chrome/chrome.js"

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_new,node_film,node_preview toneBlue
class node_brandpack,node_relo,node_wkt,node_brandtokens,node_brandmedia toneAmber
class node_prepare,node_craft,node_guard,node_law,node_workflow,node_builder toneMint
class node_artifact,node_world,node_beat,node_chrome toneRose
class node_creator,node_host toneIndigo
```

## Components

### Film authoring

- [Film creation](https://github.com/chiragdalmia/motion-studio/blob/main/tools/new.mjs): `tools/new.mjs`
- [Film sources](https://github.com/chiragdalmia/motion-studio/tree/main/work/relo/alf-walkthrough): `work/relo/alf-walkthrough`

### Brand system

- [Brand pack schema](https://github.com/chiragdalmia/motion-studio/blob/main/brands/pack.ts): `brands/pack.ts`
- [RELO identity](https://github.com/chiragdalmia/motion-studio/blob/main/brands/relo/brand.ts): `brands/relo/brand.ts`
- [WKT identity](https://github.com/chiragdalmia/motion-studio/blob/main/brands/wkt/brand.ts): `brands/wkt/brand.ts`
- [Token validation](https://github.com/chiragdalmia/motion-studio/blob/main/tools/tokens.mjs): `tools/tokens.mjs`
- [Shared brand media](https://github.com/chiragdalmia/motion-studio/tree/main/media/relo): `media/relo`

### Prepare and ship

- [Film preparation](https://github.com/chiragdalmia/motion-studio/blob/main/tools/prepare.mjs): `tools/prepare.mjs`
- [Craft rules](https://github.com/chiragdalmia/motion-studio/blob/main/lib/craft.mjs): `lib/craft.mjs`
- [Repository checks](https://github.com/chiragdalmia/motion-studio/blob/main/tools/guard.mjs): `tools/guard.mjs`
- [Film rules](https://github.com/chiragdalmia/motion-studio/blob/main/tools/law.mjs): `tools/law.mjs`
- [Command orchestration](https://github.com/chiragdalmia/motion-studio/blob/main/tools/do.mjs): `tools/do.mjs`
- [HTML packaging](https://github.com/chiragdalmia/motion-studio/blob/main/tools/build.mjs): `tools/build.mjs`

### Playback and embedding

- [Standalone film](https://github.com/chiragdalmia/motion-studio/blob/main/builds/relo-brand-logo.html): `builds/relo-brand-logo.html`
- [Shared film template](https://github.com/chiragdalmia/motion-studio/blob/main/lib/world.html): `lib/world.html`
- [Beat template](https://github.com/chiragdalmia/motion-studio/blob/main/lib/beat.html): `lib/beat.html`
- [Player controls](https://github.com/chiragdalmia/motion-studio/blob/main/lib/chrome/chrome.js): `lib/chrome/chrome.js`

### Other components

- **Creator**
- **Preview browser**
- **Embedding host**

## Connections

- Creator → Film creation: creates film
- Film creation → Film sources: writes sources
- Creator → Film sources: edits beats
- Film sources → Film preparation: prepares
- Brand pack schema → RELO identity: defines schema
- Brand pack schema → WKT identity: defines schema
- RELO identity → Token validation: validates pack
- WKT identity → Token validation: validates pack
- Token validation → Film preparation: supplies tokens
- Shared brand media → Film preparation: supplies assets
- Command orchestration → Film preparation: runs preparation
- Command orchestration → Repository checks: runs checks
- Command orchestration → Film rules: checks films
- Film rules → Craft rules: applies predicates
- Command orchestration → HTML packaging: runs packaging
- Film preparation → HTML packaging: provides prepared film
- HTML packaging → Shared film template: assembles template
- Shared film template → Beat template: uses beat template
- HTML packaging → Standalone film: writes HTML
- Preview browser → Film sources: previews edits
- Standalone film → Player controls: runs player
- Embedding host → Player controls: sends controls
- Player controls → Embedding host: posts events