四季天空摄影作品集

帮我创建一个名为「海の記憶 / Memories of Sea」的沉浸式四季海洋摄影作品集网站，中英文双语（仅中文和英文，不需要其他语言）。这是一个纯前端单页应用，无后端。
## 一、技术栈
- React 19 + TypeScript + Vite 7
- TailwindCSS 3.4 + tailwindcss-animate
- shadcn/ui 组件库（基于 Radix UI）
- GSAP 3.14 + ScrollTrigger（所有动画和视差效果）
- Lenis 1.3（平滑滚动，duration: 1.2，easing 使用指数衰减函数）
- lucide-react 图标库
- 不使用路由，单页滚动
## 二、核心概念：四季 × 时间 双轴交互
网站有两个核心交互维度：
1. 四季切换（春/夏/秋/冬）：通过导航栏右侧的四个圆形按钮切换，每个季节用一个汉字标识（春/夏/秋/冬），切换时改变背景视频、粒子效果、色彩主题
2. 时间滑块（04:00~24:00）：固定在页面底部的水平滑块，拖动改变天空的亮度/色调/饱和度，模拟从退潮到涨潮的海面变化
## 三、色彩系统
### 季节主题色
- 春 Spring: #FAD0C4（樱花粉）— glass-bg: rgba(250, 208, 196, 0.12)
- 夏 Summer: #FFD700（金黄）— glass-bg: rgba(46, 92, 138, 0.15)
- 秋 Autumn: #D35400（枫叶橙）— glass-bg: rgba(211, 84, 0, 0.12)
- 冬 Winter: #BDC3C7（银灰）— glass-bg: rgba(189, 195, 199, 0.12)
### 全局色调
- 背景纯黑 #000000，文字纯白 #FFFFFF
- 文字选中色: rgba(250, 208, 196, 0.4)
- 玻璃面板: backdrop-filter: blur(20px) saturate(1.2)，边框 rgba(255, 255, 255, 0.2)
- 暗角遮罩: radial-gradient(circle, transparent 50%, rgba(0,0,0,0.4) 100%) 固定全屏
## 四、字体系统
通过 Google Fonts 加载四种字体：
1. 展示标题（日文/中文）: Noto Serif JP weight 200/300/400/600
2. 展示标题（英文）: EB Garamond weight 200/300/400，italic
3. 正文: Noto Sans JP weight 300/400/500
4. 等宽标签: Space Mono weight 400/700
CSS 类名：
- .font-display: Noto Serif JP, EB Garamond, serif weight 200
- .font-display-en: EB Garamond, Noto Serif JP, serif weight 200
- .font-body: Noto Sans JP, Inter, sans-serif weight 300
- .font-mono-label: Space Mono, monospace weight 400
## 五、页面结构与各区块设计
### 5.1 固定背景层（z-index 0~2）
三层固定全屏背景叠加：
第1层 - 视频背景（z:0）:
- 四个季节各一支循环视频（spring.mp4/summer.mp4/autumn.mp4/winter.mp4）
- 切换季节时 opacity 淡出→换源→淡入（500ms transition）
- CSS filter 受时间滑块实时控制：
  - 黎明(0~0.15): brightness 0.7→1, sepia 0.3→0, hue-rotate -30→-15deg, glow 樱花粉
  - 上午(0.15~0.35): brightness 1→1.1, saturate 1→1.06, glow 白
  - 下午(0.35~0.55): brightness 1.1→1.04, glow 暖黄
  - 黄昏(0.55~0.75): brightness 0.9→0.6, sepia 0→0.3, hue-rotate -15→-25deg, glow 橙红
  - 夜晚(0.75~1): brightness 0.4→0.33, hue-rotate 180→190deg, saturate 1.5, glow 蓝紫
