# sky

**Repository Path**: NativeBase/sky

## Basic Information

- **Project Name**: sky
- **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-25
- **Last Updated**: 2026-06-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 空の記憶 / Memories of Sky

四季 × 时间 双轴交互的沉浸式天空摄影作品集。

---

## 项目概述

一个纯前端单页应用，围绕"四季更迭"与"二十四时光流"两个维度展开交互。浏览者可通过顶部导航栏切换季节（春/夏/秋/冬），或拖动底部时间滑块改变天空的亮度、色相与氛围，体验从黎明到深夜的天空变化。

---

![Hero](assets/screenshot-hero-desktop.png)
![Gallery](assets/screenshot-gallery-desktop.png)
![Tales](assets/screenshot-tales-desktop.png)
![Footer HUD](assets/screenshot-footer-desktop.png)

## 实际技术栈

| 层面 | 方案 |
|---|---|
| 框架 | React 19 + TypeScript + Vite 8 |
| 样式 | TailwindCSS 3.4 + tailwindcss-animate |
| 平滑滚动 | Lenis 1.3 |
| 图标 | lucide-react |
| 动画 | CSS `@keyframes` / CSS transition / IntersectionObserver（原生方案，无额外动画库） |
| 字体 | Google Fonts：Noto Serif JP / EB Garamond，系统等宽字体回退 |

### 与原始设计的差异

开发过程中基于性能实测做了一些调整：

- **GSAP 已移除**：原设计使用 GSAP + ScrollTrigger 驱动入场动画和视差效果。经实测，在页面效果几乎不变的前提下，全部替换为 CSS animation + IntersectionObserver + 原生 scroll 事件 + requestAnimationFrame，省去约 50KB 的 JS 依赖，避免了 RAF 循环造成的额外 re-render。
- **粒子系统已移除**：原设计中的 Canvas 四季粒子（樱花/萤火虫/枫叶/雪花）在低端设备上存在性能瓶颈，已被移除，背景层完全由视频/渐变天空承担。
- **字体精简**：原加载 4 个 Google Fonts（含 2 个大型 CJK 字体），现精简为 2 个（Noto Serif JP + EB Garamond），正文统一使用 Noto Serif JP，等宽标签使用系统字体回退。

---

## 核心交互

### 四季切换

顶部导航栏右侧四个圆形按钮（春/夏/秋/冬），切换时：

- 背景渐变层 500ms 淡入淡出
- 色彩主题联动导航按钮、面板边框、时间滑块
- 下方"四季物语"区域随滚动自动联动

### 时间滑块

底部悬浮 HUD 面板（磨砂玻璃风格），拖动滑块改变时间：

- 04:00~24:00，控制天空背景的 CSS filter（亮度/色相/饱和度）
- 分五个时段：黎明 → 朝晨 → 昼午 → 暮晚 → 深宵
- **彩蛋**：滑块拖到 05:46 ±2min 时触发全屏"君の名は。"动画（5 秒 fade in/out）

### 视差与滚动动画

- 所有入场动画使用 CSS `@keyframes` + `animation-delay` 实现（替代原 GSAP）
- 视差效果使用原生 scroll 事件 + RAF 驱动，组件间共享一个 scroll 监听
- 使用 Lenis 1.3 实现平滑滚动（duration: 1.2，指数衰减缓动）

---

## 项目结构

```
src/
├── context/
│   └── SkyContext.tsx   # 全局状态：季节 + 时间 + 派生值（useMemo 缓存）
├── hooks/
│   ├── useInView.ts     # IntersectionObserver 封装
│   ├── useParallax.ts   # 共用 scroll 监听的差速视差
│   └── useLenis.ts      # Lenis 初始化 hook
├── components/
│   ├── SkyBackground.tsx # 固定背景层（视频/渐变 + 暗角）
│   ├── PolaroidCard.tsx  # 拍立得卡片组件（3D 倾斜交互）
│   └── sections/
│   ├── Hero.tsx          # 首屏标题 + 滚动引导
│   ├── Navbar.tsx        # 固定导航栏 + 四季切换
│   ├── About.tsx         # 摄影师介绍
│   ├── Gallery.tsx       # 八张拍立得作品集
│   ├── Diary.tsx         # 摄影日记
│   ├── Tales.tsx         # 四季物语（滚动联动季节）
│   └── Footer.tsx        # 时间滑块 HUD + 社交链接
├── styles/
│   ├── hero.css          # Hero 区块样式
│   ├── navbar.css        # 导航栏样式
│   ├── about.css         # About 区块样式
│   ├── gallery.css       # Gallery 区块样式
│   ├── diary.css         # Diary 区块样式
│   ├── tales.css         # Tales 区块样式
│   └── footer.css        # Footer / HUD 样式
├── utils/
│   └── lenis.ts          # Lenis 全局实例
├── App.tsx
└── main.tsx
```

---

## 快速开始

```bash
npm install
npm run dev # 开发服务器
npm run build # 生产构建
npm run lint # 代码检查（oxlint）
```

---

## 设计要点

### 色彩系统

| 季节 | 主题色 | 磨砂玻璃背景 |
|---|---|---|
| 春 | #FAD0C4 | rgba(250, 208, 196, 0.12) |
| 夏 | #FFD700 | rgba(46, 92, 138, 0.15) |
| 秋 | #D35400 | rgba(211, 84, 0, 0.12) |
| 冬 | #BDC3C7 | rgba(189, 195, 199, 0.12) |

### 字体系统

| 用途 | 字体 | 回退 |
|---|---|---|
| 日文/中文标题（display） | Noto Serif JP | EB Garamond, serif |
| 英文标题（display-en） | EB Garamond | Noto Serif JP, serif |
| 正文（body） | Noto Serif JP | Inter, sans-serif |
| 标签/时钟（mono-label） | SF Mono / Menlo / Monaco | Consolas, monospace |

### 玻璃面板工具类

```css
.glass-panel {
  backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
```

---

## 构建相关

- TypeScript 6.0，启用 `verbatimModuleSyntax`，类型导入必须使用 `import type`
- TailwindCSS 3.4 + JIT 模式
- 无路由，纯单页滚动，使用 Lenis 接管滚动行为
- 响应式：标题字号使用 `clamp()` 三值适配

---

## License

MIT