# zhaosenlin12-creator/motionsites architecture

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

- Interactive diagram: https://gitdiagram.com/zhaosenlin12-creator/motionsites
- Repository: https://github.com/zhaosenlin12-creator/motionsites

## Overview

MotionSites is a static, offline-first catalog for browsing, searching, previewing, and reusing motion-driven UI prompts. A visitor loads the page, which progressively fetches lightweight counts and card metadata; they can search and filter cards, open a prompt detail view, then copy its text or export it as Markdown. Preview media loads lazily as cards enter view. The README documents additional keyboard, spotlight, density, and localization features. The browser implementation is concentrated in `ms_script.js`; excerpts are partial, so uncertain internal call wiring is omitted.

Main entry points: [`ms_script.js`](https://github.com/zhaosenlin12-creator/motionsites/blob/main/ms_script.js) (Catalog interface), [`index.html`](https://github.com/zhaosenlin12-creator/motionsites/blob/main/index.html) (Catalog page), [`assets/fonts/fonts.css`](https://github.com/zhaosenlin12-creator/motionsites/blob/main/assets/fonts/fonts.css) (Local fonts), [`data/catalog-lite.json`](https://github.com/zhaosenlin12-creator/motionsites/blob/main/data/catalog-lite.json) (Lite catalog)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_browse["Catalog browsing"]
  node_page["Catalog page<br/>[index.html]"]
  node_client["Catalog interface<br/>[ms_script.js]"]
  node_search["Search and filters<br/>[ms_script.js]"]
  node_cards["Prompt cards<br/>[ms_script.js]"]
  node_fonts["Local fonts<br/>[fonts.css]"]
end

subgraph group_content["Catalog content"]
  node_lite["Lite catalog<br/>[catalog-lite.json]"]
  node_metadata["Card metadata<br/>[catalog-meta.json]"]
  node_textindex["Prompt text index"]
  node_promptfiles["Prompt bodies"]
end

subgraph group_media["Preview media"]
  node_previews["Preview assets"]
  node_communitypreviews["Community previews"]
end

subgraph group_actions["Prompt actions"]
  node_details["Prompt details<br/>[ms_script.js]"]
end

node_visitor(("Visitor"))
node_clipboard["Browser clipboard"]
node_download["Markdown export"]

node_visitor -->|"opens"| node_page
node_page -->|"loads script"| node_client
node_page -->|"loads fonts"| node_fonts
node_client -->|"fetches counts"| node_lite
node_client -->|"fetches cards"| node_metadata
node_visitor -->|"searches or filters"| node_search
node_search -->|"updates results"| node_cards
node_cards -->|"opens detail"| node_client
node_client -->|"fetches on detail"| node_textindex
node_client -->|"loads prompt body"| node_promptfiles
node_client -->|"loads visible media"| node_previews
node_client -->|"loads visible media"| node_communitypreviews
node_visitor -->|"copies or exports"| node_details
node_details -->|"copies text"| node_clipboard
node_details -->|"exports Markdown"| node_download

click node_page "https://github.com/zhaosenlin12-creator/motionsites/blob/main/index.html"
click node_client "https://github.com/zhaosenlin12-creator/motionsites/blob/main/ms_script.js"
click node_search "https://github.com/zhaosenlin12-creator/motionsites/blob/main/ms_script.js"
click node_cards "https://github.com/zhaosenlin12-creator/motionsites/blob/main/ms_script.js"
click node_details "https://github.com/zhaosenlin12-creator/motionsites/blob/main/ms_script.js"
click node_lite "https://github.com/zhaosenlin12-creator/motionsites/blob/main/data/catalog-lite.json"
click node_metadata "https://github.com/zhaosenlin12-creator/motionsites/blob/main/data/catalog-meta.json"
click node_textindex "https://github.com/zhaosenlin12-creator/motionsites/blob/main/data/catalog-text-index.json"
click node_promptfiles "https://github.com/zhaosenlin12-creator/motionsites/tree/main/data/catalog-text"
click node_previews "https://github.com/zhaosenlin12-creator/motionsites/tree/main/assets/previews"
click node_communitypreviews "https://github.com/zhaosenlin12-creator/motionsites/tree/main/assets/community/superdesign"
click node_fonts "https://github.com/zhaosenlin12-creator/motionsites/blob/main/assets/fonts/fonts.css"

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_page,node_client,node_search,node_cards,node_fonts,node_clipboard toneBlue
class node_lite,node_metadata,node_textindex,node_promptfiles toneAmber
class node_previews,node_communitypreviews toneMint
class node_details toneRose
class node_visitor,node_download toneIndigo
```

## Components

### Catalog browsing

- [Catalog page](https://github.com/zhaosenlin12-creator/motionsites/blob/main/index.html): `index.html`
- [Catalog interface](https://github.com/zhaosenlin12-creator/motionsites/blob/main/ms_script.js): `ms_script.js`
- [Search and filters](https://github.com/zhaosenlin12-creator/motionsites/blob/main/ms_script.js): `ms_script.js`
- [Prompt cards](https://github.com/zhaosenlin12-creator/motionsites/blob/main/ms_script.js): `ms_script.js`
- [Local fonts](https://github.com/zhaosenlin12-creator/motionsites/blob/main/assets/fonts/fonts.css): `assets/fonts/fonts.css`

### Catalog content

- [Lite catalog](https://github.com/zhaosenlin12-creator/motionsites/blob/main/data/catalog-lite.json): `data/catalog-lite.json`
- [Card metadata](https://github.com/zhaosenlin12-creator/motionsites/blob/main/data/catalog-meta.json): `data/catalog-meta.json`
- [Prompt text index](https://github.com/zhaosenlin12-creator/motionsites/blob/main/data/catalog-text-index.json): `data/catalog-text-index.json`
- [Prompt bodies](https://github.com/zhaosenlin12-creator/motionsites/tree/main/data/catalog-text): `data/catalog-text`

### Preview media

- [Preview assets](https://github.com/zhaosenlin12-creator/motionsites/tree/main/assets/previews): `assets/previews`
- [Community previews](https://github.com/zhaosenlin12-creator/motionsites/tree/main/assets/community/superdesign): `assets/community/superdesign`

### Prompt actions

- [Prompt details](https://github.com/zhaosenlin12-creator/motionsites/blob/main/ms_script.js): `ms_script.js`

### Other components

- **Visitor**
- **Browser clipboard**
- **Markdown export**

## Connections

- Visitor → Catalog page: opens
- Catalog page → Catalog interface: loads script
- Catalog page → Local fonts: loads fonts
- Catalog interface → Lite catalog: fetches counts
- Catalog interface → Card metadata: fetches cards
- Visitor → Search and filters: searches or filters
- Search and filters → Prompt cards: updates results
- Prompt cards → Catalog interface: opens detail
- Catalog interface → Prompt text index: fetches on detail
- Catalog interface → Prompt bodies: loads prompt body
- Catalog interface → Preview assets: loads visible media
- Catalog interface → Community previews: loads visible media
- Visitor → Prompt details: copies or exports
- Prompt details → Browser clipboard: copies text
- Prompt details → Markdown export: exports Markdown