第2层 - 暗角遮罩（z:1）: 径向渐变，pointer-events: none
第3层 - 粒子画布（z:2）: 全屏 Canvas，pointer-events: none，四种季节粒子：
- 春：80个樱花花瓣（椭圆形 #FAD0C4，size 3~9px，带旋转，正弦曲线横向漂移+缓慢下落）
- 夏：50个萤火虫（径向渐变发光点 #FFD700，size 1.5~4.5px，脉冲式 opacity 闪烁，随机游走）
- 秋：70个枫叶（贝塞尔曲线叶形，随机取色 #D35400/#E74C3C/#F39C12/#C0392B，size 6~16px，大幅正弦横漂+旋转下落）
- 冬：100个雪花（圆形白色+柔光晕，size 2~6px，微弱横漂+匀速下落）
### 5.2 导航栏（fixed, z:50）
- 高度 80px，水平 padding 5vw
- 背景: 线性渐变 rgba(0,0,0,0.3)→0.1→transparent + backdrop-filter: blur(8px)
- 左侧 Logo: 竖排日文「空の記憶」（Noto Serif JP, 1.1rem, weight 300, letter-spacing 0.2em, 高度 48px），右侧小字 "Memories of Sky"（EB Garamond, 0.7rem, weight 200, opacity 60%，sm以上显示）
- 右侧: 当前时间显示（Space Mono, 0.75rem, opacity 50%, md以上显示）+ 四季切换按钮组
- 四季按钮: 40×40px 圆形，内部显示汉字，选中态有对应季节色的 radial-gradient 背景 + 1.5px 边框 + 外发光（box-shadow 12px+24px），hover时显示英文tooltip
### 5.3 Hero 区块
- min-height: 100dvh，flex 居中，左侧 margin 10vw
- 竖排日文主标题「空の記憶」: writing-mode: vertical-rl，Noto Serif JP, clamp(2.5rem, 6vw, 5rem), weight 200, letter-spacing 0.25em, text-shadow 双层发光
- 右侧英文标题 "Memories / of the Sky": EB Garamond, clamp(1.8rem, 4vw, 3.5rem), weight 200
- 入场动画: 标题 {opacity:0, y:60} → {opacity:1, y:0} duration 1.8s ease power3.out delay 0.3s；副标题 delay 0.8s
- 副标题: "A journey through the seasons, one sky at a time." + 日文「四季を巡る旅、空と共に。」
- 底部滚动提示: 竖排 "SCROLL"（Space Mono, 10px）+ 竖线 GSAP 无限 yoyo scaleY 动画
### 5.4 About 区块（关于摄影师）
- min-height: 100dvh，grid-cols-1 lg:grid-cols-2 gap-20
- 左侧: 拍立得照片组件
  - 白色背景，padding 12px 12px 48px 12px（底部宽边框模拟拍立得）
  - box-shadow 0 8px 32px rgba(0,0,0,0.3)
  - hover: scale(1.05) rotate(0deg)，shadow加深
  - 底部说明 "Tokyo, 2024"（EB Garamond italic, 0.85rem, color #333）
  - GSAP 视差: 随滚动 y:-80, rotation:3（scrub:1）
  - 入场: {opacity:0, x:-60, rotation:-8} → {opacity:1, x:0, rotation:-3}
- 右侧: 玻璃面板
  - 标题「写真家について」/ "About the Photographer"
  - 日英双语正文（日文大字+英文小字opacity 50%）
  - 底部相机信息: Canon EOS R5 / RF 24-70mm f/2.8 / Film: Kodak Portra 400（Space Mono, 12px）
 - GSAP 视差: y:-40（scrub:1.5）；入场 {opacity:0, x:60} → {opacity:1, x:0}
### 5.5 Gallery 区块（作品集）
- 标题「作品集」/ "Selected Works"
- 四张拍立得散布排列（flex-wrap, 交错 marginTop/marginLeft 制造错落感）:
  1. 春風/Spring Breeze — sakura, 280px, rotate(-4deg)
  2. 夏の陽気/Summer Heat — clouds, 340px, rotate(3deg)
  3. 秋の別れ/Autumn Farewell — railway, 280px, rotate(-2deg)
  4. 冬の静寂/Winter Silence — snow, 220px, rotate(5deg)
- 每张: 鼠标跟随3D倾斜 perspective(600px) rotateX/Y ±8deg，差速视差（递增0.4/0.55/0.7/0.85）
- 整组入场: stagger 0.15s, {opacity:0, y:80, scale:0.9} → {opacity:1, y:0, scale:1}
### 5.6 四季物语区块
- 标题「四季の物語」/ "Tales of the Four Seasons"
- 四个季节各占 min-h-100dvh，ScrollTrigger 检测进入视口时自动切换全局季节（背景视频+粒子+主题色联动）
- 每个季节区块:
  - 背景超大汉字水印（春/夏/秋/冬），clamp(15rem, 40vw, 35rem), opacity 6%
  - 玻璃面板，左边框 3px 季节色
  - 日文标题+英文副标题
  - 四行日文诗+四行英文翻译
  - 春: 描写樱花与新生 — 「桜吹雪舞い散る空の下で、新しい命が芽吹く音を聞いた…」
  - 夏: 描写蝉鸣与回忆 — 「入道雲が空を覆い、蝉の声が胸の奥を震わせる…」
  - 秋: 描写夕阳与离别 — 「夕焼けに染まる空は、別れの色をしている…」
  - 冬: 描写雪夜与心愿 — 「雪が降り積もる夜、世界は白い静けさに包まれる…」
