# flavioduque/jsmotion-skill architecture

> Architecture diagram of the GitHub repository flavioduque/jsmotion-skill, 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/flavioduque/jsmotion-skill
- Repository: https://github.com/flavioduque/jsmotion-skill

## Overview

JSmotion is an agent-guided brand-video creation skill: a user supplies a logo and website, the agent researches and plans the video, then scripts support asset preparation, animation packaging, preview/review, and MP4 delivery. The README also describes reference-video styling, multiple aspect ratios, generated synchronized audio, and HTML download fallbacks. Source excerpts directly verify the renderer’s Chromium frame/audio capture and FFmpeg encoding/mastering; other script connections reflect the documented workflow, not inspected implementations.

Main entry points: [`scripts/render.py`](https://github.com/flavioduque/jsmotion-skill/blob/main/scripts/render.py) (Frame and audio render), [`scripts/build_html.py`](https://github.com/flavioduque/jsmotion-skill/blob/main/scripts/build_html.py) (Render page), [`scripts/scrape_site.py`](https://github.com/flavioduque/jsmotion-skill/blob/main/scripts/scrape_site.py) (Site research), [`scripts/prep_assets.py`](https://github.com/flavioduque/jsmotion-skill/blob/main/scripts/prep_assets.py) (Asset preparation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_creation["Creative workflow"]
  node_site_research["Site research<br/>[scrape_site.py]"]
  node_creative_plan["Video planning"]
  node_reference["Reference styling<br/>[snap.py]"]
  node_animation["Animation code<br/>[example_anim.js]"]
end

subgraph group_production["Video production"]
  node_asset_prep["Asset preparation<br/>[prep_assets.py]"]
  node_asset_pack["Asset packaging<br/>[pack.py]"]
  node_html["Render page<br/>[build_html.py]"]
  node_browser["Chromium"]
  node_render["Frame and audio render<br/>[render.py]"]
  node_ffmpeg["FFmpeg"]
end

subgraph group_delivery["Review and delivery"]
  node_mp4["Mastered MP4"]
  node_review["Review snapshots<br/>[snap.py]"]
  node_fallback["HTML fallback<br/>[build_html.py]"]
  node_suggestions["Next-video suggestions"]
end

node_user(("User"))
node_agent(("AI agent"))
node_web(("Brand website"))
node_logo["Brand logo"]

node_user -->|"requests video"| node_agent
node_user -->|"provides logo"| node_agent
node_agent -->|"studies site"| node_site_research
node_web -->|"site content"| node_site_research
node_agent -.->|"examines reference"| node_reference
node_agent -->|"asks and plans"| node_creative_plan
node_site_research -->|"informs plan"| node_creative_plan
node_reference -.->|"guides style"| node_creative_plan
node_creative_plan -->|"writes animation"| node_animation
node_agent -->|"prepares assets"| node_asset_prep
node_logo -->|"brand input"| node_asset_prep
node_asset_prep -->|"prepared assets"| node_asset_pack
node_agent -->|"packages project"| node_asset_pack
node_agent -->|"builds page"| node_html
node_animation -->|"animation code"| node_html
node_asset_pack -->|"assets"| node_html
node_agent -->|"runs render"| node_render
node_html -->|"page input"| node_render
node_render -->|"captures frames and audio"| node_browser
node_render -->|"encodes and masters"| node_ffmpeg
node_ffmpeg -->|"writes MP4"| node_mp4
node_agent -->|"reviews output"| node_review
node_mp4 -->|"preview source"| node_review
node_agent -->|"provides fallback"| node_fallback
node_mp4 -->|"download target"| node_fallback
node_agent -->|"offers suggestions"| node_suggestions
node_agent -->|"delivers files"| node_user

click node_site_research "https://github.com/flavioduque/jsmotion-skill/blob/main/scripts/scrape_site.py"
click node_reference "https://github.com/flavioduque/jsmotion-skill/blob/main/scripts/snap.py"
click node_animation "https://github.com/flavioduque/jsmotion-skill/blob/main/templates/example_anim.js"
click node_asset_prep "https://github.com/flavioduque/jsmotion-skill/blob/main/scripts/prep_assets.py"
click node_asset_pack "https://github.com/flavioduque/jsmotion-skill/blob/main/scripts/pack.py"
click node_html "https://github.com/flavioduque/jsmotion-skill/blob/main/scripts/build_html.py"
click node_render "https://github.com/flavioduque/jsmotion-skill/blob/main/scripts/render.py"
click node_review "https://github.com/flavioduque/jsmotion-skill/blob/main/scripts/snap.py"
click node_fallback "https://github.com/flavioduque/jsmotion-skill/blob/main/scripts/build_html.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_site_research,node_creative_plan,node_reference,node_animation,node_user toneBlue
class node_asset_prep,node_asset_pack,node_html,node_browser,node_render,node_ffmpeg toneAmber
class node_mp4,node_review,node_fallback,node_suggestions toneMint
class node_agent,node_web,node_logo toneIndigo
```

## Components

### Creative workflow

- [Site research](https://github.com/flavioduque/jsmotion-skill/blob/main/scripts/scrape_site.py): `scripts/scrape_site.py`
- **Video planning**
- [Reference styling](https://github.com/flavioduque/jsmotion-skill/blob/main/scripts/snap.py): `scripts/snap.py`
- [Animation code](https://github.com/flavioduque/jsmotion-skill/blob/main/templates/example_anim.js): `templates/example_anim.js`

### Video production

- [Asset preparation](https://github.com/flavioduque/jsmotion-skill/blob/main/scripts/prep_assets.py): `scripts/prep_assets.py`
- [Asset packaging](https://github.com/flavioduque/jsmotion-skill/blob/main/scripts/pack.py): `scripts/pack.py`
- [Render page](https://github.com/flavioduque/jsmotion-skill/blob/main/scripts/build_html.py): `scripts/build_html.py`
- **Chromium**
- [Frame and audio render](https://github.com/flavioduque/jsmotion-skill/blob/main/scripts/render.py): `scripts/render.py`
- **FFmpeg**

### Review and delivery

- **Mastered MP4**
- [Review snapshots](https://github.com/flavioduque/jsmotion-skill/blob/main/scripts/snap.py): `scripts/snap.py`
- [HTML fallback](https://github.com/flavioduque/jsmotion-skill/blob/main/scripts/build_html.py): `scripts/build_html.py`
- **Next-video suggestions**

### Other components

- **User**
- **AI agent**
- **Brand website**
- **Brand logo**

## Connections

- User → AI agent: requests video
- User → AI agent: provides logo
- AI agent → Site research: studies site
- Brand website → Site research: site content
- AI agent → Reference styling: examines reference
- AI agent → Video planning: asks and plans
- Site research → Video planning: informs plan
- Reference styling → Video planning: guides style
- Video planning → Animation code: writes animation
- AI agent → Asset preparation: prepares assets
- Brand logo → Asset preparation: brand input
- Asset preparation → Asset packaging: prepared assets
- AI agent → Asset packaging: packages project
- AI agent → Render page: builds page
- Animation code → Render page: animation code
- Asset packaging → Render page: assets
- AI agent → Frame and audio render: runs render
- Render page → Frame and audio render: page input
- Frame and audio render → Chromium: captures frames and audio
- Frame and audio render → FFmpeg: encodes and masters
- FFmpeg → Mastered MP4: writes MP4
- AI agent → Review snapshots: reviews output
- Mastered MP4 → Review snapshots: preview source
- AI agent → HTML fallback: provides fallback
- Mastered MP4 → HTML fallback: download target
- AI agent → Next-video suggestions: offers suggestions
- AI agent → User: delivers files