xiaoshuai
9b63424740
- src/: HyperFrames 封装 CLI(hv)、组件、品牌样式、音频(TTS/混音)工具 - projects/: 各项目 project.yaml 与文案 - interactive/: 井字棋演示页 - .gitignore: 忽略 node_modules、构建产物与 HyperFrames 运行期缓存
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 时用） |
只需要覆盖两处「视频专用」的设置：
--u：视频里对应固定的 1920x1080 舞台，网页里改成所有:root { --u: calc(100vmin / 1080); } /* 同一个「短边 / 1080」比例 */calc(N * var(--u))的写法原样继续有效。base.css把body写死成固定像素 +overflow:hidden（视频不能有滚动条）， 网页要反过来覆盖掉。
代码结构
和视频组件是同一个套路，两边可以互相搬：
状态 唯一真值，一个对象
↓
规则（纯函数） old -> new，不碰 DOM、不改传进来的对象
↓
渲染（纯函数） state -> DOM ← 视频里对应 render(t)
↓
驱动 状态从哪来 ← 视频里是 tl.time()，网页里是点击
确定性铁律（画面必须是时间的纯函数）只约束视频渲染。
网页不导视频，状态、事件、requestAnimationFrame 都可以正常用。
跑起来
任何静态服务器都行，根目录必须是仓库根（因为页面用 ../../src/brand/ 相对引用）：
cd /hermes/AshuaiXsinfo
python3 -m http.server 8000
# 打开 http://localhost:8000/interactive/tictactoe/
目录
tictactoe/—— 井字棋，用来验证可行性。单文件，无构建，无依赖