### 5.7 Footer
- 背景 rgba(0,0,0,0.4) + blur(20px)
- 标题+引言（双语）+ 社交链接（Instagram/Twitter/Behance）+ 版权信息
## 六、彩蛋：5:46 流星
- 时间滑块拖到 05:46（±2分钟）时触发
- 时间显示变金色 #FFD700 + 外发光
- 触发后全屏Canvas绘制流星从左上(20%,15%)划向右下(70%,45%)，2秒飞行
- 流星头部径向渐变白→蓝，尾部200px线性渐变
- 同时显示竖排大字「君の名は。」（5秒fadeInOut）
## 七、静态资源
图片（/public/images/）5张拍立得风格日本风景照
视频（/public/videos/）4支天空循环视频（每支3~5MB，横屏，至少10秒循环）
## 八、关键动效参数
| 效果 | 参数 |
|------|------|
| Lenis平滑滚动 | duration 1.2 |
| Hero标题入场 | y:60→0, 1.8s, power3.out, delay 0.3s |
| Hero副标题入场 | y:30→0, 1.4s, power2.out, delay 0.8s |
| About拍立得视差 | y:-80, rotation:3, scrub:1 |
| About面板视差 | y:-40, scrub:1.5 |
| Gallery卡片入场 | y:80→0, scale:0.9→1, stagger 0.15s |
| 拍立得3D倾斜 | rotateX/Y ±8deg, perspective 600px |
| 季节水印入场 | y:100→0, opacity:0→0.06, 1.2s |
| 流星飞行 | 2s, ease-out cubic |
| 视频切换 | opacity 500ms |
| 滚动提示竖线 | scaleY 0→1, 1.5s, yoyo infinite |
## 九、响应式
- 标题字号全部 clamp() 三值适配
- Gallery flex-wrap 窄屏换行
- About grid-cols-1 lg:grid-cols-2
- 导航栏元素按 sm/md 断点隐藏
- 时间滑块宽度 min(600px, 80vw)

帮我创建一个名为「空の記憶 / Memories of Sky」的沉浸式四季天空摄影作品集网站，中英文双语（仅中文和英文，不需要其他语言）。这是一个纯前端单页应用，无后端。
## 一、技术栈
- React 19 + TypeScript + Vite 7
- TailwindCSS 3.4 + tailwindcss-animate
- shadcn/ui 组件库（基于 Radix UI）
- GSAP 3.14 + ScrollTrigger（所有动画和视差效果）
- Lenis 1.3（平滑滚动，duration: 1.2，easing 使用指数衰减函数）
- lucide-react 图标库
- 不使用路由，单页滚动
## 二、核心概念：四季 × 时间 双轴交互
网站有两个核心交互维度：
1. 四季切换（春/夏/秋/冬）：通过导航栏右侧的四个圆形按钮切换，每个季节用一个汉字标识（春/夏/秋/冬），切换时改变背景视频、粒子效果、色彩主题,并切换一段季节环境音（春鸟鸣/夏蝉鸣/秋风/冬风雪）
2. 时间滑块（04:00~24:00）：固定在页面底部的水平滑块，拖动改变天空的亮度/色调/饱和度，模拟从黎明到深夜的天空变化
## 三、色彩系统
### 季节主题色
- 春 Spring: #FAD0C4（樱花粉）— glass-bg: rgba(250, 208, 196, 0.12)
- 夏 Summer: #FFD700（金黄）— glass-bg: rgba(46, 92, 138, 0.15)
- 秋 Autumn: #D35400（枫叶橙）— glass-bg: rgba(211, 84, 0, 0.12)
- 冬 Winter: #BDC3C7（银灰）— glass-bg: rgba(189, 195, 199, 0.12)
### 全局色调
- 背景纯黑 #000000，文字纯白 #FFFFFF
- 文字选中色: rgba(250, 208, 196, 0.4)
- 玻璃面板: backdrop-filter: blur(20px) saturate(1.2)，边框 rgba(255, 255, 255, 0.2)
- 暗角遮罩: radial-gradient(circle, transparent 50%, rgba(0,0,0,0.4) 100%) 固定全屏
## 四、字体系统
通过 Google Fonts 加载四种字体：
1. 展示标题（日文/中文）: Noto Serif JP weight 200/300/400/600
2. 展示标题（英文）: EB Garamond weight 200/300/400，italic
3. 正文: Noto Sans JP weight 300/400/500
4. 等宽标签: Space Mono weight 400/700
CSS 类名：
- .font-display: Noto Serif JP, EB Garamond, serif weight 200
- .font-display-en: EB Garamond, Noto Serif JP, serif weight 200
- .font-body: Noto Sans JP, Inter, sans-serif weight 300
- .font-mono-label: Space Mono, monospace weight 400
## 五、页面结构与各区块设计
### 5.1 固定背景层（z-index 0~2）
三层固定全屏背景叠加：
第1层 - 视频背景（z:0）:
- 四个季节各一支循环视频（spring.mp4/summer.mp4/autumn.mp4/winter.mp4）
- 切换季节时 opacity 淡出→换源→淡入（500ms transition）
- CSS filter 受时间滑块实时控制：
  - 黎明(0~0.15): brightness 0.7→1, sepia 0.3→0, hue-rotate -30→-15deg, glow 樱花粉
  - 上午(0.15~0.35): brightness 1→1.1, saturate 1→1.06, glow 白
  - 下午(0.35~0.55): brightness 1.1→1.04, glow 暖黄
  - 黄昏(0.55~0.75): brightness 0.9→0.6, sepia 0→0.3, hue-rotate -15→-25deg, glow 橙红
  - 夜晚(0.75~1): brightness 0.4→0.33, hue-rotate 180→190deg, saturate 1.5, glow 蓝紫
