# apj72/instagram-video-studio architecture

> Architecture diagram of the GitHub repository apj72/instagram-video-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/apj72/instagram-video-studio
- Repository: https://github.com/apj72/instagram-video-studio

## Overview

VERSION 1 is a browser-based animated-logo creator: users tune an animation in the visual editor, preview updates, then record a video or download a standalone HTML file. The standalone animation can also run directly in a browser with its embedded CONFIG. The documented runtime includes the logo, DJ text and effects, plus audio-style visual elements. Source excerpts were unavailable, so the links below reflect README-documented behavior; internal rendering and recording details are not inferred.

Main entry points: [`version1_animation_v5.html`](https://github.com/apj72/instagram-video-studio/blob/main/version1_animation_v5.html) (Portrait canvas), [`version1_editor.html`](https://github.com/apj72/instagram-video-studio/blob/main/version1_editor.html) (Video recording)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_editor["Visual editor"]
  node_editor["Parameter editor"]
  node_preview["Live preview"]
  node_updates["Live updates"]
end

subgraph group_runtime["Animation runtime"]
  node_config["Animation config"]
  node_canvas["Portrait canvas"]
  node_logo["Logo motion"]
  node_visuals["Spectrum visuals"]
  node_text["DJ text and box"]
  node_effects["Visual effects"]
end

subgraph group_outputs["Export outputs"]
  node_recording["Video recording"]
  node_download["HTML download"]
  node_video["Recorded video"]
  node_standalone["Standalone animation"]
end

node_user(("User"))
node_browser["Browser"]

node_user -->|"adjusts"| node_editor
node_editor -->|"updates"| node_preview
node_preview -->|"sends postMessage"| node_updates
node_updates -->|"updates config"| node_config
node_browser -->|"opens directly"| node_config
node_config -->|"drives rendering"| node_canvas
node_canvas -->|"renders"| node_logo
node_canvas -->|"renders"| node_visuals
node_canvas -->|"renders"| node_text
node_canvas -->|"renders"| node_effects
node_user -->|"starts capture"| node_recording
node_recording -->|"captures"| node_preview
node_recording -->|"produces"| node_video
node_user -->|"requests"| node_download
node_download -->|"generates"| node_standalone

click node_editor "https://github.com/apj72/instagram-video-studio/blob/main/version1_editor.html"
click node_preview "https://github.com/apj72/instagram-video-studio/blob/main/version1_editor.html"
click node_updates "https://github.com/apj72/instagram-video-studio/blob/main/version1_editor.html"
click node_recording "https://github.com/apj72/instagram-video-studio/blob/main/version1_editor.html"
click node_download "https://github.com/apj72/instagram-video-studio/blob/main/version1_editor.html"
click node_config "https://github.com/apj72/instagram-video-studio/blob/main/version1_animation_v5.html"
click node_canvas "https://github.com/apj72/instagram-video-studio/blob/main/version1_animation_v5.html"
click node_logo "https://github.com/apj72/instagram-video-studio/blob/main/version1_animation_v5.html"
click node_visuals "https://github.com/apj72/instagram-video-studio/blob/main/version1_animation_v5.html"
click node_text "https://github.com/apj72/instagram-video-studio/blob/main/version1_animation_v5.html"
click node_effects "https://github.com/apj72/instagram-video-studio/blob/main/version1_animation_v5.html"

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_editor,node_preview,node_updates,node_user,node_browser toneBlue
class node_config,node_canvas,node_logo,node_visuals,node_text,node_effects toneAmber
class node_recording,node_download,node_video,node_standalone toneMint
```

## Components

### Visual editor

- [Parameter editor](https://github.com/apj72/instagram-video-studio/blob/main/version1_editor.html): `version1_editor.html`
- [Live preview](https://github.com/apj72/instagram-video-studio/blob/main/version1_editor.html): `version1_editor.html`
- [Live updates](https://github.com/apj72/instagram-video-studio/blob/main/version1_editor.html): `version1_editor.html`

### Animation runtime

- [Animation config](https://github.com/apj72/instagram-video-studio/blob/main/version1_animation_v5.html): `version1_animation_v5.html`
- [Portrait canvas](https://github.com/apj72/instagram-video-studio/blob/main/version1_animation_v5.html): `version1_animation_v5.html`
- [Logo motion](https://github.com/apj72/instagram-video-studio/blob/main/version1_animation_v5.html): `version1_animation_v5.html`
- [Spectrum visuals](https://github.com/apj72/instagram-video-studio/blob/main/version1_animation_v5.html): `version1_animation_v5.html`
- [DJ text and box](https://github.com/apj72/instagram-video-studio/blob/main/version1_animation_v5.html): `version1_animation_v5.html`
- [Visual effects](https://github.com/apj72/instagram-video-studio/blob/main/version1_animation_v5.html): `version1_animation_v5.html`

### Export outputs

- [Video recording](https://github.com/apj72/instagram-video-studio/blob/main/version1_editor.html): `version1_editor.html`
- [HTML download](https://github.com/apj72/instagram-video-studio/blob/main/version1_editor.html): `version1_editor.html`
- **Recorded video**
- **Standalone animation**

### Other components

- **User**
- **Browser**

## Connections

- User → Parameter editor: adjusts
- Parameter editor → Live preview: updates
- Live preview → Live updates: sends postMessage
- Live updates → Animation config: updates config
- Browser → Animation config: opens directly
- Animation config → Portrait canvas: drives rendering
- Portrait canvas → Logo motion: renders
- Portrait canvas → Spectrum visuals: renders
- Portrait canvas → DJ text and box: renders
- Portrait canvas → Visual effects: renders
- User → Video recording: starts capture
- Video recording → Live preview: captures
- Video recording → Recorded video: produces
- User → HTML download: requests
- HTML download → Standalone animation: generates