# Dreamways

**Repository Path**: chaining/Dreamways

## Basic Information

- **Project Name**: Dreamways
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-06
- **Last Updated**: 2026-06-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 梦途 · Dreamways

一个以绘本故事为主题的沉浸式网站框架。四季流转，每章一个故事，每章一个角色。背景视频随滚动切换，音频、角色卡片、故事面板，全部通过一个配置文件驱动。

---

## 预览截图

| 首屏 · Hero | 章节 · Seasons |
|:-----------:|:--------------:|
| ![首屏](docs/screenshots/hero.jpg) | ![章节](docs/screenshots/seasons.jpg) |

---

## 技术栈

- **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` |

### 第二步：修改 `src/content/config.ts`

配置文件分为三块：

**① 网站基本信息**（标题、副标题、首屏视频、页脚文字等）

**② 主角介绍区块**（可通过 `show: false` 整块隐藏）

**③ 章节列表**（增删章节，故事面板和角色卡片会自动同步更新）

每个字段都有详细注释，直接参照修改即可。详细说明见 [使用说明.md](./使用说明.md)。

---

## 项目结构

```
Dreamways/
├── public/
│   ├── videos/              # 背景视频
│   ├── audio/               # 音频文件
│   └── images/              # 图片文件
│
├── src/
│   ├── content/
│   │   └── config.ts        # ★ 唯一需要修改的文件
│   ├── sections/            # 页面各区块组件
│   ├── context/             # 全局状态（章节、视频、滑块）
│   ├── hooks/               # 自定义 hooks
│   └── lib/                 # 工具函数
│
├── README.md
└── 使用说明.md               # 中文详细使用说明
```

---

## 页面结构

| 区块 | 说明 |
|------|------|
| Hero | 首屏大标题，带入场动画 |
| About | 主角介绍，拍立得照片 + 文字面板（可隐藏） |
| Companions | 角色卡片墙，支持翻转查看详情、播放角色语音 |
| Seasons | 四季章节，随滚动切换背景视频，每章配背景音乐 |
| TimeSlider | 底部时间滑块，控制画面色调（晨·昼·暮·夜） |

---

## License

MIT