电影感视频滚动叙事交互体验

# 角色与架构指令：电影级视频滚动叙事互动体验 担任精英创意技术专家与艺术总监。构建一个奢华、苹果/耐克级别的互动滚动叙事网页应用，由React 18+、TypeScript、Tailwind CSS、Lucide React和Motion驱动。 核心概念是**电影级视频叙事体验**，底层背景视频与互动编辑HUD覆盖层、时间码章节、环境音频引擎和模态弹窗无缝同步。 --- ## 1. 互动与视觉架构标准 1. **背景电影引擎：** - 全视口响应式`<video>`元素，具备无缝播放控制（播放/暂停、拖动、平滑跳转、声音切换、循环/重播）。 - 微妙暗角、电影级渐变淡入淡出（`from-black/80 via-transparent to-black/90`）和氛围颗粒感。 - 视频当前播放时间（`currentTime`）与活动编辑场景覆盖层之间平滑无阻塞同步。 2. **编辑UI与奢华玻璃拟态：** - **顶部HUD**：左侧品牌标识+当前章节胶囊（`第01章 · ...`），居中/右侧极简场景导航链接带活动下划线、声音切换胶囊和外部品牌CTA。 - **主内容区域**： - 巨型高冲击力展示标题（例如tracking-tight、大写粗体排版）。 - 使用`[text-wrap:balance]`的干净平衡正文段落（避免尴尬参差或单字孤行）。 - 触发流畅玻璃拟态模态窗口的情境互动CTA按钮（例如比赛报告、战术解析、精彩集锦、奖杯规格）。 - **侧边电梯导航**：右侧边缘垂直胶囊点轨道，支持一键跳转到特定视频章节。 - **底部电影栏**：玻璃拟态时间线，包含播放/暂停按钮、运行时间码（`00:01.5 / 00:18.0`）、分段章节进度条带动画填充、章节编号芯片（`01`、`02`、`03`...）。 3. **互动组件（例如播放器/产品/功能卡片）：** - 互动玻璃卡片，带光标跟随径向聚光光泽（`radial-gradient`追踪鼠标坐标）。 - 干净徽章、带平滑回退处理器的头像、统计高亮和外部详情链接。 4. **Web音频与声音设计引擎：** - 内置Web Audio API合成器，用于触觉UI点击、章节切换时的电影级低音呼啸声，以及带主静音切换的环境音频支持。 5. **数据架构（`src/scenes.ts`）：** - 创建干净、模块化的配置数组，每个场景定义如下： ```ts interface Scene { id: string; chapterIndex: number; badge: string; title: string; supporting: string[]; metadata: string; ctaText: string; timeStart: number; timeEnd: number; jumpTime: number; } ``` - 初始提供5个真实场景占位设置，使应用开箱即可编译并看起来完整。 --- ## 2. 互动用户引导/辅导工作流 首次提交此提示时，立即使用干净的占位视频和资源实现完整、可工作的模板。 完成初始构建后，**在响应中通过以下4步入门计划引导用户**，解释如何自定义项目： - **第1步：上传您的视频**：提供视频链接（或上传到`/public/videos/`）。 - **第2步：定义章节与时间码**：告诉AI视频中存在哪些场景或时刻（例如`00:00 - 00:04：开场`、`00:04 - 00:09：核心功能`等）。 - **第3步：添加内容与媒体**：提供品牌名称、标题、副标题，以及带照片或URL的播放器/产品卡片。 - **第4步：艺术指导与品牌化**：选择品牌强调色（例如阿森纳红、赛博青、奢华金、隐形单色）和排版风格。 --- 让我们开始：现在使用占位场景和互动功能构建此应用的初始生产就绪版本。