docs: add animated showcase GIFs and streamline READMEs

- Replace static overview.png with two animated GIFs (structural + domain views)
- Reorder READMEs: Features section before Quick Start
- Remove redundant sections (Why, Who is this for, duplicate feature entries)
- Move project structure/tech stack/dev commands to CONTRIBUTING.md
- Homepage: use Supabase-hosted MP4 videos via GitHub variables, GIF fallback
- Add DEMO_STRUCTURAL_VIDEO_URL and DEMO_DOMAIN_VIDEO_URL to deploy workflow

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

.github/workflows/deploy-homepage.yml

@@ -39,6 +39,9 @@ jobs:
       - name: Build homepage
         working-directory: homepage
         run: pnpm build
+        env:
+          VITE_STRUCTURAL_VIDEO_URL: ${{ vars.DEMO_STRUCTURAL_VIDEO_URL }}
+          VITE_DOMAIN_VIDEO_URL: ${{ vars.DEMO_DOMAIN_VIDEO_URL }}
 
       - name: Build core
         run: pnpm --filter @understand-anything/core build

CONTRIBUTING.md

@@ -172,6 +172,10 @@ pnpm --filter @understand-anything/core test --watch
 - Use Zustand for state management
 - Follow the existing component structure
 
+### Tech Stack
+
+TypeScript, pnpm workspaces, React 18, Vite, TailwindCSS v4, React Flow, Zustand, web-tree-sitter, Fuse.js, Zod, Dagre
+
 ### File Organization
 
 ```

README.ja-JP.md

@@ -33,29 +33,53 @@ Understand Anything は [Claude Code](https://docs.anthropic.com/en/docs/claude-
 
 ---
 
-## 🤔 なぜ必要なのか？
+## ✨ 機能
 
-コードを読むのは大変です。コードベース全体を理解するのはさらに大変です。ドキュメントは常に古く、オンボーディングには数週間かかり、新機能の開発はまるで考古学のようです。
+### コード構造グラフを探索
 
-Understand Anything は、**LLMの知能**と**静的解析**を組み合わせることでこの問題を解決します。プロジェクトの生きた探索可能なマップを生成し、すべてに平易な日本語の説明が付きます。
+コードベースをインタラクティブなナレッジグラフとして表示——すべてのファイル、関数、クラスがクリック・検索・探索可能なノードです。ノードを選択すると、わかりやすい要約、依存関係、ガイド付きツアーが表示されます。
 
----
+<p align="center">
+  <img src="assets/overview-structural.gif" alt="構造グラフ——ファイル、関数、クラスとその関係を探索" width="750" />
+</p>
 
-## 🎯 誰のためのツール？
+### ビジネスロジックを理解
+
+ドメインビューに切り替えると、コードが実際のビジネスプロセスにどう対応するかが一目でわかります——ドメイン、フロー、ステップが横方向のグラフとして表示されます。
+
+<p align="center">
+  <img src="assets/overview-domain.gif" alt="ドメイングラフ——ビジネスドメイン、フロー、プロセスステップ" width="750" />
+</p>
 
 <table>
   <tr>
-    <td width="33%" valign="top">
-      <h3>👩‍💻 ジュニア開発者</h3>
-      <p>不慣れなコードに溺れるのはもう終わり。アーキテクチャをステップバイステップで案内するガイドツアーで、すべての関数やクラスが平易な言葉で説明されます。</p>
+    <td width="50%" valign="top">
+      <h3>🧭 ガイドツアー</h3>
+      <p>依存関係順に並べられた、自動生成のアーキテクチャウォークスルー。正しい順序でコードベースを学べます。</p>
     </td>
-    <td width="33%" valign="top">
-      <h3>📋 プロダクトマネージャー＆デザイナー</h3>
-      <p>コードを読まなくても、システムが実際にどう動くかを理解できます。「認証はどう動いているの？」のような質問をすれば、実際のコードベースに基づいた明確な回答が得られます。</p>
+    <td width="50%" valign="top">
+      <h3>🔍 ファジー＆セマンティック検索</h3>
+      <p>名前や意味で何でも検索できます。「認証を処理する部分は？」と検索すれば、グラフ全体から関連する結果が得られます。</p>
     </td>
-    <td width="33%" valign="top">
-      <h3>🤖 AI活用開発者</h3>
-      <p>AIツールにプロジェクトの深いコンテキストを与えましょう。コードレビュー前に <code>/understand-diff</code>、モジュールの詳細調査に <code>/understand-explain</code>、アーキテクチャの推論に <code>/understand-chat</code> を使えます。</p>
+  </tr>
+  <tr>
+    <td width="50%" valign="top">
+      <h3>📊 差分影響分析</h3>
+      <p>コミット前に、変更がシステムのどの部分に影響するかを確認。コードベース全体への波及効果を把握できます。</p>
+    </td>
+    <td width="50%" valign="top">
+      <h3>🎭 ペルソナ適応型UI</h3>
+      <p>ダッシュボードは、ジュニア開発者・PM・パワーユーザーなど、ユーザーに応じて詳細レベルを調整します。</p>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" valign="top">
+      <h3>🏗️ レイヤー可視化</h3>
+      <p>API・Service・Data・UI・Utilityなどのアーキテクチャ層ごとに自動グループ化。色分けされた凡例付き。</p>
+    </td>
+    <td width="50%" valign="top">
+      <h3>📚 言語コンセプト</h3>
+      <p>ジェネリクス・クロージャ・デコレータなど12のプログラミングパターンが、出現箇所のコンテキストで説明されます。</p>
     </td>
   </tr>
 </table>
@@ -190,67 +214,6 @@ Fetch and follow instructions from https://raw.githubusercontent.com/Lum1104/Und
 
 ---
 
-## ✨ 機能
-
-<p align="center">
-  <img src="assets/overview.png" alt="ダッシュボードスクリーンショット" width="800" />
-</p>
-
-<table>
-  <tr>
-    <td width="50%" valign="top">
-      <h3>🗺️ インタラクティブナレッジグラフ</h3>
-      <p>ファイル・関数・クラスとそれらの関係をReact Flowで可視化。ノードをクリックするとコードと接続関係が表示されます。</p>
-    </td>
-    <td width="50%" valign="top">
-      <h3>💬 平易な言葉での説明</h3>
-      <p>すべてのノードがLLMによって説明されるため、技術者でなくても、それが何をしているのか、なぜ存在するのかを理解できます。</p>
-    </td>
-  </tr>
-  <tr>
-    <td width="50%" valign="top">
-      <h3>🧭 ガイドツアー</h3>
-      <p>依存関係順に並べられた、自動生成のアーキテクチャウォークスルー。正しい順序でコードベースを学べます。</p>
-    </td>
-    <td width="50%" valign="top">
-      <h3>🔍 ファジー＆セマンティック検索</h3>
-      <p>名前や意味で何でも検索できます。「認証を処理する部分は？」と検索すれば、グラフ全体から関連する結果が得られます。</p>
-    </td>
-  </tr>
-  <tr>
-    <td width="50%" valign="top">
-      <h3>📊 差分影響分析</h3>
-      <p>コミット前に、変更がシステムのどの部分に影響するかを確認。コードベース全体への波及効果を把握できます。</p>
-    </td>
-    <td width="50%" valign="top">
-      <h3>🎭 ペルソナ適応型UI</h3>
-      <p>ダッシュボードは、ジュニア開発者・PM・パワーユーザーなど、ユーザーに応じて詳細レベルを調整します。</p>
-    </td>
-  </tr>
-  <tr>
-    <td width="50%" valign="top">
-      <h3>🏗️ レイヤー可視化</h3>
-      <p>API・Service・Data・UI・Utilityなどのアーキテクチャ層ごとに自動グループ化。色分けされた凡例付き。</p>
-    </td>
-    <td width="50%" valign="top">
-      <h3>📚 言語コンセプト</h3>
-      <p>ジェネリクス・クロージャ・デコレータなど12のプログラミングパターンが、出現箇所のコンテキストで説明されます。</p>
-    </td>
-  </tr>
-  <tr>
-    <td width="50%" valign="top">
-      <h3>🏢 ビジネスドメイン知識</h3>
-      <p>コードベースからビジネスドメイン、フロー、処理ステップを抽出。インタラクティブな水平フローグラフでビジネスロジックがコードにどうマッピングされるかを確認 — ドメインにはフロー、フローにはステップが含まれます。</p>
-    </td>
-    <td width="50%" valign="top">
-      <h3>🔀 構造 + ドメインビュー</h3>
-      <p>ダッシュボードでコード構造グラフとビジネスドメイングラフを切り替え。コードの組織方法と、それが実装するビジネスプロセスの両方を理解できます。</p>
-    </td>
-  </tr>
-</table>
-
----
-
 ## 🔧 内部の仕組み
 
 ### マルチエージェントパイプライン
@@ -268,35 +231,6 @@ Fetch and follow instructions from https://raw.githubusercontent.com/Lum1104/Und
 
 ファイルアナライザーは並列実行されます（最大3つ同時）。インクリメンタル更新に対応しており、前回の実行から変更されたファイルのみを再分析します。
 
-### プロジェクト構成
-
-```
-understand-anything-plugin/
-  .claude-plugin/  — プラグインマニフェスト
-  agents/          — 専門AIエージェント
-  skills/          — スキル定義（/understand、/understand-chatなど）
-  src/             — TypeScriptソース（context-builder、diff-analyzerなど）
-  packages/
-    core/          — 分析エンジン（types、persistence、tree-sitter、search、schema、tours）
-    dashboard/     — React + TypeScript Webダッシュボード
-```
-
-### 技術スタック
-
-TypeScript、pnpm workspaces、React 18、Vite、TailwindCSS v4、React Flow、Zustand、web-tree-sitter、Fuse.js、Zod、Dagre
-
-### 開発コマンド
-
-| コマンド | 説明 |
-|---------|-------------|
-| `pnpm install` | すべての依存関係をインストール |
-| `pnpm --filter @understand-anything/core build` | coreパッケージをビルド |
-| `pnpm --filter @understand-anything/core test` | coreテストを実行 |
-| `pnpm --filter @understand-anything/skill build` | プラグインパッケージをビルド |
-| `pnpm --filter @understand-anything/skill test` | プラグインテストを実行 |
-| `pnpm --filter @understand-anything/dashboard build` | ダッシュボードをビルド |
-| `pnpm dev:dashboard` | ダッシュボード開発サーバーを起動 |
-
 ---
 
 ## 🤝 コントリビュート

README.md

@@ -33,29 +33,53 @@ Understand Anything is a [Claude Code](https://docs.anthropic.com/en/docs/claude
 
 ---
 
-## 🤔 Why?
+## ✨ Features
 
-Reading code is hard. Understanding a whole codebase is harder. Documentation is always out of date, onboarding takes weeks, and every new feature feels like archaeology.
+### Explore the structural graph
 
-Understand Anything fixes this by combining **LLM intelligence** with **static analysis** to produce a living, explorable map of your project — with plain-English explanations for everything.
+Navigate your codebase as an interactive knowledge graph — every file, function, and class is a node you can click, search, and explore. Select any node to see plain-English summaries, relationships, and guided tours.
 
----
+<p align="center">
+  <img src="assets/overview-structural.gif" alt="Structural graph — explore files, functions, classes and their relationships" width="750" />
+</p>
 
-## 🎯 Who is this for?
+### Understand business logic
+
+Switch to the domain view and see how your code maps to real business processes — domains, flows, and steps laid out as a horizontal graph.
+
+<p align="center">
+  <img src="assets/overview-domain.gif" alt="Domain graph — business domains, flows, and process steps" width="750" />
+</p>
 
 <table>
   <tr>
-    <td width="33%" valign="top">
-      <h3>👩‍💻 Junior Developers</h3>
-      <p>Stop drowning in unfamiliar code. Get guided tours that walk you through the architecture step by step, with every function and class explained in plain English.</p>
+    <td width="50%" valign="top">
+      <h3>🧭 Guided Tours</h3>
+      <p>Auto-generated walkthroughs of the architecture, ordered by dependency. Learn the codebase in the right order.</p>
     </td>
-    <td width="33%" valign="top">
-      <h3>📋 Product Managers & Designers</h3>
-      <p>Finally understand how the system actually works without reading code. Ask questions like "how does authentication work?" and get clear answers grounded in the real codebase.</p>
+    <td width="50%" valign="top">
+      <h3>🔍 Fuzzy & Semantic Search</h3>
+      <p>Find anything by name or by meaning. Search "which parts handle auth?" and get relevant results across the graph.</p>
     </td>
-    <td width="33%" valign="top">
-      <h3>🤖 AI-Assisted Developers</h3>
-      <p>Give your AI tools deep context about your project. Use <code>/understand-diff</code> before code review, <code>/understand-explain</code> to dive into any module, or <code>/understand-chat</code> to reason about architecture.</p>
+  </tr>
+  <tr>
+    <td width="50%" valign="top">
+      <h3>📊 Diff Impact Analysis</h3>
+      <p>See which parts of the system your changes affect before you commit. Understand ripple effects across the codebase.</p>
+    </td>
+    <td width="50%" valign="top">
+      <h3>🎭 Persona-Adaptive UI</h3>
+      <p>The dashboard adjusts its detail level based on who you are — junior dev, PM, or power user.</p>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" valign="top">
+      <h3>🏗️ Layer Visualization</h3>
+      <p>Automatic grouping by architectural layer — API, Service, Data, UI, Utility — with color-coded legend.</p>
+    </td>
+    <td width="50%" valign="top">
+      <h3>📚 Language Concepts</h3>
+      <p>12 programming patterns (generics, closures, decorators, etc.) explained in context wherever they appear.</p>
     </td>
   </tr>
 </table>
@@ -190,67 +214,6 @@ Fetch and follow instructions from https://raw.githubusercontent.com/Lum1104/Und
 
 ---
 
-## ✨ Features
-
-<p align="center">
-  <img src="assets/overview.png" alt="Dashboard Screenshot" width="800" />
-</p>
-
-<table>
-  <tr>
-    <td width="50%" valign="top">
-      <h3>🗺️ Interactive Knowledge Graph</h3>
-      <p>Files, functions, classes, and their relationships visualized with React Flow. Click any node to see its code and connections.</p>
-    </td>
-    <td width="50%" valign="top">
-      <h3>💬 Plain-English Summaries</h3>
-      <p>Every node described by an LLM so anyone — technical or not — can understand what it does and why it exists.</p>
-    </td>
-  </tr>
-  <tr>
-    <td width="50%" valign="top">
-      <h3>🧭 Guided Tours</h3>
-      <p>Auto-generated walkthroughs of the architecture, ordered by dependency. Learn the codebase in the right order.</p>
-    </td>
-    <td width="50%" valign="top">
-      <h3>🔍 Fuzzy & Semantic Search</h3>
-      <p>Find anything by name or by meaning. Search "which parts handle auth?" and get relevant results across the graph.</p>
-    </td>
-  </tr>
-  <tr>
-    <td width="50%" valign="top">
-      <h3>📊 Diff Impact Analysis</h3>
-      <p>See which parts of the system your changes affect before you commit. Understand ripple effects across the codebase.</p>
-    </td>
-    <td width="50%" valign="top">
-      <h3>🎭 Persona-Adaptive UI</h3>
-      <p>The dashboard adjusts its detail level based on who you are — junior dev, PM, or power user.</p>
-    </td>
-  </tr>
-  <tr>
-    <td width="50%" valign="top">
-      <h3>🏗️ Layer Visualization</h3>
-      <p>Automatic grouping by architectural layer — API, Service, Data, UI, Utility — with color-coded legend.</p>
-    </td>
-    <td width="50%" valign="top">
-      <h3>📚 Language Concepts</h3>
-      <p>12 programming patterns (generics, closures, decorators, etc.) explained in context wherever they appear.</p>
-    </td>
-  </tr>
-  <tr>
-    <td width="50%" valign="top">
-      <h3>🏢 Business Domain Knowledge</h3>
-      <p>Extract business domains, flows, and process steps from your codebase. See how business logic maps to code with an interactive horizontal flow graph — domains contain flows, flows contain steps.</p>
-    </td>
-    <td width="50%" valign="top">
-      <h3>🔀 Structural + Domain Views</h3>
-      <p>Toggle between the structural code graph and the business domain graph in the dashboard. Understand both how the code is organized and what business processes it implements.</p>
-    </td>
-  </tr>
-</table>
-
----
-
 ## 🔧 Under the Hood
 
 ### Multi-Agent Pipeline
@@ -268,35 +231,6 @@ The `/understand` command orchestrates 5 specialized agents, and `/understand-do
 
 File analyzers run in parallel (up to 5 concurrent, 20-30 files per batch). Supports incremental updates — only re-analyzes files that changed since the last run.
 