第2层 - 暗角遮罩（z:1）: 径向渐变，pointer-events: none
第3层 - 粒子画布（z:2）: 全屏 Canvas，pointer-events: none，四种季节粒子：
- 春：80个樱花花瓣（椭圆形 #FAD0C4，size 3~9px，带旋转，正弦曲线横向漂移+缓慢下落）
- 夏：50个萤火虫（径向渐变发光点 #FFD700，size 1.5~4.5px，脉冲式 opacity 闪烁，随机游走）
- 秋：70个枫叶（贝塞尔曲线叶形，随机取色 #D35400/#E74C3C/#F39C12/#C0392B，size 6~16px，大幅正弦横漂+旋转下落）
- 冬：100个雪花（圆形白色+柔光晕，size 2~6px，微弱横漂+匀速下落）
### 5.2 导航栏（fixed, z:50）
- 高度 80px，水平 padding 5vw
- 背景: 线性渐变 rgba(0,0,0,0.3)→0.1→transparent + backdrop-filter: blur(8px)
- 左侧 Logo: 竖排日文「空の記憶」（Noto Serif JP, 1.1rem, weight 300, letter-spacing 0.2em, 高度 48px），右侧小字 "Memories of Sky"（EB Garamond, 0.7rem, weight 200, opacity 60%，sm以上显示）
- 右侧: 当前时间显示（Space Mono, 0.75rem, opacity 50%, md以上显示）+ 四季切换按钮组
- 四季按钮: 40×40px 圆形，内部显示汉字，选中态有对应季节色的 radial-gradient 背景 + 1.5px 边框 + 外发光（box-shadow 12px+24px），hover时显示英文tooltip
### 5.3 Hero 区块
- min-height: 100dvh，flex 居中，左侧 margin 10vw
- 竖排日文主标题「空の記憶」: writing-mode: vertical-rl，Noto Serif JP, clamp(2.5rem, 6vw, 5rem), weight 200, letter-spacing 0.25em, text-shadow 双层发光
- 右侧英文标题 "Memories / of the Sky": EB Garamond, clamp(1.8rem, 4vw, 3.5rem), weight 200
- 入场动画: 标题 {opacity:0, y:60} → {opacity:1, y:0} duration 1.8s ease power3.out delay 0.3s；副标题 delay 0.8s
- 副标题: "A journey through the seasons, one sky at a time." + 日文「四季を巡る旅、空と共に。」
- 底部滚动提示: 竖排 "SCROLL"（Space Mono, 10px）+ 竖线 GSAP 无限 yoyo scaleY 动画
### 5.4 About 区块（关于摄影师）
- min-height: 100dvh，grid-cols-1 lg:grid-cols-2 gap-20
- 左侧: 拍立得照片组件
  - 白色背景，padding 12px 12px 48px 12px（底部宽边框模拟拍立得）
  - box-shadow 0 8px 32px rgba(0,0,0,0.3)
  - hover: scale(1.05) rotate(0deg)，shadow加深
  - 底部说明 "Tokyo, 2024"（EB Garamond italic, 0.85rem, color #333）
  - GSAP 视差: 随滚动 y:-80, rotation:3（scrub:1）
  - 入场: {opacity:0, x:-60, rotation:-8} → {opacity:1, x:0, rotation:-3}
