Files

T

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

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

2026-10-12 18:06:20 +08:00

1.9 KiB

Raw Permalink Blame History

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/

1.9 KiB Raw Permalink Blame History Unescape Escape

interactive —— 交互网页

能复用什么

代码结构

跑起来

目录

1.9 KiB

Raw Permalink Blame History