-### Project Structure
-
-```
-understand-anything-plugin/
-  .claude-plugin/  — Plugin manifest
-  agents/          — Specialized AI agents
-  skills/          — Skill definitions (/understand, /understand-chat, etc.)
-  src/             — TypeScript source (context-builder, diff-analyzer, etc.)
-  packages/
-    core/          — Analysis engine (types, persistence, tree-sitter, search, schema, tours)
-    dashboard/     — React + TypeScript web dashboard
-```
-
-### Tech Stack
-
-TypeScript, pnpm workspaces, React 18, Vite, TailwindCSS v4, React Flow, Zustand, web-tree-sitter, Fuse.js, Zod, Dagre
-
-### Development Commands
-
-| Command | Description |
-|---------|-------------|
-| `pnpm install` | Install all dependencies |
-| `pnpm --filter @understand-anything/core build` | Build the core package |
-| `pnpm --filter @understand-anything/core test` | Run core tests |
-| `pnpm --filter @understand-anything/skill build` | Build the plugin package |
-| `pnpm --filter @understand-anything/skill test` | Run plugin tests |
-| `pnpm --filter @understand-anything/dashboard build` | Build the dashboard |
-| `pnpm dev:dashboard` | Start dashboard dev server |
-
 ---
 
 ## 🤝 Contributing

