一个以绘本故事为主题的沉浸式网站框架。四季流转，每章一个故事，每章一个角色。背景视频随滚动切换，音频、角色卡片、故事面板，全部通过一个配置文件驱动。
| 首屏 · Hero | 章节 · Seasons |
|---|---|
 |
 |
- React 19 + TypeScript
- Vite 构建
- Tailwind CSS 样式
- GSAP + ScrollTrigger 动画
- Lenis 平滑滚动
- shadcn/ui 基础组件
- Mac：双击项目文件夹中的
启动-Mac.command - Windows：双击项目文件夹中的
启动-Windows.bat
首次运行会自动安装依赖并构建，完成后浏览器会自动打开 http://localhost:4000。
只需修改一个文件：src/content/config.ts
所有文字、视频、音频、图片、章节数量，都在这个文件里配置。
| 文件夹 | 内容 | 格式 |
|---|---|---|
public/videos/ |
背景视频 | .mp4 |
public/audio/ |
背景音乐、角色语音 | .mp3 |
public/images/ |
主角照片、角色图片 | .jpg / .png |
配置文件分为三块：
① 网站基本信息（标题、副标题、首屏视频、页脚文字等）
② 主角介绍区块（可通过 show: false 整块隐藏）
③ 章节列表（增删章节，故事面板和角色卡片会自动同步更新）
每个字段都有详细注释，直接参照修改即可。详细说明见 使用说明.md。
Dreamways/
├── public/
│ ├── videos/ # 背景视频
│ ├── audio/ # 音频文件
│ └── images/ # 图片文件
│
├── src/
│ ├── content/
│ │ └── config.ts # ★ 唯一需要修改的文件
│ ├── sections/ # 页面各区块组件
│ ├── context/ # 全局状态（章节、视频、滑块）
│ ├── hooks/ # 自定义 hooks
│ └── lib/ # 工具函数
│
├── README.md
└── 使用说明.md # 中文详细使用说明
| 区块 | 说明 |
|---|---|
| Hero | 首屏大标题，带入场动画 |
| About | 主角介绍，拍立得照片 + 文字面板（可隐藏） |
| Companions | 角色卡片墙，支持翻转查看详情、播放角色语音 |
| Seasons | 四季章节，随滚动切换背景视频，每章配背景音乐 |
| TimeSlider | 底部时间滑块，控制画面色调（晨·昼·暮·夜） |
MIT