四季天空摄影作品集
中英双语的四季天空摄影集「空の記憶 / Memories of Sky」，四季切换叠加一条时间滑块，从黎明拖到深夜实时改变天空的色调和亮度。
正在加载预览…
9098 views
中英双语的四季天空摄影集「空の記憶 / Memories of Sky」，四季切换叠加一条时间滑块，从黎明拖到深夜实时改变天空的色调和亮度。
中英双语的四季天�摄影集「空の記憶 / Memories of Sky」，纯前端单页，四季按樱粉、金黄、枫橙、雪蓝切换背景和粒子，底部时间滑块从清晨四点拖到午夜，实时改变天空的亮度和色调。
试用建站智能体帮我创建一个名为「空の記憶 / 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)帮我创建一个名为「空の記憶 / 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)
帮我创建一个名为「空の記憶 / 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)
帮我创建一个名为「空の記憶 / 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)