README.tr-TR.md

@@ -33,29 +33,53 @@ Understand Anything, projenizi çok-ajan hattıyla analiz eden, her dosya, fonks
 
 ---
 
-## 🤔 Neden?
+## ✨ Özellikler
 
-Kod okumak zor. Bütün bir kod tabanını anlamak daha da zor. Dokümantasyon her zaman güncel değil, işe alıştırma haftalar alıyor ve her yeni özellik arkeoloji gibi hissettiriyor.
+### Yapısal grafiği keşfedin
 
-Understand Anything bunu **LLM zekası** ile **statik analizi** birleştirerek çözüyor ve projenin canlı, keşfedilebilir bir haritasını üretiyor — her şey için sade Türkçe açıklamalarla.
+Kod tabanınızı interaktif bir bilgi grafiği olarak görüntüleyin — her dosya, fonksiyon ve sınıf tıklanabilir, aranabilir ve keşfedilebilir bir düğümdür. Herhangi bir düğümü seçerek anlaşılır özetleri, bağımlılıkları ve rehberli turları görün.
 
----
+<p align="center">
+  <img src="assets/overview-structural.gif" alt="Yapısal grafik — dosyaları, fonksiyonları, sınıfları ve ilişkilerini keşfedin" width="750" />
+</p>
 
