小红书黑客巅峰赛参赛作品
把一本书放上桌，AI 将它变成一个可以经历的故事宇宙。
传统 AI 故事生成：AI 输出文本 + 固定模板渲染。
LivingBook 的做法：AI 同时生成内容和它的表现形式。 每个故事主题拥有独一无二的视觉世界、配色、动画和氛围——这些全部由 AI 通过结构化的 Visual Program 实时决定。
当前已内置《昆虫记》完整章节，点击桌上的书封即可进入沉浸式阅读体验。
- 书桌 Landing — 电影级镜头推进动画（三段式 WAAPI），点击书封飞入阅读器
- 沉浸式阅读器 — 双页展开布局，自动分页，章节目录，基于 pretext 的精排版
- 动态插图 — 第一章内嵌甲虫视频插画，跟随叙事节拍定位
- Gaze 模式 — AI 朗读 + 视线追踪高亮，沉浸式聆听体验
- 三套视觉引擎（插件式架构）
- Cosmos (Three.js) — 三体引力模拟 + 星空 + 球面文字排版
- Enchanted Parchment (Canvas) — 萤火虫粒子 + Lumos 点击特效 + 墨水显现动画
- Living Ink (Canvas) — 绿幕抠图 + 活字排版引擎
- Agent 对话 — 侧边栏与 AI 实时对话，修改场景内容和视觉参数
- Gallery — 保存和回顾已创建的故事作品
- 多语言 — 中英文界面切换（i18next）
- 多 Provider — 兼容 Anthropic / OpenAI / Google / 任意 OpenAI 兼容接口
| 层 | 技术 |
|---|---|
| 框架 | React 19 + TypeScript + Vite |
| 样式 | Tailwind CSS 4 |
| 3D | Three.js |
| 文字排版 | @chenglou/pretext (MIT) |
| 状态管理 | Zustand |
| 国际化 | i18next |
| AI | OpenAI Responses API（streaming + tool use） |
bun install
bun dev打开 http://localhost:5173，点击桌上标有「借阅」标签的《昆虫记》即可体验（无 API Key 时使用 mock 数据）。
如需连接 AI：进入 Settings 页面，填入 API Key 和模型名称。
src/
agent/ # AI Agent（streaming client、tool loop、tool definitions）
data/ # 书籍数据（昆虫记章节）
effects/ # 视觉引擎插件系统
three-body/ # Cosmos 三体 3D 特效
potter/ # Enchanted Parchment 特效
living-ink/ # Living Ink 活字引擎
shared/ # 共享排版（基于 pretext）
locales/ # i18n 翻译文件（en / zh-CN）
pages/ # 页面（Landing / Creation / Gallery / Settings）
store/ # Zustand 状态管理
ui/ # UI 组件（BookReader、GazeOverlay、Sidebar…）
MIT