- 右侧: 玻璃面板
  - 标题「写真家について」/ "About the Photographer"
  - 日英双语正文（日文大字+英文小字opacity 50%）
  - 底部相机信息: Canon EOS R5 / RF 24-70mm f/2.8 / Film: Kodak Portra 400（Space Mono, 12px）
 - GSAP 视差: y:-40（scrub:1.5）；入场 {opacity:0, x:60} → {opacity:1, x:0}
### 5.5 Gallery 区块（作品集）
- 标题「作品集」/ "Selected Works"
- 四张拍立得散布排列（flex-wrap, 交错 marginTop/marginLeft 制造错落感）:
  1. 春風/Spring Breeze — sakura, 280px, rotate(-4deg)
  2. 夏の陽気/Summer Heat — clouds, 340px, rotate(3deg)
  3. 秋の別れ/Autumn Farewell — railway, 280px, rotate(-2deg)
  4. 冬の静寂/Winter Silence — snow, 220px, rotate(5deg)
- 每张: 鼠标跟随3D倾斜 perspective(600px) rotateX/Y ±8deg，差速视差（递增0.4/0.55/0.7/0.85）
- 整组入场: stagger 0.15s, {opacity:0, y:80, scale:0.9} → {opacity:1, y:0, scale:1}
### 5.6 四季物语区块
- 标题「四季の物語」/ "Tales of the Four Seasons"
- 四个季节各占 min-h-100dvh，ScrollTrigger 检测进入视口时自动切换全局季节（背景视频+粒子+主题色联动）
- 每个季节区块:
  - 背景超大汉字水印（春/夏/秋/冬），clamp(15rem, 40vw, 35rem), opacity 6%
  - 玻璃面板，左边框 3px 季节色
  - 日文标题+英文副标题
  - 四行日文诗+四行英文翻译
  - 春: 描写樱花与新生 — 「桜吹雪舞い散る空の下で、新しい命が芽吹く音を聞いた…」
  - 夏: 描写蝉鸣与回忆 — 「入道雲が空を覆い、蝉の声が胸の奥を震わせる…」
  - 秋: 描写夕阳与离别 — 「夕焼けに染まる空は、別れの色をしている…」
  - 冬: 描写雪夜与心愿 — 「雪が降り積もる夜、世界は白い静けさに包まれる…」
### 5.7 Footer
- 背景 rgba(0,0,0,0.4) + blur(20px)
- 标题+引言（双语）+ 社交链接（Instagram/Twitter/Behance）+ 版权信息
## 六、彩蛋：5:46 流星
- 时间滑块拖到 05:46（±2分钟）时触发
- 时间显示变金色 #FFD700 + 外发光
- 触发后全屏Canvas绘制流星从左上(20%,15%)划向右下(70%,45%)，2秒飞行
- 流星头部径向渐变白→蓝，尾部200px线性渐变
- 同时显示竖排大字「君の名は。」（5秒fadeInOut）
## 七、静态资源
图片（/public/images/）5张拍立得风格日本风景照
视频（/public/videos/）4支天空循环视频（每支3~5MB，横屏，至少10秒循环）
## 八、关键动效参数
| 效果 | 参数 |
|------|------|
| Lenis平滑滚动 | duration 1.2 |
| Hero标题入场 | y:60→0, 1.8s, power3.out, delay 0.3s |
| Hero副标题入场 | y:30→0, 1.4s, power2.out, delay 0.8s |
| About拍立得视差 | y:-80, rotation:3, scrub:1 |
| About面板视差 | y:-40, scrub:1.5 |
| Gallery卡片入场 | y:80→0, scale:0.9→1, stagger 0.15s |
| 拍立得3D倾斜 | rotateX/Y ±8deg, perspective 600px |
| 季节水印入场 | y:100→0, opacity:0→0.06, 1.2s |
| 流星飞行 | 2s, ease-out cubic |
| 视频切换 | opacity 500ms |
| 滚动提示竖线 | scaleY 0→1, 1.5s, yoyo infinite |
## 九、响应式
- 标题字号全部 clamp() 三值适配
- Gallery flex-wrap 窄屏换行
- About grid-cols-1 lg:grid-cols-2
- 导航栏元素按 sm/md 断点隐藏
- 时间滑块宽度 min(600px, 80vw)