chore: 初始化仓库，提交 vibevideo 源码

- src/: HyperFrames 封装 CLI(hv)、组件、品牌样式、音频(TTS/混音)工具
- projects/: 各项目 project.yaml 与文案
- interactive/: 井字棋演示页
- .gitignore: 忽略 node_modules、构建产物与 HyperFrames 运行期缓存

interactive/README.md

@@ -0,0 +1,55 @@
+# interactive —— 交互网页
+
+和 `projects/`（视频）并列的另一类产物：**网页，不是视频**。
+
+这里不经过 `hv` 时间轴、不经过渲染引擎、不依赖 ffmpeg。
+代码里没有 `data-start` / `data-duration` / `window.__timelines`。
+
+## 能复用什么
+
+| 框架里的东西 | 网页里怎么用 |
+|---|---|
+| `src/brand/tokens.css` | 色板、字体回退链、`--u` 基准单位，**直接相对路径引入，零拷贝** |
+| `src/brand/base.css` | reset、排版原子（`.panel` / `.display` / `.headline`）、`--u` 缩放写法 |
+| `src/vendor/three.js` | 离线可用，不依赖 CDN（交互 3D 时用） |
+
+**只需要覆盖两处「视频专用」的设置：**
+
+1. `--u`：视频里对应固定的 1920x1080 舞台，网页里改成
+   ```css
+   :root { --u: calc(100vmin / 1080); }   /* 同一个「短边 / 1080」比例 */
+   ```
+   所有 `calc(N * var(--u))` 的写法原样继续有效。
+2. `base.css` 把 `body` 写死成固定像素 + `overflow:hidden`（视频不能有滚动条），
+   网页要反过来覆盖掉。
+
+## 代码结构
+
+和视频组件是同一个套路，**两边可以互相搬**：
+
+```
+状态            唯一真值，一个对象
+  ↓
+规则（纯函数）  old -> new，不碰 DOM、不改传进来的对象
+  ↓
+渲染（纯函数）  state -> DOM  ← 视频里对应 render(t)
+  ↓
+驱动            状态从哪来    ← 视频里是 tl.time()，网页里是点击
+```
+
+确定性铁律（画面必须是时间的纯函数）**只约束视频渲染**。
+网页不导视频，状态、事件、`requestAnimationFrame` 都可以正常用。
+
+## 跑起来
+
+任何静态服务器都行，**根目录必须是仓库根**（因为页面用 `../../src/brand/` 相对引用）：
+
+```bash
+cd /hermes/AshuaiXsinfo
+python3 -m http.server 8000
+# 打开 http://localhost:8000/interactive/tictactoe/
+```
+
+## 目录
+
+- `tictactoe/` —— 井字棋，用来验证可行性。单文件，无构建，无依赖