-## 🎯 Kimler için?
+### İş mantığını anlayın
+
+Alan görünümüne geçin ve kodunuzun gerçek iş süreçleriyle nasıl eşleştiğini görün — alanlar, akışlar ve adımlar yatay bir grafik olarak sunulur.
+
+<p align="center">
+  <img src="assets/overview-domain.gif" alt="Alan grafiği — iş alanları, akışlar ve süreç adımları" width="750" />
+</p>
 
 <table>
   <tr>
-    <td width="33%" valign="top">
-      <h3>👩‍💻 Junior Geliştiriciler</h3>
-      <p>Tanımadığın kodda boğulmayı bırak. Her fonksiyon ve sınıfın sade Türkçe açıklandığı, mimariyi adım adım anlatan rehberli turlar al.</p>
+    <td width="50%" valign="top">
+      <h3>🧭 Rehberli Turlar</h3>
+      <p>Bağımlılığa göre sıralanmış, mimarinin otomatik oluşturulmuş gözden geçirmeleri. Kod tabanını doğru sırayla öğren.</p>
     </td>
-    <td width="33%" valign="top">
-      <h3>📋 Ürün Yöneticileri ve Tasarımcılar</h3>
-      <p>Kod okumadan sistemin gerçekte nasıl çalıştığını nihayet anla. "Kimlik doğrulama nasıl çalışır?" gibi sorular sor ve gerçek kod tabanına dayalı net cevaplar al.</p>
+    <td width="50%" valign="top">
+      <h3>🔍 Bulanık ve Anlamsal Arama</h3>
+      <p>İsme veya anlamına göre her şeyi bul. "Kimlik doğrulamayı hangi parçalar yönetiyor?" ara ve grafik boyunca ilgili sonuçları al.</p>
     </td>
-    <td width="33%" valign="top">
-      <h3>🤖 AI Destekli Geliştiriciler</h3>
-      <p>AI araçlarına projen hakkında derin bağlam ver. Kod incelemeden önce <code>/understand-diff</code>, herhangi bir modüle dalmak için <code>/understand-explain</code> veya mimari hakkında akıl yürütmek için <code>/understand-chat</code> kullan.</p>
+  </tr>
+  <tr>
+    <td width="50%" valign="top">
+      <h3>📊 Diff Etki Analizi</h3>
+      <p>Değişikliklerinin sistemin hangi bölümlerini etkilediğini commit etmeden önce gör. Kod tabanı boyunca dalgalanma etkilerini anla.</p>
+    </td>
+    <td width="50%" valign="top">
+      <h3>🎭 Kişiye Uyarlanabilir UI</h3>
+      <p>Kontrol paneli, kim olduğuna göre ayrıntı seviyesini ayarlar — junior geliştirici, ürün yöneticisi veya güçlü kullanıcı.</p>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" valign="top">
+      <h3>🏗️ Katman Görselleştirmesi</h3>
+      <p>Mimari katmana göre otomatik gruplama — API, Servis, Veri, UI, Yardımcı — renk kodlu efsaneyle.</p>
+    </td>
+    <td width="50%" valign="top">
+      <h3>📚 Dil Kavramları</h3>
+      <p>12 programlama deseni (generikler, kapanışlar, dekoratörler, vb.) göründükleri her yerde bağlam içinde açıklanır.</p>
     </td>
   </tr>
 </table>
@@ -190,67 +214,6 @@ Fetch and follow instructions from https://raw.githubusercontent.com/Lum1104/Und
 
 ---
 
