# home

**Repository Path**: NativeBase/home

## Basic Information

- **Project Name**: home
- **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-13
- **Last Updated**: 2026-06-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 天空的记忆（Memories of Sky）

一个以「四季天空」为主题的沉浸式单页摄影作品展示网站。

## 简介

本项目通过全屏视频背景、时间滤镜滑块、滚动触发动画和多语言支持，呈现一位摄影师眼中随季节流转的天空之美。默认语言为日语，视觉风格偏向东方诗意与极简主义。

## 技术栈

- **框架**：React 19 + TypeScript 5.9
- **构建工具**：Vite 7.2.4
- **样式**：Tailwind CSS 3.4.19 + shadcn/ui 主题体系
- **动画**：GSAP 3 + Lenis 平滑滚动 + GSAP ScrollTrigger
- **UI 组件**：shadcn/ui（基于 Radix UI，已安装 40+ 组件）
- **路由**：React Router 7

## 核心功能

- **四季视频背景切换**：双视频层交叉淡入淡出，根据当前季节自动切换天空视频。
- **时间滑块**：拖动 04:00–24:00 的时间轴，动态调整背景视频的亮度、色调与饱和度，模拟昼夜氛围。
- **滚动触发季节切换**：滚动到不同季节区块时，自动更新全局季节状态与背景视频。
- **多语言支持**：支持中文、日语、英语三种语言。
- **平滑滚动**：Lenis 与 GSAP ScrollTrigger 集成，提供流畅的滚动体验。

## 项目结构

```
public/
  images/          # 四季摄影作品图片
  videos/          # 四季天空背景视频
src/
  components/ui/   # shadcn/ui 组件库
  context/         # 全局状态管理（AppContext）
  hooks/           # 自定义 Hooks
  sections/        # 页面各区块组件
  types/           # 类型定义、季节配置与翻译数据
  App.tsx          # 根组件
  main.tsx         # 应用入口
```

## 常用命令

```bash
# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览生产构建
npm run preview

# 运行 ESLint 检查
npm run lint
```

## 资源

- 图片：`spring-sakura.jpg`、`summer-clouds.jpg`、`autumn-railway.jpg`、`winter-snow.jpg`、`photographer-portrait.jpg`
- 视频：`spring-sky.mp4`、`summer-sky.mp4`、`autumn-sky.mp4`、`winter-sky.mp4`