# 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/` —— 井字棋，用来验证可行性。单文件，无构建，无依赖