-## ✨ Özellikler
-
-<p align="center">
-  <img src="assets/overview.png" alt="Kontrol Paneli Ekran Görüntüsü" width="800" />
-</p>
-
-<table>
-  <tr>
-    <td width="50%" valign="top">
-      <h3>🗺️ İnteraktif Bilgi Grafiği</h3>
-      <p>Dosyalar, fonksiyonlar, sınıflar ve ilişkileri React Flow ile görselleştirildi. Kodunu ve bağlantılarını görmek için herhangi bir düğüme tıkla.</p>
-    </td>
-    <td width="50%" valign="top">
-      <h3>💬 Sade Türkçe Özetler</h3>
-      <p>Her düğüm bir LLM tarafından açıklanır, böylece herkes — teknik olsun ya da olmasın — ne yaptığını ve neden var olduğunu anlayabilir.</p>
-    </td>
-  </tr>
-  <tr>
-    <td width="50%" valign="top">
-      <h3>🧭 Rehberli Turlar</h3>
-      <p>Bağımlılığa göre sıralanmış, mimarinin otomatik oluşturulmuş gözden geçirmeleri. Kod tabanını doğru sırayla öğren.</p>
-    </td>
-    <td width="50%" valign="top">
-      <h3>🔍 Bulanık ve Anlamsal Arama</h3>
-      <p>İsme veya anlamına göre her şeyi bul. "Kimlik doğrulamayı hangi parçalar yönetiyor?" ara ve grafik boyunca ilgili sonuçları al.</p>
-    </td>
-  </tr>
-  <tr>
-    <td width="50%" valign="top">
-      <h3>📊 Diff Etki Analizi</h3>
-      <p>Değişikliklerinin sistemin hangi bölümlerini etkilediğini commit etmeden önce gör. Kod tabanı boyunca dalgalanma etkilerini anla.</p>
-    </td>
-    <td width="50%" valign="top">
-      <h3>🎭 Kişiye Uyarlanabilir UI</h3>
-      <p>Kontrol paneli, kim olduğuna göre ayrıntı seviyesini ayarlar — junior geliştirici, ürün yöneticisi veya güçlü kullanıcı.</p>
-    </td>
-  </tr>
-  <tr>
-    <td width="50%" valign="top">
-      <h3>🏗️ Katman Görselleştirmesi</h3>
-      <p>Mimari katmana göre otomatik gruplama — API, Servis, Veri, UI, Yardımcı — renk kodlu efsaneyle.</p>
-    </td>
-    <td width="50%" valign="top">
-      <h3>📚 Dil Kavramları</h3>
-      <p>12 programlama deseni (generikler, kapanışlar, dekoratörler, vb.) göründükleri her yerde bağlam içinde açıklanır.</p>
-    </td>
-  </tr>
-  <tr>
-    <td width="50%" valign="top">
-      <h3>🏢 İş Alanı Bilgisi</h3>
-      <p>Kod tabanından iş alanları, akışlar ve işlem adımları çıkar. Etkileşimli yatay akış grafiğiyle iş mantığının koda nasıl eşlendiğini gör — alanlar akışları, akışlar adımları içerir.</p>
-    </td>
-    <td width="50%" valign="top">
-      <h3>🔀 Yapısal + Alan Görünümleri</h3>
-      <p>Kontrol panelinde yapısal kod grafiği ile iş alanı grafiği arasında geçiş yap. Hem kodun nasıl organize edildiğini hem de hangi iş süreçlerini uyguladığını anla.</p>
-    </td>
-  </tr>
-</table>
-
----
-
 ## 🔧 Kaputun Altında
 
 ### Çok-Ajan Hattı
@@ -268,35 +231,6 @@ Fetch and follow instructions from https://raw.githubusercontent.com/Lum1104/Und
 
 Dosya analizörleri paralel çalışır (en fazla 3 eşzamanlı). Artımlı güncellemeleri destekler — yalnızca son çalıştırmadan bu yana değişen dosyaları yeniden analiz eder.
 
-### Proje Yapısı
-
-```
-understand-anything-plugin/
-  .claude-plugin/  — Eklenti manifestosu
-  agents/          — Özel AI ajanları
-  skills/          — Yetenek tanımları (/understand, /understand-chat, vb.)
-  src/             — TypeScript kaynağı (context-builder, diff-analyzer, vb.)
-  packages/
-    core/          — Analiz motoru (tipler, kalıcılık, tree-sitter, arama, şema, turlar)
-    dashboard/     — React + TypeScript web kontrol paneli
-```
-
-### Teknoloji Yığını
-
-TypeScript, pnpm workspaces, React 18, Vite, TailwindCSS v4, React Flow, Zustand, web-tree-sitter, Fuse.js, Zod, Dagre
-
-### Geliştirme Komutları
-
-| Komut | Açıklama |
-|---------|-------------|
-| `pnpm install` | Tüm bağımlılıkları yükle |
-| `pnpm --filter @understand-anything/core build` | Core paketini derle |
-| `pnpm --filter @understand-anything/core test` | Core testlerini çalıştır |
-| `pnpm --filter @understand-anything/skill build` | Eklenti paketini derle |
-| `pnpm --filter @understand-anything/skill test` | Eklenti testlerini çalıştır |
-| `pnpm --filter @understand-anything/dashboard build` | Kontrol panelini derle |
-| `pnpm dev:dashboard` | Kontrol paneli geliştirme sunucusunu başlat |
-
 ---
 
 ## 🤝 Katkıda Bulunma

README.zh-CN.md

@@ -32,29 +32,53 @@ Understand Anything 是一个基于 [Claude Code](https://docs.anthropic.com/en/
 
 ---
 
-## 🤔 为什么需要它？
+## ✨ 核心功能
 
-阅读代码已经很难，理解整个系统更难。文档往往过时，上手周期长达数周，新功能开发像考古。
+### 探索代码结构图
 
-Understand Anything 通过结合 **大语言模型（LLM）**与**静态代码分析**去生成一个**动态、可探索的代码知识地图** — 并提供自然语言解释。
+将你的代码库以交互式知识图谱的形式呈现——每个文件、函数和类都是可点击、可搜索、可探索的节点。选择任意节点即可查看通俗易懂的摘要、依赖关系和引导式学习路径。
 
----
+<p align="center">
+  <img src="assets/overview-structural.gif" alt="结构图——探索文件、函数、类及其关系" width="750" />
+</p>
 
-## 🎯 适用人群
+### 理解业务逻辑
+
+切换到领域视图，查看代码如何映射到真实的业务流程——以水平图的形式展示领域、流程和步骤。
+
+<p align="center">
+  <img src="assets/overview-domain.gif" alt="领域图——业务领域、流程和处理步骤" width="750" />
+</p>
 
 <table>
   <tr>
-    <td width="33%" valign="top">
-      <h3>👩‍💻 入门级开发者</h3>
-      <p>不再被陌生代码淹没。通过结构化引导逐步理解系统架构，每个函数和类都有简明易懂的解释。</p>
+    <td width="50%" valign="top">
+      <h3>🧭 引导式学习</h3>
+      <p>自动生成架构学习路径，按依赖顺序学习。</p>
     </td>
-    <td width="33%" valign="top">
-      <h3>📋 产品经理 & 设计师</h3>
-      <p>无需阅读代码，也能理解系统逻辑。比如直接提问：“认证流程是怎么实现的？” 便可获得基于实际代码库的清晰答案。</p>
+    <td width="50%" valign="top">
+      <h3>🔍 语义搜索</h3>
+      <p>支持模糊搜索 + 语义搜索，例如搜索"哪些部分处理身份验证？"即可在整个图中获取相关结果。</p>
     </td>
-    <td width="33%" valign="top">
-      <h3>🤖 AI协同开发者</h3>
-      <p>让你的 AI 工具深入了解你的项目。在代码审查之前使用<code>/understand-diff</code>，在深入任何模块时使用<code>/understand-explain</code>，或在架构分析中使用 <code>/understand-chat</code></p>
+  </tr>
+  <tr>
+    <td width="50%" valign="top">
+      <h3>📊 变更影响分析</h3>
+      <p>提交更改前，查看更改会影响系统的哪些部分。了解更改对整个代码库的连锁反应。</p>
+    </td>
+    <td width="50%" valign="top">
+      <h3>🎭 用户角色自适应 UI</h3>
+      <p>根据用户类型（初级开发 / 项目经理 / 高级用户）调整其详细程度。</p>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" valign="top">
+      <h3>🏗️ 层级可视化</h3>
+      <p>按架构层级自动分组 — API，服务，数据，UI, 系统工具 — 并附有颜色编码图例。</p>
+    </td>
+    <td width="50%" valign="top">
+      <h3>📚 语言概念</h3>
+      <p>12 种编程模式（泛型、闭包、装饰器等）将在上下文中逐一解释。</p>
     </td>
   </tr>
 </table>
@@ -189,67 +213,6 @@ Fetch and follow instructions from https://raw.githubusercontent.com/Lum1104/Und
 
 ---
 
-## ✨ 核心功能
-
-<p align="center">
-  <img src="assets/overview.png" alt="Dashboard Screenshot" width="800" />
-</p>
-
-<table>
-  <tr>
-    <td width="50%" valign="top">
-      <h3>🗺️ 交互式知识图谱</h3>
-      <p>使用 React Flow 可视化文件、函数、类及其关系。点击任意节点即可查看其代码和连接。</p>
-    </td>
-    <td width="50%" valign="top">
-      <h3>💬 简明语言解释</h3>
-      <p>LLM 自动生成解释，让非技术人员也能理解代码。</p>
-    </td>
-  </tr>
-  <tr>
-    <td width="50%" valign="top">
-      <h3>🧭 引导式学习</h3>
-      <p>自动生成架构学习路径，按依赖顺序学习。</p>
-    </td>
-    <td width="50%" valign="top">
-      <h3>🔍 语义搜索</h3>
-      <p>支持模糊搜索 + 语义搜索，例如搜索“哪些部分处理身份验证？”即可在整个图中获取相关结果。</p>
-    </td>
-  </tr>
-  <tr>
-    <td width="50%" valign="top">
-      <h3>📊 变更影响分析</h3>
-      <p>提交更改前，查看更改会影响系统的哪些部分。了解更改对整个代码库的连锁反应。</p>
-    </td>
-    <td width="50%" valign="top">
-      <h3>🎭 用户角色自适应 UI</h3>
-      <p>根据用户类型（初级开发 / 项目经理 / 高级用户）调整其详细程度。</p>
-    </td>
-  </tr>
-  <tr>
-    <td width="50%" valign="top">
-      <h3>🏗️ 层级可视化</h3>
-      <p>按架构层级自动分组 — API，服务，数据，UI, 系统工具 — 并附有颜色编码图例。</p>
-    </td>
-    <td width="50%" valign="top">
-      <h3>📚 语言概念</h3>
-      <p>12 种编程模式（泛型、闭包、装饰器等）将在上下文中逐一解释。</p>
-    </td>
-  </tr>
-  <tr>
-    <td width="50%" valign="top">
-      <h3>🏢 业务领域知识</h3>
-      <p>从代码库中提取业务领域、流程和处理步骤。通过交互式水平流程图查看业务逻辑如何映射到代码 — 领域包含流程，流程包含步骤。</p>
-    </td>
-    <td width="50%" valign="top">
-      <h3>🔀 结构 + 领域双视图</h3>
-      <p>在数据看板中切换代码结构图和业务领域图。同时理解代码的组织方式和它实现的业务流程。</p>
-    </td>
-  </tr>
-</table>
-
----
-
 ## 🔧 技术原理
 
 ### 多智能体架构
@@ -267,35 +230,6 @@ Fetch and follow instructions from https://raw.githubusercontent.com/Lum1104/Und
 
 文件分析器并行运行（最多 3 个并发）。支持增量更新 — 仅重新分析自上次运行以来发生更改的文件。
 
-### 项目结构
-
-```
-understand-anything-plugin/
-  .claude-plugin/  — 插件清单
-  agents/          — 专业 AI 智能体
-  skills/          — Skill 定义 (/understand, /understand-chat, etc.)
-  src/             — TypeScript 源代码 (context-builder, diff-analyzer, etc.)
-  packages/
-    core/          — 分析引擎 (types, persistence, tree-sitter, search, schema, tours)
-    dashboard/     — React + TypeScript 网页数据看板
-```
-
-### 技术栈
-
-TypeScript, pnpm workspaces, React 18, Vite, TailwindCSS v4, React Flow, Zustand, web-tree-sitter, Fuse.js, Zod, Dagre
-
-### 开发命令
-
-| 命令 | 描述 |
-|---------|-------------|
-| `pnpm install` | 安装所有依赖项 |
-| `pnpm --filter @understand-anything/core build` | 构建核心包 |
-| `pnpm --filter @understand-anything/core test` | 运行核心测试 |
-| `pnpm --filter @understand-anything/skill build` | 构建插件包 |
-| `pnpm --filter @understand-anything/skill test` | 运行插件测试 |
-| `pnpm --filter @understand-anything/dashboard build` | 构建数据看板 |
-| `pnpm dev:dashboard` | 启动数据看板开发服务器 |
-
 ---
 
 ## 🤝 贡献

README.zh-TW.md

@@ -32,29 +32,53 @@ Understand Anything 是一個基於 [Claude Code](https://docs.anthropic.com/en/
 
 ---
 
-## 🤔 為什麼需要它？
+## ✨ 核心功能
 
-閱讀程式碼已經很難，理解整個系統更難。文件往往過時，上手週期長達數週，新功能開發像考古。
+### 探索程式碼結構圖
 
-Understand Anything 透過結合**大型語言模型（LLM）**與**靜態程式碼分析**去產生一個**動態、可探索的程式碼知識地圖** — 並提供自然語言解釋。
+將你的程式碼庫以互動式知識圖譜呈現——每個檔案、函式和類別都是可點擊、可搜尋、可探索的節點。選取任意節點即可檢視淺顯易懂的摘要、依賴關係和引導式學習路徑。
 
----
+<p align="center">
+  <img src="assets/overview-structural.gif" alt="結構圖——探索檔案、函式、類別及其關係" width="750" />
+</p>
 
-## 🎯 適用對象
+### 理解業務邏輯
+
+切換到領域視圖，查看程式碼如何對應到真實的業務流程——以水平圖的形式展示領域、流程和步驟。
+
+<p align="center">
+  <img src="assets/overview-domain.gif" alt="領域圖——業務領域、流程和處理步驟" width="750" />
+</p>
 
 <table>
   <tr>
-    <td width="33%" valign="top">
-      <h3>👩‍💻 入門級開發者</h3>
-      <p>不再被陌生程式碼淹沒。透過結構化引導逐步理解系統架構，每個函式和類別都有簡明易懂的解釋。</p>
+    <td width="50%" valign="top">
+      <h3>🧭 引導式學習</h3>
+      <p>自動產生架構學習路徑，按相依順序學習。</p>
     </td>
-    <td width="33%" valign="top">
-      <h3>📋 產品經理 & 設計師</h3>
-      <p>無需閱讀程式碼，也能理解系統邏輯。比如直接提問：「認證流程是怎麼實作的？」便可獲得基於實際程式碼庫的清晰答案。</p>
+    <td width="50%" valign="top">
+      <h3>🔍 語意搜尋</h3>
+      <p>支援模糊搜尋 + 語意搜尋，例如搜尋「哪些部分處理身分驗證？」即可在整個圖中獲取相關結果。</p>
     </td>
-    <td width="33%" valign="top">
-      <h3>🤖 AI 協同開發者</h3>
-      <p>讓你的 AI 工具深入了解你的專案。在程式碼審查之前使用 <code>/understand-diff</code>，在深入任何模組時使用 <code>/understand-explain</code>，或在架構分析中使用 <code>/understand-chat</code></p>
+  </tr>
+  <tr>
+    <td width="50%" valign="top">
+      <h3>📊 變更影響分析</h3>
+      <p>提交變更前，查看變更會影響系統的哪些部分。了解變更對整個程式碼庫的連鎖反應。</p>
+    </td>
+    <td width="50%" valign="top">
+      <h3>🎭 使用者角色自適應 UI</h3>
+      <p>根據使用者類型（初級開發 / 專案經理 / 進階使用者）調整其詳細程度。</p>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" valign="top">
+      <h3>🏗️ 層級視覺化</h3>
+      <p>按架構層級自動分組 — API、服務、資料、UI、系統工具 — 並附有顏色編碼圖例。</p>
+    </td>
+    <td width="50%" valign="top">
+      <h3>📚 語言概念</h3>
+      <p>12 種程式設計模式（泛型、閉包、裝飾器等）將在上下文中逐一解釋。</p>
     </td>
   </tr>
 </table>
@@ -189,67 +213,6 @@ Fetch and follow instructions from https://raw.githubusercontent.com/Lum1104/Und
 
 ---
 
-## ✨ 核心功能
-
-<p align="center">
-  <img src="assets/overview.png" alt="Dashboard Screenshot" width="800" />
-</p>
-
-<table>
-  <tr>
-    <td width="50%" valign="top">
-      <h3>🗺️ 互動式知識圖譜</h3>
-      <p>使用 React Flow 視覺化檔案、函式、類別及其關係。點擊任意節點即可查看其程式碼和連接。</p>
-    </td>
-    <td width="50%" valign="top">
-      <h3>💬 簡明語言解釋</h3>
-      <p>LLM 自動產生解釋，讓非技術人員也能理解程式碼。</p>
-    </td>
-  </tr>
-  <tr>
-    <td width="50%" valign="top">
-      <h3>🧭 引導式學習</h3>
-      <p>自動產生架構學習路徑，按相依順序學習。</p>
-    </td>
-    <td width="50%" valign="top">
-      <h3>🔍 語意搜尋</h3>
-      <p>支援模糊搜尋 + 語意搜尋，例如搜尋「哪些部分處理身分驗證？」即可在整個圖中獲取相關結果。</p>
-    </td>
-  </tr>
-  <tr>
-    <td width="50%" valign="top">
-      <h3>📊 變更影響分析</h3>
-      <p>提交變更前，查看變更會影響系統的哪些部分。了解變更對整個程式碼庫的連鎖反應。</p>
-    </td>
-    <td width="50%" valign="top">
-      <h3>🎭 使用者角色自適應 UI</h3>
-      <p>根據使用者類型（初級開發 / 專案經理 / 進階使用者）調整其詳細程度。</p>
-    </td>
-  </tr>
-  <tr>
-    <td width="50%" valign="top">
-      <h3>🏗️ 層級視覺化</h3>
-      <p>按架構層級自動分組 — API、服務、資料、UI、系統工具 — 並附有顏色編碼圖例。</p>
-    </td>
-    <td width="50%" valign="top">
-      <h3>📚 語言概念</h3>
-      <p>12 種程式設計模式（泛型、閉包、裝飾器等）將在上下文中逐一解釋。</p>
-    </td>
-  </tr>
-  <tr>
-    <td width="50%" valign="top">
-      <h3>🏢 業務領域知識</h3>
-      <p>從程式碼庫中提取業務領域、流程和處理步驟。透過互動式水平流程圖查看業務邏輯如何對應到程式碼 — 領域包含流程，流程包含步驟。</p>
-    </td>
-    <td width="50%" valign="top">
-      <h3>🔀 結構 + 領域雙視圖</h3>
-      <p>在資料看板中切換程式碼結構圖和業務領域圖。同時理解程式碼的組織方式和它實現的業務流程。</p>
-    </td>
-  </tr>
-</table>
-
----
-
 ## 🔧 技術原理
 
 ### 多智能體架構
@@ -267,35 +230,6 @@ Fetch and follow instructions from https://raw.githubusercontent.com/Lum1104/Und
 
 檔案分析器並行執行（最多 3 個並發）。支援增量更新 — 僅重新分析自上次執行以來發生變更的檔案。
 
-### 專案結構
-
-```
-understand-anything-plugin/
-  .claude-plugin/  — 外掛程式清單
-  agents/          — 專業 AI 智能體
-  skills/          — Skill 定義 (/understand, /understand-chat, etc.)
-  src/             — TypeScript 原始碼 (context-builder, diff-analyzer, etc.)
-  packages/
-    core/          — 分析引擎 (types, persistence, tree-sitter, search, schema, tours)
-    dashboard/     — React + TypeScript 網頁資料看板
-```
-
-### 技術堆疊
-
-TypeScript、pnpm workspaces、React 18、Vite、TailwindCSS v4、React Flow、Zustand、web-tree-sitter、Fuse.js、Zod、Dagre
-
-### 開發指令
-
-| 指令 | 說明 |
-|---------|-------------|
-| `pnpm install` | 安裝所有相依套件 |
-| `pnpm --filter @understand-anything/core build` | 建置核心套件 |
-| `pnpm --filter @understand-anything/core test` | 執行核心測試 |
-| `pnpm --filter @understand-anything/skill build` | 建置外掛程式套件 |
-| `pnpm --filter @understand-anything/skill test` | 執行外掛程式測試 |
-| `pnpm --filter @understand-anything/dashboard build` | 建置資料看板 |
-| `pnpm dev:dashboard` | 啟動資料看板開發伺服器 |
-
 ---
 
 ## 🤝 貢獻

homepage/src/components/Showcase.astro

@@ -1,17 +1,61 @@
+---
+const structuralVideoUrl = import.meta.env.VITE_STRUCTURAL_VIDEO_URL;
+const domainVideoUrl = import.meta.env.VITE_DOMAIN_VIDEO_URL;
+---
+
 <section class="showcase">
-  <p class="showcase-label reveal">See your codebase come alive</p>
+  <p class="showcase-label reveal">Explore the structural graph</p>
+  <p class="showcase-desc reveal">Navigate your codebase as an interactive knowledge graph — click, search, and explore every file, function, and class.</p>
   <div class="showcase-frame reveal reveal-delay-1">
     <div class="showcase-titlebar">
       <span class="dot red"></span>
       <span class="dot yellow"></span>
       <span class="dot green"></span>
     </div>
-    <img
-      src="/Understand-Anything/images/overview.png"
-      alt="Understand Anything dashboard showing an interactive knowledge graph of a codebase"
-      class="showcase-img"
-      loading="lazy"
-    />
+    {structuralVideoUrl ? (
+      <video
+        src={structuralVideoUrl}
+        autoplay
+        loop
+        muted
+        playsinline
+        class="showcase-img"
+      />
+    ) : (
+      <img
+        src="/Understand-Anything/images/overview-structural.gif"
+        alt="Structural graph — explore files, functions, classes and their relationships"
+        class="showcase-img"
+        loading="lazy"
+      />
+    )}
+  </div>
+
+  <p class="showcase-label reveal" style="margin-top: 4rem;">Understand business logic</p>
+  <p class="showcase-desc reveal">Switch to the domain view and see how your code maps to real business processes.</p>
+  <div class="showcase-frame reveal reveal-delay-1">
+    <div class="showcase-titlebar">
+      <span class="dot red"></span>
+      <span class="dot yellow"></span>
+      <span class="dot green"></span>
+    </div>
+    {domainVideoUrl ? (
+      <video
+        src={domainVideoUrl}
+        autoplay
+        loop
+        muted
+        playsinline
+        class="showcase-img"
+      />
+    ) : (
+      <img
+        src="/Understand-Anything/images/overview-domain.gif"
+        alt="Domain graph — business domains, flows, and process steps"
+        class="showcase-img"
+        loading="lazy"
+      />
+    )}
   </div>
 </section>
 
@@ -30,6 +74,14 @@
     margin-bottom: 2.5rem;
   }
 
+  .showcase-desc {
+    font-size: clamp(0.9rem, 1.5vw, 1.05rem);
+    color: var(--text-muted);
+    max-width: 700px;
+    margin: 0 auto 2rem;
+    line-height: 1.6;
+  }
+
   .showcase-frame {
     border-radius: 12px;
     overflow: hidden;