MiniMax M3.1 Flash Prompts & Anwendungsfälle

Original-Prompt (Chinesisch)

（首轮）根据参考照片，用 Three.js 和程序化几何制作可交互的天坛祈年殿三维模型。重点还原圆形殿身、三重曲面屋檐、中央宝顶、同心台基、栏杆和正面阶梯，保持屋檐逐层收小的比例与轴线关系；提供环绕、缩放、参考视角与俯视预设、屋顶分层显隐和重置。材质与纹理由代码生成，不能下载现成模型或依赖外部服务。

Original-Prompt (Chinesisch)

用 Three.js 以像素/体素风格重建《Star Wars》的 Millennium Falcon。轮廓要能辨认出圆盘船体、前方双叉、偏置驾驶舱、雷达碟和后部引擎带，并用有限灰阶体素表现装甲块、管线与磨损。支持环绕、缩放、爆炸视图开关和一键回正，不能下载或热链现成模型。

Original-Prompt (Chinesisch)

一个“体验好奇号”的火星 3D 场景。六轮火星车可以点击地面前往目标点，车轮和悬挂要随起伏地形产生可信运动；用户还能转动桅杆相机、操作机械臂，并播放一次接近岩石、钻探和收回机械臂的任务回放。点击主要部件时显示名称与作用。

Original-Prompt (Chinesisch)

创建一个页面，展示中国古代宫殿的内部结构，3D，真实材质，支持多种模式切换

Original-Prompt (Chinesisch)

我想制作一个可以在浏览器中游玩、并能上线分享的复古跳舞机游戏，暂名 DANCE2000。玩法参考《Super Dancer Online》和《Dance Dance Revolution》，视觉结合千禧年街机、早期音乐游戏和 QQ 秀像素小人。
请帮我完成游戏设计与实现，交付一个具有完整流程、能够实际游玩的网页游戏。
一、整体视觉
我希望它像一款 2000 年左右的音乐游戏：亮蓝、紫色、荧光绿点缀，金属镀铬边框、果冻按钮、立体斜体字标和细腻的像素人物。
页面要有明确的视觉重点，装饰丰富但不能杂乱。首页按钮需要经过设计，重要文字可以使用 PNG 字标。全站按钮、面板、弹窗和加载页应保持同一套美术风格。
我会提供参考图和素材。已有素材优先使用，保持原画风、比例和透明背景；首页装饰使用原创视觉。
二、完整游戏流程
首页 → 选择歌曲 → 选择难度 → 选择角色 → Loading → 倒计时 → 正式游玩 → 结算。
首页包括 PLAY、SETTINGS、HOW TO PLAY。点击后切换到对应界面，每个页面独立展示，不要将所有页面纵向堆在一起让玩家下滑寻找。
选歌页包含专辑封面、歌名、歌手和试听控制。支持点击、键盘及轮播切换；封面不能拉伸，文字要对齐。近期游玩区域只显示真正玩过的歌曲。
难度用星级表示，星越多越难。难度应影响音符密度、节奏复杂度和长按组合。
选角色页展示像素人物，当前角色放大并播放待机动画，切换流畅。确认后进入真正的资源加载流程，再显示倒计时。
三、核心玩法与画面
游戏背景铺满整个画面，可以播放 MV、循环视频或动态背景，并覆盖可调整透明度的黑色蒙版，保证音符清晰可见。
左侧是悬浮在背景上的四轨 HUD，轨道从左到右为：
←、↓、↑、→。
音符从上往下移动，底部是固定判定区。玩家在箭头抵达判定区时按下对应方向键；同时支持屏幕上的方向按钮。判定区要足够醒目，轨道占比不能过小。
实现普通单击音符和 HOLD 长按音符。长按箭头的头部与拖尾需要连成一个完整的发光形状。命中后持续按住，拖尾随剩余时长缩短；提前松开应按规则中断。
音乐播放时间作为谱面与判定的共同时间基准，避免暂停、恢复或掉帧后不同步。谱面应贴合歌曲节拍和段落；适合持续的长音可以安排 HOLD，不能只靠无规律随机生成。支持初始谱面生成及后续校正。
提供 Perfect、Great、Miss 等判定、分数与 Combo。判定字样使用统一的街机风格，并有清楚的反馈动效。游戏开始前不显示 Combo，开始连击后才出现。
四、像素人物与踏板联动
使用千禧年 QQ 秀感觉的像素角色，统一使用 288×288 的透明角色画布。
人物位于独立的舞台区域，脚下有上下左右四块踏板。按哪个方向，人物就向对应踏板踩步，该踏板同时亮起。
动作包含待机、踩步、接触保持和回位。HOLD 时停留在踩实的姿势，松开后再回位。脚的位置必须与踏板对齐，不能只让人物整体左右平移。
待机动作应符合角色个性，有清楚但自然的变化，避免反复深蹲、叉腿或讨好式卖萌。人物不能因换帧而忽大忽小、位置漂移或出现背景底色。
可以提供 GIF 作为展示素材；正式游戏中需要可由输入准确控制的逐帧动画。
五、音效与结算
音效整体采用复古电子风格，包括按钮点击、切换、确认、命中、长按、连击里程碑和结算反馈。
倒计时使用三次短促提示音，GO 时配合一声哨音或明确的启动音效。普通命中音应短、清脆、不刺耳；长按音与单击音有所区别。音效不能盖过歌曲。
结算时分数从低到高滚动增长，配合计数音效；数值结束后，评级以盖章方式“砰”地落下，配合冲击音效。展示分数、准确率、最高连击和判定统计，提供重新挑战与返回首页。
六、设置与使用体验
设置包括音乐音量、音效音量、背景亮度及界面语言，默认英文，至少支持中英文。使用 PNG 字标的按钮，也需要保持多语言版本的视觉一致性。
玩法说明必须有清楚完整的内容。保存玩家设置和近期游玩记录。切换页面时正确停止试听、释放输入和清理动画，避免重复播放或残留长按。
以电脑键盘游玩为主，页面随窗口尺寸合理适配。提供清晰的悬停、按下和选中状态。
七、交付要求
请交付完整项目、素材目录、README、本地一键启动脚本，以及可用于上线的构建产物和部署说明。
优先本地资源，不依赖外部 CDN 或付费 API。支持导入我提供的歌曲、MV 和角色素材，素材与配置集中管理，方便后续扩充。
先梳理实现方案，然后完成可运行版本。交付前实际检查完整页面流程、歌曲试听、音画同步、四方向输入、长按中断、暂停恢复、角色踩垫和结算，确保这些功能真实可用。

Original-Prompt (Chinesisch)

你是一名资深前端工程师，同时负责休闲游戏交互与视觉实现。请使用我上传的素材包，从零完成一个可以实际游玩的飞行棋网页游戏，名称是 「飞行棋」，英文副标题是 FLIGHT CHESS。
请直接检查素材、编写项目、运行验证并交付完整文件，不要只给建议、设计稿、代码片段或静态演示。所有可见按钮都要有对应功能，完整走通开局、掷骰、选棋、移动、电脑回合、暂停、胜负和重新开始。
以下是本项目的统一需求。素材包内旧的首页文案、旧修复任务、音效单项接入任务和执行顺序，只作历史参考；本轮任务是从零完成整个游戏。坐标、素材规格和接口以实际 manifest 为依据；玩法和产品要求以本 Prompt 为依据。遇到实质冲突先定位并说明，不要静默改变规则。
一、技术范围和素材使用
使用原生 HTML、CSS、JavaScript，制作可以静态部署的完整项目。不需要账号、联网房间、后端、支付或外部 API。本地同屏指多人轮流操作同一台设备。
运行时不依赖外部 CDN、在线字体或素材网址。全部资源使用相对路径，刷新页面可正常打开。提供本地启动方法；尽可能支持直接打开 index.html，必要 JSON 可在构建时转成随包加载的 JS 数据，不要让 file:// 下的 fetch 失败导致白屏。
先解压并检查目录，不要凭文件名猜内容。总包中主要包括：
flight-chess-assets-v1/：三套棋盘、透明棋子、骰子、按钮与玩家面板、特效、布局和素材清单。
flight-chess-sfx-v2/：三套主题的音效、清单及接入代码。
历史 Prompt 和说明文档。
重点阅读视觉包 common/board-layout.json、pawn-manifest.json、ui-manifest.json、asset-manifest.json，以及音效 v2 的 audio-manifest.json。先确认各字段的真实层级、路径基准、图片尺寸、透明通道和动画帧规格，再写加载器。
视觉包路径通常相对视觉包根目录，不相对 common/。音效 v2 路径已经含有 audio/ 时，不要重复拼接。v2 音效优先于视觉包附带的旧音效，不同时播放两套。
使用正式游戏素材，不把原始参考图、联系表、棋盘坐标辅助图或整张精灵图当作单个游戏元素。既有资产足够时，不重新生成另一套画风。
保留素材原件。确实缺少的简单界面元素可以用 CSS/SVG 补充；关键文件缺失时准确列出文件和用途，不用占位图冒充完成品。
二、产品结构与默认配置
页面包括：首页、对局设置、游戏、结算。另有玩法说明、暂停和设置弹窗。通过页面状态切换，每次只展示当前页面，不把所有页面堆成一个长网页。
支持三套完整皮肤：
ID
展示名称
风格
classic
经典飞行
干净浅底、明亮四色、轻圆角和柔和投影
pixel
像素街机
清晰像素图像、方形描边、阶梯阴影
retro
复古太空
深色太空背景、奶油色面板、复古火箭和印刷质感
主题覆盖棋盘、棋子、骰子、页面、按钮、玩家面板、弹窗和音效。首次默认经典飞行，之后记住用户选择。
支持两种模式：
人机对战：2—4 人参赛，恰好 1 位真人，其余为电脑；可选真人队色和「轻松 / 标准」难度。
本地同屏：2—4 位真人，每位独占一种队色，轮流操作。
默认配置：红队真人，黄、绿、蓝为标准电脑，每队 4 架飞机。轻松电脑从合法动作中随机选择；标准电脑对到达、撞机、推进及风险作合理评分。两档都只能使用合法动作，不能作弊或修改骰子。
三、首页与对局设置
首页：
标题「飞行棋」，副标题 FLIGHT CHESS，配一句简短的中文介绍。
桌面内容最大宽度约 1120—1200px，左右留白至少 24px；采用文案与棋盘预览的双栏，扣除间距后左右约 42% / 58%。手机改为单栏。
主展示区只突出当前选中的棋盘，保持完整 16:9 比例；三套主题通过紧凑的缩略选择卡切换，不要同时摆三张巨型棋盘。预览不使用夸张透视，不裁掉机场。
主按钮「准备对局」进入配置页；「游戏设置」「怎么玩」分别打开对应弹窗。
中文使用清晰的本地系统字体。桌面主标题约 56—64px，手机约 36—44px；正文约 16—18px。字体不拉伸，不加影响识别的多重描边或阴影。
对局设置：
页面标题「准备起飞」。桌面左边是模式、人数、真人队色和电脑难度，右边是唯一的四色席位区；手机上下排列。
四张席位按棋盘方位排列：黄左上、绿右上、蓝左下、红右下。状态明确显示「你 / 电脑 / 真人 / 未加入」，不只靠颜色辨认。
显示主题棋子、队名及玩家名。真人名字可以编辑，最长 10 个字。未加入颜色不生成游戏棋子。
人数按钮、席位加入/退出、底部摘要和开局配置共享同一份状态；人数始终为 2—4。切换模式或真人颜色后，人数与身份必须同步，不能出现两位真人的人机局。
底部显示配置摘要，以及「返回」「开始对局」。手机底栏自然换行并保留安全区，按钮不能盖住表单。
点击一次开始只创建一局，加载必要资源后进入游戏。
四、游戏界面、主题质量和响应式布局
棋盘是主体。桌面主区域显示完整棋盘，右侧操作栏按顺序放：当前回合提示、骰子和掷骰按钮、可选飞机、各队进度、最近事件。窄屏把操作栏放到棋盘下方。
提示明确，例如「轮到红队，请掷骰」「掷出 6 点，选择一架飞机」「没有可移动的飞机」「电脑正在行动」。只有合法阶段允许相应操作。
合法飞机显示队色选择环，同时提供当前队 1—4 号飞机按钮，标注位置和能否选择。棋盘点击与侧栏选择都有效，叠在同一格的飞机也能准确选择。
真人只有一架合法飞机时仍等待用户选择；没有合法动作则提示后自动结束本轮。支持悬停或键盘聚焦预览路线和最终落点，触屏操作不依赖 hover。
每队显示到达数量 0/4，突出当前玩家；事件记录保留最近约 12 条真实事件，不伪造进度或排名。
按钮底图上的文字用 HTML 叠加，参考 UI 清单里的文字区域和锚点。按钮、头像和玩家面板不能任意横向或纵向拉伸。
复古右侧玩家面板保持原图比例。 原素材为 384×112 时按该比例显示；侧栏不足以容纳两列就改为一列，不能把它硬塞成两张狭窄卡片。头像对齐原图圆形区域，姓名、身份和进度不互相覆盖，当前玩家高亮贴合卡片轮廓。
复古暂停、设置等弹窗中的按钮保持正常比例。 320×96 的胶囊按钮图不能铺成宽而扁的长条；在弹窗中居中、限制宽度。需要更灵活尺寸时用合适的 CSS 边框或九宫格，不直接压扁图像。
复古棋盘周围与深色太空背景自然衔接。 检查页面、棋盘外层、padding 留白及图片本身，不能露出一圈白色或浅灰色。修复外观不能裁掉棋盘边缘、改变坐标或覆盖机场。
所有主题的骰子外层背景透明，不加额外白色正方形底框。 保留骰子本体的底色、描边、圆角和阴影；不要把整个骰子抠成只有点数，也不要误删键盘焦点提示。
经典保持清爽；像素图片使用 image-rendering: pixelated，但中文以可读为先；复古奶油面板使用深色正文，深色背景使用浅色文字，不出现浅黄底配浅黄字。
分开定义页面背景、面板表面、正文、辅助文字和强调色。正文约 16px，辅助文字 13—14px；禁用状态仍可读。重要按钮触摸区域至少 44px。
桌面主要检查 1440×900、1366×768；棋盘和主要操作应同时可见，次要日志或较长侧栏可内部滚动。手机检查约 390×844 和横屏：棋盘完整、按钮可达、无横向溢出、无面板遮挡。
五、统一棋盘坐标
全部皮肤共用 1920×1080 设计坐标。基地固定为黄左上、绿右上、蓝左下、红右下，不随玩家颜色交换或旋转。
outerRing 有 52 个全局节点 R00—R51；这里 R 表示 ring，不代表红队。
每队使用自己的 routeIds：56 个位置 = 50 个外环位置 + 6 个私有终点道位置。逻辑直接读取数据，不根据截图重新估算路线。
飞机进度：-2 在机场，-1 在起飞位，0—49 在外环，50—54 在私有终点道，55 完成。
机场、起飞位、路线节点都建立统一的 nodeId 到坐标映射。不同队伍的进度相同，不代表在同一格。
棋盘底图、棋子、选择环、预览、动画与点击命中共用同一个 stage，统一缩放：scale = min(容器宽 / 1920, 容器高 / 1080)，居中留白。指针坐标要先扣除容器与居中偏移，再除以 scale。
不分别缩放棋盘和棋子，不使用 cover 裁切棋盘，不用不等比拉伸填满屏幕。透明飞机优先取合适分辨率版本，显示尺寸以格子为准：经典与复古基准约 48×48 个设计像素，像素款可约 60×60；不能按 512px 源图大小直接摆放。
完整 board.png 与分层棋盘二选一。完整图已含路线和标签时，不再重复叠加。开发坐标辅助图默认关闭。
六、本项目固定玩法规则
这是本 case 采用的规则，请完整实现，不自行混入其他版本的飞行棋规则。帮助说明、预览、AI 和实际结算必须共用同一套规则。
每队 4 架，参赛颜色按 [yellow, green, red, blue] 顺序轮流，跳过未加入颜色；新局随机选一位参赛者先手。
每次骰子 1—6 等概率，真正结果只生成一次。骰子动画展示的中间数字不能改变结果。
机场飞机只有掷出 6 才能起飞。选择后本次动作只从机场 -2 到起飞位 -1，不再额外走 6 格。掷 6 时也可选择已起飞飞机走 6 格。
掷出 6，本次动作结算完后同一玩家再掷一次；没有三连 6 惩罚。撞机、跳格、飞跃或单架到达不额外奖励掷骰。
起飞位掷 d，普通落点为 d - 1。路线上的飞机普通前进 d 步；完成的飞机不能再选。
所有飞机在机场且掷出 1—5 时，显示无合法动作提示，短暂等待后自动换下家。
普通移动结束后，仅在外环检查一次额外移动：先查本队 flightShortcuts，命中则飞跃；未命中再查 sameColorJumpPairs。额外移动结束后停止，不递归连跳，不先跳后飞。
该包的飞跃是队内进度 16 → 28；同色跳格为 0 → 4、4 → 8……44 → 48。进度 48 没有同色跳跃。起飞位掷 1 先到 0，再跳到 4。这些都以布局数据表为准。
必须恰好停在进度 55 才完成；点数过多先走到终点，再把剩余步数反向走回。若 p + d > 55，最终落点为 110 - (p + d)，但动画必须展示真实往返路径。
例如 53 掷 4，路径是 [54,55,54,53]，未完成；54 掷 2，路径 [55,54]，未完成；54 掷 1 才完成。经过终点不能提前计分，下次行动仍向终点前进。
撞机仅在整个动作的最终落点结算。只对公共外环的同一 nodeId 判定，撞回该格全部敌机；经过的格子、跳跃前临时落点、飞跃穿过的私有道均不撞机。
被撞飞机回到原来的机场槽位，进度重置为 -2。同队可以叠放，不形成路障；视觉轻微错开不改变逻辑坐标。
机场、起飞位、私有终点道和已完成飞机不参与敌方撞机。首位 4 架全部完成的玩家获胜，立即结束整局，胜利优先于奖励掷骰。
七、游戏状态、暂停与操作可靠性
将纯规则、状态管理、渲染、音效分离。合法动作、路线预览、AI 和结算共享同一移动计划，不各自编写一份规则。
至少区分等待掷骰、骰子动画、等待选棋、移动、结算、游戏结束。暂停是独立标志，不能覆盖原来的游戏阶段。
事件处理入口检查当前玩家、阶段、暂停状态、合法动作和本局身份；动作开始前同步锁定。不能只把按钮变灰而不阻止连点或键盘重复触发。
每局及每次行动有有效性标记。返回首页或重新开始时取消旧动画、等待、音效和 AI 调度；旧回调不得修改新局。一个移动计划只结算一次。
暂停冻结骰子、移动动画、AI 思考和回合等待；继续时从原进度恢复，不重掷骰子、不重复结算。
暂停弹窗提供「继续游戏」「设置」「重新开始」「返回首页」。中途重开或离局先进行简短确认，取消后恢复原暂停页。
局中打开玩法说明同样暂停；关闭时恢复打开前的暂停状态。页面进入后台时自动暂停，回来后由用户继续。
局中在暂停状态切换主题，只替换外观与主题音效。保留位置、回合、玩家、待使用骰子、活动移动计划和动画进度，不能重开一局或把飞机弹回原位。
设置包括主题、音效开关与音量、音乐开关与音量、动画速度 0.75× / 1× / 1.5×。速度只影响表现时长。使用 localStorage 保存偏好，读写失败不阻止游戏运行。
八、音效、音乐与动画反馈
优先使用 flight-chess-sfx-v2 中现有音效及其集成代码。三套主题使用自己的版本，通过实际事件触发，而不是点击任何按钮都播放同一种声音。
接入这些事件：
界面：ui-click、ui-back、theme-select、pawn-select、invalid。
对局：game-start、turn、pause、resume。
骰子：dice-roll、dice-shake-loop、dice-stop、dice-six。
飞机：takeoff、step、jump、flight、capture、bounce、arrive。
结果：win、lose；按真实结果选择，不同时播放相互矛盾的结果音。
具体要求：
用户首次有效点击时解锁音频。浏览器阻止播放、某个声音加载失败或静音，都不能卡住游戏；不要求用户在每次点击时重复授权。
v2 清单使用 events[].variants[theme] 时，按此结构读取，不沿用旧清单的 effects 假设；同事件多变体可随机选择。
摇骰音与实际骰子动画一致。使用长循环时，在最终落点前停止，再播放落定音；不要把完整摇骰声和循环摇动声叠在一起。
只有最终结果确实为 6 才播放六点反馈。移动音按经过节点触发，不按每帧触发；撞机按真实结算播放，到达仅在最终完成时播放，胜利只播一次。
暂停、重开、离局和换肤正确处理循环与残留声音。暂停停止单次音，恢复不重播旧撞机声；仍有效的摇骰阶段恢复时才重建循环。使用 v2 管理器时注意 resetSession() 保留暂停标志，暂停页重新开局需正确恢复；旧回调先检查行动有效性，不能误停新局循环。限制并发播放数量，避免连续操作爆音；默认音量适中，遵循素材建议增益。
如素材没有背景音乐文件，可用本地 Web Audio 生成简洁、轻量的背景音乐。音乐首次交互后启动，有独立开关和音量，不遮盖操作音；不要把音效包描述成已经包含音乐曲目。
使用现有起飞、烟雾、撞机、到达特效。读取帧尺寸、帧数和播放规格，不整张平铺。该包烟雾 12 帧按 20fps 播放约 0.6 秒，其余相应 12 帧特效按 16fps 播放约 0.75 秒；发现旧说明矛盾时核对实际清单和素材。
九、结算与必要验证
结算页展示获胜队伍、对应飞机和奖杯，以及真实掷骰次数、撞机次数、各队到达数量。未完成队伍只显示进度，不虚构名次。「再来一局」沿用本局配置，「返回首页」正常退出。
请完成以下检查并修复实际发现的问题：
纯规则验证：掷 6 起飞、起飞位进外环、六点奖励、无合法动作、同色跳格、飞跃优先且不连跳、48 不跳、终点反弹、最终落点撞机、多敌机叠放、准确完成和整局胜利。
人机与本地同屏的 2/3/4 人配置，身份、席位和真实出场队伍一致；两档 AI 均能继续推进对局。
连点掷骰、快速选棋、动画中暂停与继续、AI 等待中暂停、动画中换肤、重开和离局，不产生重复行动或旧局回调。
三套主题逐一检查首页、配置、游戏、暂停/设置、结算，重点核对文字对比度、长队名、叠机选择、面板比例、棋盘边缘和骰子透明外层。
检查主要桌面尺寸、手机竖屏与横屏，缩放后飞机与格子对齐，点击命中正确。
检查音效首次解锁、静音、音量、循环停止、换肤、暂停和重开。资源缺失、控制台报错和未绑定按钮必须处理。
有浏览器执行能力就实际打开检查并截图。无法运行浏览器时，明确说明未实测的项目，不把代码阅读描述成已通过浏览器验收。
十、交付要求与执行顺序
请按「检查素材 → 实现纯规则与状态 → 完成页面和响应式布局 → 接入皮肤、动画及声音 → 验证并修复 → 打包」推进，直接完成，不在每一步停下来问我是否继续。
交付包含：
完整项目源码及实际使用的本地资产，可静态运行或部署。
简明 README：启动方法、目录、采用的规则、音效与主题接入方式。
有意义的规则测试和验证记录，区分已执行与未执行的检查。
可下载项目 ZIP；环境支持预览时同时给预览地址，不用部署成功代替功能验证。
实现时先保证布局、状态和规则正确，再完善装饰。不要增设账号系统、联网多人、道具商店等本轮未要求的功能。遇到普通实现选择自行做合理决定；只有关键文件或执行能力确实缺失时，才准确告诉我需要补什么。
Prompt 结束

Original-Prompt (Chinesisch)

请使用我提供的素材，直接制作一个完整、可运行、可反复游玩的网页游戏：《竹蜻蜓飞行队 / BAMBOO HOP》。完成项目文件、真实素材接入、交互逻辑、响应式布局和验证，交付可直接打开的游戏。
这是一款参考 Flappy Bird 的轻量飞行小游戏：玩家选择戴着竹蜻蜓的小猫或小狗，点击或按空格向上飞，穿过连续障碍，并收集罐头、猫粮、狗粮和冻干。气质可爱、轻松，动物保留原有的低模和照片贴图质感，背景与 UI 要协调。
1. 先检查素材，再开始实现
先解压并检查素材目录、manifest 和实际图片尺寸，处理好 ZIP 多包一层文件夹的情况。已有 8 位队员，编号为 01、02、03、06、10、11、12、16；对应橘猫吐司、三花饭团、奶牛芝麻、暹罗布丁、柯基奶盖、金毛豆包、腊肠可可、吉娃娃花生。全部开放选择，各自使用正确的图片和动画，物理能力相同。
选角卡片使用透明 PNG，大预览可使用动态 WebP，游戏中使用 PNG 精灵图。现有角色精灵图为 2048×1280，8 列×5 行，每格 256×256，共 40 帧，25 fps，按从左到右、再从上到下的顺序读取。核对实际文件后接入，每次只绘制一帧。
每帧已包含动物和竹蜻蜓，不再叠加第二个旋翼，不旋转整张精灵图。保持透明背景和动物比例；统一缓存图片，角色加载完成后才能进入准备页。
地图、障碍、食物图标、艺术字、音效和音乐优先使用提供的真实资产。图集按 manifest 的绝对裁切坐标读取。缺少某个必需素材时明确指出，不把占位图描述成已接入的素材。
2. 完整流程和 UI
流程为：首页 → 选择队员 → 选择地图 → 加载 → 准备起飞 → 游戏 → 结算。支持设置、暂停、继续、重开、更换地图、更换队员和返回首页。
首页使用提供的透明艺术字 PNG 显示游戏名，搭配动态队员、最高分、开始飞行和设置按钮。视觉使用奶油白、深绿、蜂蜜黄，按钮有清楚的层级、按下反馈和键盘焦点。避免把普通粗体文字当成最终主标题。
选角页显示全部 8 位队员，桌面有放大的动态预览与 4×2 卡片网格；手机压缩留白和预览尺寸，保证名字及操作按钮清楚可见。选中状态体现在卡片边框和底色，不用虚线圈或白色装饰盖住动物。
选图页展示 3 张地图的真实预览、名称、难度和各自的本地最高分。
准备页使用居中的起飞卡：桌面左侧放大展示当前动态队员，右侧排列“准备起飞”、地图、难度和黄色“开始飞行”按钮；手机改为上下排列。返回首页带文字和安全边距。操作提示只保留一处，背景不重复出现另一只动物。
游戏 HUD 只保留当前穿柱分、补给数量和暂停按钮。
结算显示本次分数、最高分、地图及各类补给数量，提供“再飞一次”“换张地图”“换个队员”“返回首页”。每个操作都是真实、可见的按钮；不显示“先歇一下……”等随机结算文案。
3. 电脑和手机都铺满可用画面
电脑以 16:9 横向构图为参考，手机以 9:16 竖向构图为参考。实际按浏览器可用窗口铺满，支持 16:10、超宽屏、手机长屏和横竖切换。Canvas、背景、HUD、菜单使用同一个舞台，不出现游戏只占中间一小块或两侧露出无关底色。
场景保持等比，背景用 cover 裁切，动物和障碍不拉宽、不压扁。逻辑世界高度固定 768，宽度按实际宽高比推导；横屏增加视野，不能改变重力、碰撞或障碍到达玩家的反应时间。UI 按可用空间重新排版，不把手机页面整体拉伸成电脑页。
处理设备像素比、手机安全区域和动态浏览器高度。正常游戏不滚动页面；极小窗口的菜单可内部滚动。调整窗口大小不清空分数或重开本局。
4. 飞行手感与连续障碍
玩家的水平位置基本固定，背景和障碍向左移动。每次有效点击、触摸或空格，将竖直速度设为一次固定向上速度；松开后受重力下落。长按不连发，拖动不能控制坐标。
以逻辑高度 768 为基准，使用初始参数：地面 y=704、角色初始 y=330、重力 980、起飞速度 -330、最大下落速度 560、角色显示尺寸 96×96。角色身体碰撞圆半径 20，绘制锚点为宽度的 55%、高度的 58%；透明留白、旋翼和尾巴尖不按整张图片矩形参与碰撞。触顶约束在画面内，撞地面或柱子结束游戏。
三张地图分别对应简单、普通、困难，沿用素材包的真实名称和美术：牧场、夕阳、夜景主题。按地图选择固定难度，不在一局中突然改变已有障碍。
地图 ID / 难度
滚动速度（逻辑像素/秒）
空隙高度
相邻柱对左边缘间距
相邻空隙中心最大变化
meadow / 简单
138
236
284
50
sunset / 普通
156
214
272
65
night / 困难
174
194
262
78
柱子外宽 76。第一、第二对空隙靠近起始高度，给玩家适应时间；后续空隙在合法范围内平缓变化，只在创建时随机一次。
障碍必须按滚动距离持续补充：维护前方预加载距离，用循环补齐右侧队列，及时删除左侧离屏障碍，队列为空时能恢复。不能只创建开头两对，也不能依赖得分才生成下一对。扩宽窗口后补足前方障碍，已有柱子的世界位置保持不变。
障碍纹理、柱身、柱帽的可见轮廓与碰撞矩形一致。正确区分上柱和下柱的端帽，不出现柱帽突出、贴图接缝或碰撞框超出画面的情况。每通过一对障碍只加一分；同一步先检测碰撞，再处理拾取和得分。
5. 可吃的宠物补给
收集物使用提供的宠物食品资产：罐头、猫粮袋、狗粮袋、冻干。按当前队员种类显示猫粮或狗粮，罐头和冻干通用。
每对障碍最多关联一份补给，放在可安全通过的通道内；不嵌入柱子，不遮住下一处空隙。基础分布为粮食约 55%、冻干约 35%、罐头约 10%，每份记 1 个补给。物品类型创建后固定，收集只触发一次，离屏及时回收。
补给数量与穿柱得分分别统计。拾取有轻量动画和短音，结算按种类显示数量；没有任何物品时也能正常结算。
6. 音效与三张地图的音乐
接入我提供的短音效和三首 BGM，按素材配置一图一曲，整体为可爱、轻快的电子小游戏氛围。
每次有效起飞播放一次可爱的短音；拾取、得分、碰撞、菜单和结算有对应反馈。第一次真实操作后启用音频，起飞按钮不同时叠加两次音效。长按不连续播放，迟到的加载请求不能在暂停后补播一串旧声音。
同一时刻只播放一条 BGM。开始游戏时播放对应地图曲目；暂停记住播放位置，继续恢复；死亡或返回菜单停止，重开从头开始，切地图切换曲目。音乐播放完可重播，不把整首歌曲循环描述成已制作无缝接点。
设置里提供独立的音效开关、音乐开关及各自音量，并保存设置。音乐使用适合长音频的播放器，避免一次把三首整曲全部解码到内存。音频失败不阻断游戏。
7. 状态、输入和稳定性
用明确状态管理 HOME、SELECT、MAP_SELECT、LOADING、READY、RUNNING、PAUSED、DYING、GAME_OVER，所有页面按钮接通。
READY 中角色只悬停，不受重力、不计分。第一次有效输入同时开始游戏和触发一次起飞。准备页点背景、点卡片、点起飞按钮或按空格均可开始；返回、设置、暂停等按钮只执行自身操作。统一指针输入，防止一次触摸被 pointerdown、touch 和 click 重复处理；忽略空格自动重复。
项目只启动一个 requestAnimationFrame 主循环，固定物理步长并限制异常帧间隔。暂停时物理、障碍和游戏动画时钟冻结；切后台自动暂停，回来由玩家主动继续。清理隐藏菜单的旧焦点，避免继续游戏后空格失效。
死亡只结算一次。重开清空分数、补给、障碍队列、已得分标记、速度、计时、粒子和待处理输入，保留选中的队员和地图，回到准备页。不能重复注册监听或让游戏越重开越快。
使用本地存储保存最高分、分地图记录、上次队员/地图和设置；损坏或不可用时回退到默认值。快速换角色或地图时，旧异步加载结果不能覆盖新选择。
8. 技术和交付
采用 HTML、CSS、原生 JavaScript 与 Canvas 2D，UI 可用 DOM 实现。无需后端、账号、API Key 或外部 CDN。资源使用相对路径；素材配置可以整理为本地 JS，不能依赖 file:// 下容易失败的 JSON fetch 才能启动。
交付完整项目目录与 ZIP，包含真正使用的全部素材、README、端口 6817 的 start-local.sh、macOS start-local.command 和 Windows start-local.bat。启动脚本先进入项目目录，端口被占用时提示，不结束其他进程。
同时提供可双击打开的独立 HTML，由源码自动构建，真正内嵌所需图片、CSS 背景、脚本、音效和三首音乐。把单 HTML 复制到空目录也应能运行；不能只有资产名称或清单，实际仍偷偷请求原文件。
9. 完成后实际验证再交付
至少检查：8 位队员分别进入游戏、3 张地图切换、旋翼动画、第一次起飞、连续障碍、碰撞和计分、四类补给显示、暂停/后台恢复、连续重开 5 次、菜单按钮误触、音效和 BGM 生命周期，以及刷新后保存恢复。
独立验证每张地图的障碍流连续运行至少 3 分钟，不在开头两对之后断掉；实际游玩检查保持正常重力、碰撞和真实计分。桌面 1920×1080、1440×900 和手机 390×844、360×640 下检查首页、选角、选图、准备、游戏、结算和设置，确认没有遮挡、拉伸或裁掉按钮。
确认没有资源 404、控制台未处理错误、图片错帧、音乐重叠和移动端一次触摸跳两次。发现问题直接修复，并在交付中简短说明实际完成的验证；没有真实浏览器能力就如实标明，不能把模拟 DOM 测试写成实机验收。
现在开始检查素材并实施，持续完成到可以交付完整游戏。未写明的小细节选择与现有美术一致的稳妥方案。

Original-Prompt (Chinesisch)

单轮对话任务：做一款俯视角城市逃生游戏。玩家用 WASD 或方向键穿过街区，躲避会追踪的敌人，并管理奔跑时消耗、停下后恢复的耐力；收集三把钥匙依次打开封锁道路，医疗包可以恢复生命。到达地图另一端的安全区即获胜，生命耗尽则失败；提供小地图、目标提示、命中反馈、暂停和重新开始。

Original-Prompt (Chinesisch)

#餐厅趣味菜单

请设计并实现上海本帮菜餐厅「海上春饭店 HAISHANG CHUN」的网站，整体呈现千禧年中国电视广告、早期 CGI 与中式书法融合的复古 Y2K 风格。首页采用占满视口的动态视觉舞台，背景由顶部桃橙色、中部蓝色、下部草绿与墨绿色、底部深蓝色形成连续的多段渐变，色带之间大范围柔焦融合，营造朦胧的天空与地平线空间感；渐变覆盖整个屏幕，并叠加细密颗粒、轻微色彩溢出与录像带质感。画面中央悬浮巨大的朱红色立体书法「海上春饭店」，保留毛笔笔锋，具有明显挤出厚度、侧面阴影和早期数码塑料光泽，缓慢旋转、漂浮与推近；周围穿插花瓣、香料、彩色球体和植物的超现实动画。顶部导航直接叠在渐变背景上，使用紧凑的红色中英双语文字，英文品牌居中；底部中央显示柠檬黄黑描边电影字幕「今朝吃点好的。 / Something good on the table.」，右下角设置黄色细边框的圆角餐桌影像窗口，左下角提供声音与动态控制。菜单作为独立页面，采用高饱和蓝底、巨型绿色「菜单」字、大号衬线英文导航、斜体下划线选中状态和黑色点线菜价，中文菜名在上、英文在下、人民币价格右对齐；关于、订座等页面延续鲜红、亮粉、绿色的大面积色块与闪光灯餐桌摄影。使用 React、TypeScript、Vite、Tailwind CSS 与原生 CSS 开发，Three.js／WebGL 实现渐变场景和立体文字，GSAP 编排漂浮、镜头与字幕转场，React Router 管理页面；字体、图片和影像本地加载，菜单数据独立维护，适配电脑与手机，支持暂停动态及减少动态效果，交付完整源码、可运行页面和启动说明。

Original-Prompt (Chinesisch)

#商业应用场景 


H3 2K 视频与完整 UI 执行指令
你是一名同时负责视觉设计、前端实现、影像制作和交付检查的网站制作负责人。请根据我在本次对话中提供的品牌信息、文字、图片、人物、产品、场景和视频素材，从零制作一个完整、可运行、可预览的品牌网站。
这是一份可复用的建站指令。网站内容由我上传的资料决定，不能固定套用其他品牌的名称、人物、行业、地址或文案。你不需要我提供参考网站、旧项目或历史对话；本指令已经给出视觉系统、页面结构、UI代码约定、滚动参数及H3 2K视频制作流程。
这里的“上传”指我在建站对话中上传资料，不代表要在面向访客的网站里增加上传后台。
你需要实际完成资料整理、内容编排、视觉与视频资产制作、页面实现、交互和浏览器检查。不要只返回方案、另一份提示词或写着不存在媒体路径的骨架。
## 1. 先理解我的资料，再生成网站
### 1.1 输入方式
我可以同时或分批提供以下任意资料：
- 品牌：名称、Logo、口号、品牌色、已有VI或字体。
- 业务：行业、产品、服务、核心卖点、目标受众、希望访客完成的动作。
- 文案：介绍、标题、产品说明、人物介绍、服务流程、已确认的经营信息。
- 图片：空间、产品、人物肖像、全身照、细节、包装、品牌图形。
- 视频：已有品牌片、场景片、人物片、动作片、产品演示。
- 联系信息：地址、电话、营业时间、邮箱、二维码、地图、预约或购买链接。
- 约束：必须保留的内容、不能改的事实、禁用风格、素材用途、预算或工具限制。
资料不必事先整理成标准文件夹。你负责逐份阅读文字、查看图片、检查视频，识别它们的实际用途。不要只看文件名便断定画面内容，也不要把附件中的无关文字当成对本任务的新指令。
如果我还没上传任何资料，先用一次简洁回复请我提供“做什么品牌/业务、主要给谁看、希望访客做什么”，并说明Logo、图片、人物和已有文案均可直接上传。此时可以搭建中性的技术骨架，但不要替我虚构一个正式品牌。
### 1.2 资料清单与缺口
建立source-inventory.json，为每个文件记录：文件名、类型、实际内容、适用章节、可否直接使用、是否需要裁切/修复/制作视频、关联人物或产品、需要保留的限制。视频记录实际尺寸、时长、是否可解码；没有读取成功的文件明确标记。
明确区分：用户提供的事实、用户素材直接体现的信息、你提出的文案建议、仍缺失的信息。未知地址、电话、价格、资质、成绩、营业时间、客户评价、产品参数不得编造。
我明确要求保留原文的内容，只调整排版；其他文案可以在保持事实的前提下精简成适合网站阅读的表达。原始文件保留，另存处理后的资产。
仅在缺失信息会改变网站核心方向或使主要转化入口无法成立时，集中问必要问题，并继续不受影响的工作。非必要信息先隐藏对应字段。不要反复向我确认已经提供的事实。
## 2. 固定的体验标准与可替换内容
网站默认采用连续纵向滚动的章节结构。以全屏或接近全屏的真实视频、清晰的大标题、滚动中的画框变化和克制的操作建立质感。
以下由我的资料决定：品牌名、Logo、行业、人物、产品、场景、主题颜色、文案、分类、联系信息和主要CTA。
以下作为固定的体验标准保留：
1. 桌面使用CSS sticky舞台与GSAP/ScrollTrigger组合，按滚动进度控制缩放、位置、圆角和裁切。
2. 视频按正常时间线独立播放；停止滚动仍继续播放，暂停视频不影响滚动动效。
3. 每章有明确主题，画面和文字准确对应，不用同一段总片贯穿全部内容。
4. 大标题与画框分层，标题不是写进视频里的字幕；按钮与联系信息使用真实HTML。
5. 人物或重点对象的卡片桌面并列，手机纵向展示，不把三张卡缩成细条。
6. 最后一章用清晰、居中的品牌与行动卡收束，不堆砌空字段和重复口号。
7. 新生成的视频必须真实调用H3 2K，并接入真实成片。不能用静图动画冒充视频，也不能声称调用了实际上不可用的工具。
默认采用黑白、暖白和自然影像的视觉系统；我上传了明确品牌色或VI时，调整颜色和品牌图形，保留留白、字级、画框运动和操作的克制程度。
## 3. 将内容编排成完整的章节叙事
优先按以下八章组织，每章完成一个信息任务。章节名称、标题和素材必须来自我的业务，表中的行业示例只是映射方法，不是要出现在网站里的固定文字。
|章节|访客需要理解什么|可使用的内容|版式与动效|
|---|---|---|---|
|01 品牌开场|这是什么，为什么值得看|品牌定位、最核心场景/产品、一句主张|完整主视觉，大标题，shrink|
|02 场景与品质|品牌提供怎样的体验|空间、环境、材料、工艺、使用情境|主视频＋2个左右主题切换，expand|
|03 产品/服务选择|具体可以选择什么|产品系列、服务类型、设备或业务分类|主播放器＋文字选项，focus|
|04 真实过程与氛围|实际体验是什么样|使用过程、制作过程、活动、协作或日常|窄幅裁切展开，reveal|
|05 关键人物/重点对象|谁或什么构成核心价值|团队、创作者、代表产品或重点案例|3张左右独立动态卡，coaches模式用于卡片动画|
|06 解决方案|如何满足我的需求|服务方法、方案、定制、配套与支持|一段主题视频＋短说明，shrink|
|07 行动邀请|接下来可以怎样参与|到店、体验、咨询、预约、购买、观看完整作品|主视觉展开，expand|
|08 联系与转化|在哪里、如何联系或行动|品牌组合、真实信息和主要入口|居中暖白品牌卡，footer|
“coaches”只是动画模式的内部标识，不要求网站必须有教练。我的资料是产品品牌时，第5章可以是3件代表产品；是工作室时可以是3位创作者；没有对应内容时选择资料中真实存在的重点对象，不编造人物。
默认八章，但内容不足时先判断是否可通过真实资料组织出八个有效主题。如果必须合并，保留开场、产品/服务核心、行动收束和动效节奏，说明合并原因；不复制段落、不堆空白、不用不存在的业务硬凑章节。章节编号总数和导航根据最终实际数量生成。
每章标题尽量简短、具体，中文通常约8–18字；开场可用2–3个短句；正文1–2句。长介绍通过层级安排，不能把一段文档原封不动塞进视频中央。品牌正式长文需要保留时，可用展开区域，但必须真实可读。
CTA使用明确动词，如查看系列、认识团队、了解服务、预约体验。每个按钮必须有真实目的地。没有预约系统就跳转到真实联系区域，不制造“预约成功”。
## 4. UI视觉规范：具体实现到数值
### 4.1 颜色与影像
默认颜色：页面#101214，视频画框#171a1e，卡片#20262c，页脚#0b0d0f；主标题白色；末章卡#f6f5f1，文字#16191b，重点文字#050506。次级信息通过透明度区分。
以用户上传的空间、产品和人物建立统一影像语言。没有现场照片时可生成概念场景，但不要把生成画面宣称为真实门店实拍。自然、可信、干净的商业摄影感为默认方向；用户已有明确风格时沿用其风格。
画面主体完整，先用大景/完整产品交代，再以中景或动作补充。每段应增加新信息，不用手、水杯、墙角、纹理碎片替代核心内容。视频色调、光线、人物和材质统一。
视频遮罩只做可读性支持：顶部黑色30%，到40%位置透明，底部黑色48%。不把画面全压黑，不添加无关粒子、霓虹、装饰性图表或满屏渐变。
### 4.2 字体、字级与排版
正文与英文默认Manrope；后备Arial、PingFang SC、Hiragino Sans GB、Microsoft YaHei、sans-serif。中文使用系统中文无衬线字体。小型导航与英文标签用JetBrains Mono或ui-monospace。
桌面章节标题：
```css
.zoom-title {
  position: absolute;
  z-index: 2;
  top: clamp(112px, 12.5svh, 170px);
  left: 6vw;
  right: 6vw;
  max-width: 13em;
  margin: 0;
  font-size: clamp(34px, 6vw, 86px);
  font-weight: 700;
  line-height: 1.08;
  transform-origin: left top;
}
```
1512px宽度下标题约86px，左留白约91px，顶部至少112px。短句用span分段，桌面自然横排、手机按语义换行；不要把一个固定br用于所有屏幕。
普通正文层left/right6vw、bottom5svh、max-width46em，字号clamp(15px,1.4vw,20px)，line-height1.6。标题与正文都是画框的同级元素，不能把整段正文随视频一起缩小。
避免孤字、孤立标点与挤压。标题太长时优先精简可改写的标题、按语义分行，不能用极小字体解决。
### 4.3 顶部固定栏
fixed top0，左右铺满，z-index40，padding12px clamp(16px,3vw,40px)，flex横排，gap16px。顶部背景由rgba(10,12,14,.86)渐变至透明。
左侧Logo显示高度约20px、宽自动，链接到开场；旁边放品牌小口号，10px、字距.22em、白色62%透明度。右侧放“暂停视频”按钮。
按钮初始aria-pressed=false，点击后文字改“继续视频”、aria-pressed=true。字体12px、padding8px 14px、1px白色38%边框、半透明黑底、blur8px。暂停态白底黑字。
页头容器pointer-events:none，实际按钮和链接pointer-events:auto，避免透明区域阻挡页面。
### 4.4 章节编号、导航与CTA
编号格式“01 / 08 · 品牌名”，普通章top68px、left6vw、12px、字距.1em，z-index4。手机top64px，末页编号改正常流居中。
桌面导航固定在right:clamp(8px,1.4vw,22px)、top50%、translateY(-50%)，z-index40，纵向gap8px。每项是编号＋短横线，说明在hover与focus-visible时出现。说明绝对定位在左侧，避免隐藏文字仍占宽度导致编号错位。横线14px→28px，过渡0.25秒。
普通CTA白底黑字、矩形、13px、padding10px 18px、margin-top12px；hover上移2px与轻阴影，0.2秒。不使用巨型胶囊按钮。
素材选择按钮12px、padding8px 13px，白色30%边框、半透明黑底、blur6px；未选中白色80%，选中白底黑字。组内gap8px、margin-top14px、允许换行，不堆一排重复缩略图。
### 4.5 人物或重点对象卡片
桌面3列，grid-template-columns:repeat(3,minmax(0,1fr))，gap24px。卡片区域inset:clamp(232px,26svh,320px) 6vw 21svh。卡片圆角14px，overflow:hidden，背景#20262c，视频cover。
名称位于左下，left16px、bottom18px，白字clamp(20px,2vw,30px)与柔和黑色阴影。切换按钮位于右上top/right12px，11px、padding6px 10px。姓名/品名与按钮分处两角。
人物卡按钮可为“看工作状态”“看训练动作”；产品卡可为“看使用演示”。按内容设定，不把内部素材标签直接给访客看。
卡片下说明桌面bottom4svh，flex横排、允许换行、gap18px；与卡片留开，不叠在姓名上。人物/产品主体的object-position按实际素材调整，不统一裁掉头部或产品关键部位。
### 4.6 最后一章
深色背景中居中一张暖白卡，所有内容单列居中。舞台relative、min-height100svh、height:auto、padding90px 6vw、grid居中、overflow:visible。无普通视频暗角。
卡片width:min(1100px,100%)，圆角16px，背景#f6f5f1；padding:clamp(32px,4.5vw,64px) clamp(24px,5vw,70px)；flex column、align-items:center、text-align:center；gap:clamp(14px,1.8vw,22px)。
顺序：小编号 → 品牌Logo/品牌组合 → 邀请标题 → 一句说明 → 已确认联系信息 → 主要CTA → 必要小字。
Logo或组合图最大宽约520px、高auto；用户Logo细长或竖长时按视觉面积调整，不能强行拉成固定比例。口号用真实HTML或SVG排版，不让图像模型生成文字。已有Logo优先使用；没有Logo时先做准确品牌字标，不能复制其他品牌标志。
邀请标题clamp(20px,1.8vw,27px)、weight500、letter-spacing:-.01em；正文14–16px、line-height1.8；联系区域最大620px；标签10px等宽、字距.14em；小字11px。
只展示已有信息。未知字段完全隐藏，不显示“待补充”五格表。卡片可随内容增长，不强制180/200svh，不追加第二个巨大口号结尾。主要CTA真实可用；外链新窗口时设置合适的rel。
## 5. 滚动实现：固定采用下面这套空间关系
普通章：
```text
section.zoom-scene[data-zoom-scene][data-motion]
└─ .zoom-stage
   ├─ .scene-number
   ├─ .zoom-frame[data-motion-frame]
   │  └─ .zoom-media-inner[data-motion-inner]
   │     └─ .video-surface[data-video-surface]
   │        └─ video[data-auto-video]
   ├─ .zoom-title[data-motion-title]
   └─ .zoom-copy[data-motion-copy]
      ├─ p
      ├─ .scene-choices[data-video-choices]（需要时）
      └─ a.cta
```
标题、编号、文案必须在画框外，作为舞台子元素。画框transform-origin:center；标题transform-origin:left top。第5章的deck也是舞台直接子元素，卡片带data-motion-card。
启用GSAP后给html加zoom-enhanced。桌面普通章/卡片章min-height180svh，舞台sticky、top0、height100svh、overflow:hidden；手机普通章155svh，卡片章与末章改自然流。
180svh是section总长度，实际sticky动画行程约80svh；155svh约55svh。不要再加一屏空占位，也不要叠加GSAP pin。不做整页滚轮劫持、强制scroll-snap或额外惯性滚动。
普通ScrollTrigger：trigger为section，start:'top top'、end:'bottom bottom'、scrub:true、ease:'none'、invalidateOnRefresh:true。向上滚动严格可逆。
|模式|桌面|手机|时间轴|
|---|---|---|---|
|shrink|框scale1→.68，圆角0→22；标题1→.58|框1→.88，圆角0→14；标题1→.82|框duration.85从0起；标题.7从0起|
|expand|框.68→1，圆角22→0；标题y24→0、opacity.65→1|框.88→1，圆角14→0；标题相同|框.85从0起；标题.5从.15起|
|focus|内部画面scale1.22→1，外框固定|内部1.1→1|duration1|
|reveal|左右clip inset43%→0，rotate-5deg→0|左右inset20%→0，rotate0|duration.85|
|coaches/卡片|卡片scale.85→1、y40→0、stagger.12|每卡.92→1、y24→0|桌面duration.65；手机每卡top90%→top40%|
|footer|框scale.96→1、y24→0、opacity.45→1|同桌面|top95%→top35%，duration1|
除手机卡片章与末章外，文案从y24、opacity.35变到y0、opacity1，duration.5，从时间轴.45开始。duration是滚动时间轴的相对长度，不是用户必须等待的秒数。
同版本GSAP/ScrollTrigger，推荐3.14.2；用matchMedia管理800px断点与prefers-reduced-motion。初始化幂等，销毁旧context；resize、字体ready和必要布局变化后合并到一帧refresh。GSAP失败时仍有可读静态页面。
滚动代码不能把比例赋给video.currentTime。视频播放模块只负责媒体，不操纵画框缩放。
## 6. H3 2K：实际生成流程，不能省略或暗中换模型
### 6.1 先核实工具能力
在执行环境中发现并读取真实的视频生成工具参数，确认H3模型、2K输出档位、时长、画幅、首帧/参考图数量、异步任务提交与查询方式。用真实schema字段调用，不自行发明API名、参数或任务结果。
新生成视频固定使用H3 2K。H3 Max、其他模型或较低分辨率不能被当成已满足本要求。若工具提供独立model与resolution字段，分别选择真实的H3标识与2K档；若以完整档位提供，使用该档位的实际标识。
工具不可用、无权限或无法输出要求规格时，说明具体缺口，继续内容整理、UI和可完成的图像工作；保留已可用的用户视频或封面，不静默换模型、不伪造MP4、不把planned标为generated。
用户上传的合格视频可以直接复用，不需要为形式上的“全生成”重做；明确记录来源。需要补充的动态必须真实调用H3 2K。
### 6.2 建立一致性基准
先从上传资料中选出能代表品牌的主场景、关键对象、人物脸部、全身比例与产品细节。必须看图确认用途，不能把所有图片一股脑送进每条任务。
- 同一人物：保持面部、发型、身材比例、服装与年龄特征；人物身份不跨片漂移。
- 同一产品：保持外形、比例、颜色、结构、材质和真实功能；Logo/包装字样优先用真实素材保留。
- 同一空间：建立建筑和主要物体的固定位置；换机位不能让设备、家具或入口随机换位。
- 没有全身图：先生成并核对与本人肖像一致的比例基准，再做全身动作；不要直接从一张脸猜出不稳定身体。
- 没有现场素材：根据业务制作统一概念环境基准，明确为概念影像，不能伪称真实实拍。
先完成少量内部校准：一个主场景、一位人物或一件产品、一条H3 2K短片。确认质感、空间和对象稳定，再扩展其余素材。用户已给出的风格要求优先，不要求用户为了继续工作额外找参考网站。
### 6.3 素材数量与页面位置
按实际内容建立媒体任务表。内容足够丰富时，以19条视频位置为完整配置：
|章节|视频位置|制作重点|
|---|---|---|
|01|1条开场|完整核心场景或主产品，低速推进或稳定展示，第一眼理解业务|
|02|2条主题片|整体空间/情境与品质/细节，两个不同角度，共用一个播放器|
|03|最多6条分类片|每条准确对应一种产品/服务/设备/方向，互不冒用|
|04|2条过程片|主要过程与协作/秩序/细节，补充实际体验|
|05|3个对象各2条，共6条|每个对象一条形象微动、一条真实工作/使用/训练/演示|
|06|1条方案片|对象与用户/流程之间的具体关系，回应需求|
|07|1条邀请片|完整品牌情境或到达/使用路径，收束到行动|
|08|0条|用清楚的品牌图形、联系信息和CTA完成转化|
19是资料充足时的完整制作配置，不是强迫每个行业拥有6个分类和3个人物。依据实际资料确定数量，给出“制作数量→章节入口”对应表；内容减少时同步减少播放器选项与任务，不能生成重复无效片段凑数。用户明确要求数量时按要求完成。
普通章节主片优先16:9；卡片素材优先3:4或4:5；动作必须看到完整对象关系时用合适宽画幅，再为卡片设计安全裁切。2K的实际宽高以工具支持的画幅为准，并检查返回文件；不能只看到任务名带2K就当作输出已核实。
建议场景片5–8秒、形象微动4–6秒、完整动作6–10秒，最终使用工具支持的档位。2K原片留存，网站可派生压缩版；清单同时记录原片与网站用片，不能把压缩版规格伪称原始生成规格。
### 6.4 每条H3任务必须有完整镜头提示词
将下列结构按实际素材填全，不把花括号原样提交：
```text
用途：本片用于网站第{章节}章，表达{该章唯一主题}。
主体：{具体人物/产品/环境}，身份及关键特征为{已核实特征}。
参考分工：{文件A}限定身份/产品；{文件B}限定场景；{文件C}限定全身比例或结构。
必须保持：{脸、衣服、结构、空间固定关系、颜色、Logo等}。
画面：{前景/中景/背景以及对象与环境关系}，完整展示{必需信息}。
动作：{一个清楚、可实现、受控的动作}，从{起始状态}到{结束状态}。
镜头：{景别}，{机位}，{低幅度推进/横移/固定}，运动连续且速度克制。
光线与材质：{统一品牌影像标准}。
构图：为网页{标题位置/人物卡裁切}保留空间，主体关键部分不出画。
时长与画幅：按本任务选定的真实工具档位，H3，2K，{比例}。
结尾：{适合自然循环的状态，或一次完整动作后自然停稳}。
排除：身份漂移、肢体畸变、结构变化、物体穿模、错误操作、随机文字/水印、突兀切镜。
```
在运动/器械行业还要写清楚握点、支撑点、关节轨迹及器械关系；产品片写清部件、材质、结构和真实操作；空间片写清哪些物体位置固定。不要用“高级、电影感、超真实”替代动作和空间描述。
### 6.5 提交、查询、落盘和检查
按真实工具能力提交任务，保留任务ID；使用工具规定的状态查询或等待方式，按限额控制并发。成功返回后下载真实文件到项目内，不能只保存会过期的URL。
检查首帧、中间、尾帧与动作关键帧，必要时完整播放。核对人物与产品一致性、空间稳定、动作、清晰度、实际宽高、时长和可解码性。不合格片重新生成或修复，不能靠换封面遮盖视频错误。
视频从自身成片提取海报，海报与选中视频一一对应。普通场景与形象微动可循环，完整动作优先单次播放并提供重播。不要把动作倒放来伪造循环。
记录字段至少包括：id、章节、用途、参考文件及用途、完整prompt、实际模型/分辨率参数、任务ID、状态、原片路径、网站用片路径、海报、实际宽高/时长、检查结果。不得保存账号密码或密钥到项目清单。
状态定义：planned为未生成，submitted为已提交，generated为文件已取得，verified为检查通过，integrated为页面入口实际接入。必须逐级依据事实更新。
## 7. 播放控制与交互，和滚动控制分开
video带id、data-auto-video、data-src、poster、data-loop、muted、playsinline、preload=none。初始使用真实海报，进入有效可见区后再赋src并播放，不一次性加载全站全部视频。
桌面最多同时播放3个、手机最多2个，按可见面积和优先级管理。建议22%可见面积阈值，并检查hidden、display、visibility、opacity和尺寸；aria-hidden不是视觉隐藏条件。离屏、后台或全局暂停时停止。
素材切换使用统一接口与data属性：
```html
<button type="button"
  data-video-target="scene-video-3"
  data-video-source="assets/videos/category-02.mp4"
  data-video-poster="assets/posters/category-02.jpg"
  data-video-loop="true"
  aria-pressed="false">由用户内容确定的分类名</button>
```
点击立即更新同一播放器的src、poster和loop，加载并在允许时播放；不要求再滚一下。标题、说明、选中态保持准确。每个分组只有一个选中项，切换不跳转到单独视频文件。
场景/形象片循环；动作片单次结束显示“重播视频”，从0开始。自动播放受阻显示“点击播放”；网络或解码失败保留海报并显示“重试播放”，重试清除失败状态并重新load。快速切换使用序号防止过期异步结果覆盖新状态。
全局暂停优先。暂停中切换可以更新媒体和封面但不能偷偷恢复；继续后仅可见媒体恢复。减少动态模式默认静态海报，允许手动播放时保留明确的手动状态，不能被下次可见性检测立刻暂停。
网站派生视频优先使用可解码MP4/H.264与faststart，按需压缩；原始H3 2K文件另存。不要把高码率母版全部塞进首屏。所有视频静音，不自动播放声音。
## 8. 手机与边界状态
统一断点800px，检查375/390px手机、768px平板、1440/1512px桌面及低高度横屏。
手机标题top:clamp(104px,13svh,150px)，字号clamp(30px,9vw,48px)，max-width:none；390px时约35.1px。短句按语义分行，仅短语is-short使用nowrap，长句正常换行。
普通说明区bottom6svh，padding12px，背景#1119、圆角8px。隐藏页头英文小口号，保留Logo与暂停按钮。
手机导航改底部横向居中条，bottom为12px加安全区，padding8px 12px，gap10px，半透明黑底、细边框、blur10px；隐藏标签，保留编号与6px小圆点。body预留底部空间与安全区，交互热区尽量至少44px，视觉符号保持精简。平台自动浮标不得覆盖导航和CTA。
卡片章取消sticky与固定高度，舞台relative、height:auto、overflow:visible、flex column、padding112px 20px 40px。标题order0、deck order1、文案order2。单列gap24px，卡片aspect-ratio3/4、min-height360px。每张卡独立滚动归位，空的背景占位不撑出间距。
手机联系卡padding26px 20px、gap14px；品牌组合图宽min(300px,84vw)且max-width100%；邀请标题clamp(17px,4.9vw,21px)，正文与联系信息13px、行高约1.7。
低高度桌面需要时让卡片章转自然流，确保标题、卡片、说明和CTA不叠压。不要用全局overflow:hidden掩盖被裁掉的内容。
减少动态时清除大幅transform/clip-path、关闭自动播放与sticky长行程；卡片章和联系章保持height:auto；无JS/GSAP失败也保留可读页面与原生锚点。
lang、页面title、description由实际内容生成；全页一个h1、后续h2；按钮type与aria-pressed准确；图片有合理alt；焦点可见；地址使用address并设置正常字形。直接进入任意chapter锚点及刷新后定位正确，浏览器前进后退可用。
## 9. 文件与实现方式
推荐结构：
```text
index.html
core/layout.css
core/scroll-effects.js
core/video-playback.js
core/bootstrap.js
vendor/gsap.min.js
vendor/ScrollTrigger.min.js
data/site-content.json
data/source-inventory.json
data/media-manifest.json
assets/originals/
assets/brand/
assets/references/
assets/video-masters/
assets/videos/
assets/posters/
README.md
```
使用框架时可调整目录，但保留内容数据、媒体任务、滚动控制、播放控制各自职责。用户上传的原始文件保存在originals，派生文件另存，不能覆盖源文件。
site-content.json至少包括：品牌、主题tokens、章节数组、每章标题短句/正文/CTA、layout、motion、媒体选项、重点卡片、联系信息。把文案与媒体映射集中保存，方便用户以后替换，不将一份事实复制到多个互相冲突的位置。
媒体字段为空时不渲染坏链接；不存在的视频不能生成字符串undefined；构建阶段应检查已接入资源存在。预览阶段可以明确标记未完成媒体，但访客成品不展示内部编号、生成工具、模型、任务状态和待补充字样。
附录提供UI与交互的通用代码起点，实际内容由上传资料填充。不要把示例标签或路径当作已经完成的用户内容。
## 10. 执行顺序与交付
1. 读取上传资料，列出已确认内容和关键缺口，建立内容与资产清单。
2. 按业务组织章节，确定实际视频数量、每条用途、切换入口和转化路径。
3. 建立统一场景/人物/产品基准，用少量样本确认质感；同时搭建页面骨架与滚动系统。
4. 真实调用H3 2K，按任务表制作需要新增的视频；等待期间继续UI与交互。
5. 检查成片、提取海报、生成网站派生版本、接入所有入口，更新状态。
6. 完成手机、减少动态、错误回退和浏览器检查，修复发现的问题。
7. 交付可运行预览、完整项目、原始及网站用素材、状态清单与简短说明。
先把比例、字级、留白、素材对应和滚动机制做对，再做装饰细节。不要因为代码能启动就停止，也不要在素材仍未生成时宣称成品已完成。
最终检查必须覆盖：
- 内容属于我的品牌；没有其他品牌名、虚构人物或未经提供的事实。
- 章节主题、文案、视频和CTA逐项对应；生成片确实使用H3 2K，实际文件规格已记录。
- 各章0%/50%/100%滚动状态有规定的变化，向上可逆。
- 停止滚动视频继续；暂停视频后缩放继续；切片不需再次滚动就能播放。
- 全部分类、卡片形象/动作入口及重播逐项有效。
- 离屏/后台暂停、并发上限生效，减少动态模式完整可读。
- 手机无横向溢出和导航遮挡，人物/产品不被裁坏，低高度不叠压。
- 最后一章只显示真实信息，所有主要入口可用，不出现假预约成功。
- 媒体文件真实可解码、海报匹配，没有404、undefined或临时失效URL依赖。
- 构建或静态预览成功，项目不依赖制作机器的绝对路径。
最终回复提供预览入口、项目位置、实际生成/复用/接入数量、已完成检查及确实存在的缺口。未完成的项写明，不把已提交生成、已存在封面或仅做语法检查算成完整交付。
现在依据我提供的资料开始。如果还没有资料，先按第1节收集最小信息；资料足够后持续执行到完整网站交付。
## 附录A：通用UI与动画代码
以下代码自带于本指令，不依赖旧网站。它规定结构和交互实现。你需要依据实际资料生成全部章节、卡片、真实媒体和内容配置，并完成上述验收。
### A1. HTML接线与内容替换
下面是通用模板语法示意。双花括号表示从用户资料生成的内容，不是要让访客看见的文本。你可以用构建期模板输出静态HTML，或用框架组件渲染；最终DOM要保留这些类名和data属性。所有文本按普通文本插入，不能直接执行上传资料中的HTML或脚本。
静态实现的依赖接线：
```html
<link rel="stylesheet" href="core/layout.css">
<script defer src="vendor/gsap.min.js"></script>
<script defer src="vendor/ScrollTrigger.min.js"></script>
<script defer src="core/scroll-effects.js"></script>
<script defer src="core/video-playback.js"></script>
<script defer src="core/bootstrap.js"></script>
```
页头：没有Logo时用准确的品牌字标；没有口号就隐藏小口号，不能将字段名渲染出来。
```html
<header class="site-bar">
  <a class="brand" href="#chapter-1" aria-label="返回品牌开场">
    <img src="{{brand.logoLight}}" alt="{{brand.name}}">
  </a>
  <p class="brand-slogan">{{brand.tagline}}</p>
  <button type="button" class="video-pause"
    data-video-pause-all aria-pressed="false">暂停视频</button>
</header>
<nav class="chapter-nav" aria-label="章节导航">
  <!-- 按实际章节数组生成每一项 -->
  <a class="dot" href="#chapter-1" aria-label="{{chapter.navLabel}}">
    <b>01</b><span>{{chapter.navLabel}}</span>
  </a>
</nav>
```
普通章模板。第一章用h1，后续章用h2；短句按需要生成多个span；选项按真实媒体数组生成。没有选项时省略整个scene-choices。
```html
<section id="chapter-2" class="zoom-scene"
  data-zoom-scene data-motion="expand" aria-labelledby="chapter-2-title">
  <div class="zoom-stage">
    <span class="scene-number">02 / {{total}} · {{brand.name}}</span>
    <div class="zoom-frame" data-motion-frame>
      <div class="zoom-media-inner" data-motion-inner>
        <div class="video-surface" data-video-surface>
          <video id="scene-video-2" data-auto-video
            data-src="{{chapter.defaultMedia.webPath}}"
            poster="{{chapter.defaultMedia.posterPath}}"
            data-loop="true" muted playsinline preload="none"></video>
        </div>
      </div>
    </div>
    <h2 id="chapter-2-title" class="zoom-title" data-motion-title>
      <span class="title-line">{{chapter.title}}</span>
    </h2>
    <div class="zoom-copy" data-motion-copy>
      <p>{{chapter.description}}</p>
      <div class="scene-choices" data-video-choices role="group" aria-label="切换本章画面">
        <button type="button" data-video-target="scene-video-2"
          data-video-source="{{option.webPath}}"
          data-video-poster="{{option.posterPath}}"
          data-video-loop="true" aria-pressed="true">{{option.label}}</button>
      </div>
      <a class="cta" href="{{chapter.cta.href}}">{{chapter.cta.label}}</a>
    </div>
  </div>
</section>
```
重点卡片章。CSS类名coach沿用于通用对象卡片，不在访客文案里出现。按实际资料生成2–3张或合理数量的卡片，每张有独立playerId。
```html
<section id="chapter-5" class="zoom-scene"
  data-zoom-scene data-motion="coaches" aria-labelledby="chapter-5-title">
  <div class="zoom-stage">
    <span class="scene-number">05 / {{total}} · {{brand.name}}</span>
    <div class="zoom-frame" data-motion-frame aria-hidden="true"></div>
    <h2 id="chapter-5-title" class="zoom-title" data-motion-title>{{chapter.title}}</h2>
    <div class="coach-deck">
      <!-- 对每个真实对象重复卡片，并生成唯一视频ID -->
      <article class="coach-card video-surface" data-motion-card data-video-surface>
        <video id="feature-01-video" data-auto-video
          data-src="{{card.profile.webPath}}" poster="{{card.profile.posterPath}}"
          data-loop="true" muted playsinline preload="none"></video>
        <strong>{{card.name}}</strong>
        <div class="coach-actions" data-video-choices>
          <button type="button" data-video-target="feature-01-video"
            data-video-source="{{card.action.webPath}}"
            data-video-poster="{{card.action.posterPath}}"
            data-video-loop="false" aria-pressed="false">{{card.actionLabel}}</button>
        </div>
      </article>
    </div>
    <div class="zoom-copy" data-motion-copy>
      <p>{{chapter.description}}</p>
      <a class="cta" href="{{chapter.cta.href}}">{{chapter.cta.label}}</a>
    </div>
  </div>
</section>
```
联系章模板。contact-left/contact-right只是样式容器，最终是居中单列。无对应字段时删除节点，不保留空占位。
```html
<section id="chapter-8" class="zoom-scene"
  data-zoom-scene data-motion="footer" aria-labelledby="chapter-8-title">
  <div class="zoom-stage">
    <div class="zoom-frame" data-motion-frame>
      <div class="contact-panel">
        <div class="contact-left">
          <span class="scene-number">08 / {{total}} · {{brand.name}}</span>
          <h2 id="chapter-8-title" class="contact-title" data-motion-title>
            <img class="contact-lockup" src="{{brand.lockupDark}}" alt="{{brand.name}}">
          </h2>
          <p class="contact-headline">{{contact.headline}}</p>
          <p class="contact-body" data-motion-copy>{{contact.description}}</p>
        </div>
        <div class="contact-right">
          <address class="contact-address">
            <span class="contact-address-label">{{contact.primaryLabel}}</span>
            <p>{{contact.primaryValue}}</p>
          </address>
          <div class="contact-actions">
            <a class="cta" href="{{contact.cta.href}}">{{contact.cta.label}}</a>
          </div>
        </div>
        <!-- 只有确有必要时才生成简短说明 -->
        <p class="contact-note">{{contact.note}}</p>
      </div>
    </div>
  </div>
</section>
```
需要平滑跳到联系章的入口同时加`data-scroll-to-end="实际联系章id"`与正常href；其他锚点保持原生导航。章节数量变化时同步改ID、编号、导航与所有CTA，不机械保留chapter-8。
以下CSS和JS各保存为对应文件。CSS里默认三列卡片；真实卡片数量不是三张时按实际数量调整grid，手机仍单列。品牌色通过tokens替换，主要比例和动效保持。
### layout.css
```css
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
:root { --page-bg: #101214; --panel-bg: #f6f5f1; --ink: #16191b; --text: #fff; }
body { margin: 0; opacity: 1; background: var(--page-bg); color: #fff; font-family: Arial, "PingFang SC", sans-serif; }
.zoom-scene { position: relative; min-height: 100svh; isolation: isolate; }
.zoom-stage { position: relative; min-height: 100svh; height: auto; pointer-events: auto; }
.zoom-enhanced .zoom-scene { min-height: 180svh; }
.zoom-enhanced .zoom-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.zoom-frame { position: absolute; inset: 0; overflow: hidden; transform-origin: 50% 50%; background: #171a1e; }
.zoom-media-inner { width: 100%; height: 100%; transform-origin: center; }
.video-surface { position: relative; width: 100%; height: 100%; overflow: hidden; }
.video-surface video { display: block; width: 100%; height: 100%; object-fit: cover; }
.zoom-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg,rgba(0,0,0,.3),transparent 40%,rgba(0,0,0,.48)); }
.zoom-title { position: absolute; z-index: 2; top: clamp(112px, 12.5svh, 170px); left: 6vw; right: 6vw; max-width: 13em; margin: 0; font-size: clamp(34px,6vw,86px); line-height: 1.08; transform-origin: left top; }
.zoom-copy { position: absolute; z-index: 2; left: 6vw; right: 6vw; bottom: 5svh; max-width: 46em; font-size: clamp(15px,1.4vw,20px); line-height: 1.6; }
.zoom-copy a { display: inline-block; margin-top: 12px; padding: 10px 18px; color: #111; background: #fff; text-decoration: none; }
.scene-number { position: absolute; z-index: 4; top: 24px; left: 6vw; font-size: 12px; letter-spacing: .1em; }
.video-play-fallback { position: absolute; z-index: 10; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 12px 18px; border: 1px solid white; border-radius: 4px; color: white; background: #111d; cursor: pointer; }
.video-play-fallback[hidden] { display: none; }
.coach-deck { position: absolute; inset: clamp(232px, 26svh, 320px) 6vw 12svh; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.coach-card { position: relative; min-height: 0; overflow: hidden; border-radius: 14px; background: #20262c; }
.coach-card video { width: 100%; height: 100%; object-fit: cover; }
.coach-card strong { position: absolute; z-index: 3; left: 16px; bottom: 18px; font-size: 28px; text-shadow: 0 2px 10px #000; }
.zoom-enhanced .zoom-scene[data-motion="footer"] { min-height: 100svh; }
.zoom-scene[data-motion="footer"] .zoom-stage { position: relative; height: auto; min-height: 100svh; overflow: visible; display: grid; place-items: center; padding: 90px 6vw; }
.contact-panel { position: relative; inset: auto; width: min(1100px,100%); padding: clamp(24px,5vw,70px); border-radius: 16px; background: var(--panel-bg); color: #16191b; }
.contact-panel h2 { font-size: clamp(30px,4vw,58px); margin: 0 0 24px; }
.contact-panel a { color: inherit; }
@media (max-width: 799px) {
  .zoom-enhanced .zoom-scene { min-height: 155svh; }
  .zoom-title { top: clamp(104px, 13svh, 150px); font-size: clamp(30px,9vw,48px); }
  .zoom-title .title-line { display: block; white-space: nowrap; }
  .zoom-copy { bottom: 6svh; padding: 12px; background: #1119; border-radius: 8px; }
  .coach-deck { inset: 25svh 5vw 17svh; gap: 8px; }
  .coach-card strong { left: 8px; bottom: 12px; font-size: 18px; }
  .zoom-enhanced .zoom-scene[data-motion="coaches"] { min-height: auto; }
  .zoom-scene[data-motion="coaches"] .zoom-stage { position: relative; height: auto; overflow: visible; display: flex; flex-direction: column; gap: 24px; padding: 112px 20px 40px; }
  .zoom-scene[data-motion="coaches"] .zoom-title { position: relative; inset: auto; order: 0; }
  .zoom-scene[data-motion="coaches"] .zoom-frame { position: relative; inset: auto; order: 1; overflow: visible; background: none; }
  .zoom-scene[data-motion="coaches"] .coach-deck { position: relative; inset: auto; grid-template-columns: minmax(0,1fr); gap: 24px; }
  .zoom-scene[data-motion="coaches"] .coach-card { aspect-ratio: 3 / 4; min-height: 360px; }
  .zoom-scene[data-motion="coaches"] .zoom-copy { position: relative; inset: auto; order: 2; background: none; }
}
@media (prefers-reduced-motion: reduce) {
  .zoom-enhanced .zoom-scene { min-height: 100svh; }
  .zoom-enhanced .zoom-stage { position: relative; height: 100svh; }
}
body {
  font-family: 'Manrope', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  background: var(--page-bg);
}
.site-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px clamp(16px, 3vw, 40px);
  background: linear-gradient(180deg, rgba(10, 12, 14, .86), rgba(10, 12, 14, 0));
  pointer-events: none;
}
.site-bar > * { pointer-events: auto; }
.brand { display: flex; align-items: center; }
.brand img { display: block; height: 20px; width: auto; }
.brand-slogan {
  margin: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .62);
}
.video-pause {
  margin-left: auto;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .38);
  background: rgba(12, 14, 16, .5);
  color: #fff;
  font-size: 12px;
  letter-spacing: .04em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background .25s ease, border-color .25s ease;
}
.video-pause:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
.video-pause[aria-pressed='true'] { background: #fff; color: #111; border-color: #fff; }
.chapter-nav {
  position: fixed;
  right: clamp(8px, 1.4vw, 22px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.chapter-nav .dot {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .5);
  text-decoration: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .12em;
}
.chapter-nav .dot b { font-weight: 500; }
.chapter-nav .dot span { opacity: 0; transform: translateX(6px); transition: opacity .25s ease, transform .25s ease; white-space: nowrap; }
.chapter-nav .dot:hover span,
.chapter-nav .dot:focus-visible span { opacity: 1; transform: none; }
.chapter-nav .dot::after { content: ''; width: 14px; height: 1px; background: currentColor; transition: width .25s ease; }
.chapter-nav .dot:hover::after { width: 28px; }
.scene-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.scene-choices button,
.coach-actions button {
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(10, 12, 14, .5);
  color: rgba(255, 255, 255, .8);
  font-size: 12px;
  letter-spacing: .04em;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.scene-choices button:hover,
.coach-actions button:hover { color: #fff; border-color: #fff; }
.scene-choices button[aria-pressed='true'],
.coach-actions button[aria-pressed='true'] { background: #fff; color: #111; border-color: #fff; }
.cta {
  display: inline-block;
  margin-top: 14px;
  padding: 11px 19px;
  background: #fff;
  color: #111;
  text-decoration: none;
  font-size: 13px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .28); }
.coach-actions { position: absolute; z-index: 4; top: 12px; right: 12px; left: auto; bottom: auto; }
.coach-actions button { padding: 6px 10px; font-size: 11px; }
.zoom-scene[data-motion='coaches'] .coach-card strong { font-size: clamp(20px, 2vw, 30px); }
.scene-note { margin: 10px 0 0; font-size: 12px; color: rgba(255, 255, 255, .6); }
.zoom-scene[data-motion='footer'] .contact-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(14px, 1.8vw, 22px);
  width: min(980px, 100%);
  margin: 0 auto;
  padding: clamp(32px, 4.5vw, 64px) clamp(24px, 5vw, 70px);
}
.contact-left { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.contact-right { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.contact-address { width: min(620px, 100%); text-align: center; color: rgba(5, 5, 6, .68); }
.contact-address-label { display: block; margin-bottom: 6px; color: rgba(5, 5, 6, .5); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .14em; }
.contact-address p { margin: 0; font-size: clamp(14px, 1.1vw, 16px); line-height: 1.8; overflow-wrap: anywhere; }
.contact-list { width: min(520px, 100%); }
.contact-actions { justify-content: center; }
.contact-note { text-align: center; justify-self: center; width: 100%; }
.contact-lockup { display: block; width: min(520px, 100%); height: auto; margin: 4px 0 10px; }
.contact-panel .scene-number { position: static; display: block; margin: 0; color: rgba(5, 5, 6, .5); }
.contact-title { margin: 0; font-size: 1px; line-height: 1; font-weight: 500; }
.contact-headline { margin: 0; font-size: clamp(20px, 1.8vw, 27px); font-weight: 500; letter-spacing: -.01em; color: #050506; }
.contact-:root { --page-bg: #101214; --panel-bg: #f6f5f1; --ink: #16191b; --text: #fff; }
body { margin: 0; max-width: 46ch; color: rgba(5, 5, 6, .68); font-size: clamp(14px, 1.1vw, 16px); line-height: 1.8; }
.contact-list { display: flex; flex-direction: column; border-top: 1px solid rgba(5, 5, 6, .18); }
.contact-row { display: flex; justify-content: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(5, 5, 6, .14); font-size: 14px; }
.contact-row span { color: rgba(5, 5, 6, .5); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .14em; }
.contact-row b { font-weight: 500; }
.contact-actions { display: flex; gap: 10px; }
.contact-qr { width: clamp(130px, 14vw, 170px); height: auto; border: 1px solid rgba(5, 5, 6, .16); background: #fff; }
.contact-note { grid-column: 1 / -1; margin: 0; padding-top: 14px; border-top: 1px solid rgba(5, 5, 6, .16); font-size: 11px; color: rgba(5, 5, 6, .5); }
.zoom-scene[data-motion='footer'] .zoom-copy a,
.zoom-scene[data-motion='footer'] .contact-panel .cta { margin-top: 0; }
.site-foot {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: space-between;
  padding: 22px clamp(20px, 6vw, 90px);
  background: #0b0d0f;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .48);
}
.foot-note { color: rgba(255, 255, 255, .38); }
@media (max-width: 799px) {
  .brand-slogan { display: none; }
  .video-pause { padding: 7px 11px; font-size: 11px; }
  .chapter-nav {
    top: auto;
    bottom: 12px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    flex-direction: row;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(8, 10, 12, .62);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(10px);
  }
  .chapter-nav .dot span { display: none; }
  .chapter-nav .dot::after { width: 6px; height: 6px; border-radius: 50%; }
  .chapter-nav .dot:hover::after { width: 6px; height: 6px; }
  .scene-choices { gap: 6px; }
  .scene-choices button { padding: 7px 10px; font-size: 11px; }
  .contact-panel { grid-template-columns: minmax(0, 1fr); }
  .contact-logo { width: 120px; }
  .site-foot { flex-direction: column; gap: 6px; }
  body { padding-bottom: 58px; }
}
@media (max-width: 799px) {
  .zoom-title .title-line { white-space: normal; }
  .zoom-title .title-line.is-short { white-space: nowrap; }
  .zoom-title { max-width: none; }
}
@media (min-width: 800px) {
  .zoom-scene[data-motion='coaches'] .coach-deck { inset: clamp(232px, 26svh, 320px) 6vw 21svh; }
  .zoom-scene[data-motion='coaches'] .zoom-copy {
    left: 6vw;
    right: 6vw;
    bottom: 4svh;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    max-width: none;
  }
  .zoom-scene[data-motion='coaches'] .zoom-copy p { margin: 0; }
  .zoom-scene[data-motion='coaches'] .zoom-copy .scene-note { margin: 0; }
  .zoom-scene[data-motion='coaches'] .zoom-copy .cta { margin-top: 0; }
}
.zoom-scene[data-motion='footer'] .zoom-frame {
  position: relative;
  inset: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0e1012;
  transform-origin: 50% 50%;
}
.zoom-scene[data-motion='footer'] .zoom-frame::after { display: none; }
.zoom-scene[data-motion='footer'] .contact-panel { width: min(1100px, 100%); margin: 0 auto; }
.zoom-stage > .scene-number { top: 68px; }
.contact-panel .scene-number { top: 0; }
@media (max-width: 799px) {
  .zoom-stage > .scene-number { top: 64px; }
}
@media (max-width: 799px) {
  .contact-lockup { width: min(260px, 78vw); margin-bottom: 16px; }
  .contact-headline { font-size: clamp(18px, 5.4vw, 24px); }
}
@media (max-width: 799px) {
  .zoom-scene[data-motion='footer'] .contact-panel { padding: 26px 20px; gap: 14px; }
  .contact-lockup { width: min(300px, 84vw); }
  .contact-headline { font-size: clamp(17px, 4.9vw, 21px); }
  .contact-body { font-size: 13px; }
  .contact-address p { font-size: 13px; line-height: 1.7; }
}
.zoom-scene[data-motion='footer'] .contact-lockup { margin-left: auto; margin-right: auto; }
.zoom-scene[data-motion='footer'] .contact-headline,
.zoom-scene[data-motion='footer'] .contact-body { margin-left: auto; margin-right: auto; }
.zoom-scene[data-motion='footer'] .contact-note { margin-left: auto; margin-right: auto; }
.chapter-nav .dot { position: relative; min-height: 22px; }
.chapter-nav .dot span { position: absolute; right: calc(100% + 12px); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
address { font-style: normal; }
.zoom-scene[data-motion="footer"] .zoom-frame { width: 100%; }
.contact-lockup { max-width: 100%; }
.coach-deck { z-index: 2; }
@media (max-width: 799px) {
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  .chapter-nav { bottom: calc(12px + env(safe-area-inset-bottom)); max-width: calc(100vw - 24px); gap: 6px; }
  .chapter-nav .dot { min-height: 28px; }
  .chapter-nav .dot::before { content: ""; position: absolute; inset: -8px -3px; }
  .zoom-scene[data-motion="coaches"] .zoom-frame { display: none; }
  .zoom-scene[data-motion="coaches"] .coach-deck { order: 1; width: 100%; }
}
@media (min-width: 800px) and (max-height: 650px) {
  .zoom-enhanced .zoom-scene[data-motion="coaches"] { min-height: auto; }
  .zoom-scene[data-motion="coaches"] .zoom-stage {
    position: relative; height: auto; overflow: visible; display: flex;
    flex-direction: column; gap: 28px; padding: 112px 6vw 56px;
  }
  .zoom-scene[data-motion="coaches"] .zoom-title,
  .zoom-scene[data-motion="coaches"] .coach-deck,
  .zoom-scene[data-motion="coaches"] .zoom-copy { position: relative; inset: auto; }
  .zoom-scene[data-motion="coaches"] .zoom-frame { display: none; }
  .zoom-scene[data-motion="coaches"] .coach-card { min-height: 300px; aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .zoom-enhanced .zoom-stage { position: relative; min-height: 100svh; height: auto; overflow: visible; }
  .zoom-scene:not([data-motion="footer"]) .zoom-stage {
    display: flex; flex-direction: column; gap: 24px; padding: 112px 6vw 64px;
  }
  .zoom-scene:not([data-motion="footer"]) .zoom-title,
  .zoom-scene:not([data-motion="footer"]) .zoom-copy {
    position: relative; inset: auto; opacity: 1; transform: none;
  }
  .zoom-scene:not([data-motion="footer"]) .zoom-copy { margin-top: auto; }
  .zoom-scene[data-motion="coaches"] .zoom-frame { display: none; }
  .zoom-scene[data-motion="coaches"] .coach-deck { position: relative; inset: auto; }
  .zoom-scene[data-motion="coaches"] .coach-card { aspect-ratio: 3 / 4; min-height: 300px; }
  .zoom-scene[data-motion="footer"] .zoom-stage { height: auto; overflow: visible; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
```
### scroll-effects.js
```js
(function () {
  'use strict';
  let mediaContext = null;
  let rootElement = null;
  let layoutObserver = null;
  let refreshFrame = 0;
  function refresh() {
    if (refreshFrame) return;
    refreshFrame = requestAnimationFrame(function () {
      refreshFrame = 0;
      if (window.ScrollTrigger) window.ScrollTrigger.refresh();
    });
  }
  function destroy() {
    mediaContext?.revert();
    mediaContext = null;
    layoutObserver?.disconnect();
    layoutObserver = null;
    window.removeEventListener('resize', refresh);
    document.removeEventListener('toggle', refresh, true);
    if (refreshFrame) cancelAnimationFrame(refreshFrame);
    refreshFrame = 0;
    if (rootElement) rootElement.classList.remove('zoom-enhanced');
  }
  function init(root) {
    destroy();
    rootElement = root && root.nodeType !== 9 ? root : document.documentElement;
    const gsap = window.gsap;
    const ScrollTrigger = window.ScrollTrigger;
    if (!gsap || !ScrollTrigger) {
      console.warn('[SiteMotion] GSAP/ScrollTrigger unavailable; keeping ordinary readable layout.');
      return;
    }
    gsap.registerPlugin(ScrollTrigger);
    rootElement.classList.add('zoom-enhanced');
    mediaContext = gsap.matchMedia();
    mediaContext.add({
      desktop: '(min-width: 800px)',
      mobile: '(max-width: 799px)',
      compact: '(max-height: 650px)',
      reduced: '(prefers-reduced-motion: reduce)',
    }, function (context) {
      const mobile = context.conditions.mobile;
      const reduced = context.conditions.reduced;
      const scenes = rootElement.querySelectorAll('[data-zoom-scene]');
      scenes.forEach(function (scene) {
        const frame = scene.querySelector('[data-motion-frame]');
        const inner = scene.querySelector('[data-motion-inner]');
        const title = scene.querySelector('[data-motion-title]');
        const copy = scene.querySelector('[data-motion-copy]');
        const cards = scene.querySelectorAll('[data-motion-card]');
        const mode = scene.dataset.motion || 'expand';
        if (!frame) return;
        if (reduced) {
          gsap.set([frame, inner, title, copy, ...cards].filter(Boolean),
            { clearProps: 'transform,opacity,visibility,clipPath,borderRadius' });
          return;
        }
        if (mode === 'coaches' && (mobile || context.conditions.compact)) {
          cards.forEach(function (card) {
            gsap.fromTo(card, { scale: 0.92, y: 24 }, {
              scale: 1, y: 0, ease: 'none',
              scrollTrigger: { trigger: card, start: 'top 90%', end: 'top 40%', scrub: true, invalidateOnRefresh: true },
            });
          });
          return;
        }
        const tl = gsap.timeline({
          defaults: { ease: 'none' },
          scrollTrigger: {
            trigger: scene,
            start: mode === 'footer' ? 'top 95%' : 'top top',
            end: mode === 'footer' ? 'top 35%' : 'bottom bottom',
            scrub: true,
            invalidateOnRefresh: true,
          },
        });
        const insetScale = mobile ? 0.88 : 0.68;
        if (mode === 'shrink') {
          tl.fromTo(frame, { scale: 1, borderRadius: 0 },
            { scale: insetScale, borderRadius: mobile ? 14 : 22, duration: 0.85 }, 0);
          if (title) tl.fromTo(title, { scale: 1 }, { scale: mobile ? 0.82 : 0.58, duration: 0.7 }, 0);
        } else if (mode === 'reveal') {
          tl.fromTo(frame, { clipPath: mobile ? 'inset(0% 20% 0% 20%)' : 'inset(0% 43% 0% 43%)', rotate: mobile ? 0 : -5 },
            { clipPath: 'inset(0% 0% 0% 0%)', rotate: 0, duration: 0.85 }, 0);
        } else if (mode === 'focus') {
          if (inner) tl.fromTo(inner, { scale: mobile ? 1.1 : 1.22 }, { scale: 1, duration: 1 }, 0);
        } else if (mode === 'coaches') {
          gsap.set(cards, { scale: 0.85, y: 40 });
          tl.to(cards, { scale: 1, y: 0, stagger: 0.12, duration: 0.65 }, 0);
        } else if (mode === 'footer') {
          tl.fromTo(frame, { scale: 0.96, y: 24, opacity: 0.45 },
            { scale: 1, y: 0, opacity: 1, duration: 1 }, 0);
        } else {
          tl.fromTo(frame, { scale: insetScale, borderRadius: mobile ? 14 : 22 },
            { scale: 1, borderRadius: 0, duration: 0.85 }, 0);
          if (title) tl.fromTo(title, { y: 24, opacity: 0.65 }, { y: 0, opacity: 1, duration: 0.5 }, 0.15);
        }
        if (copy && mode !== 'footer') {
          tl.fromTo(copy, { y: 24, opacity: 0.35 }, { y: 0, opacity: 1, duration: 0.5 }, 0.45);
        }
      });
    });
    window.addEventListener('resize', refresh, { passive: true });
    document.addEventListener('toggle', refresh, true);
    document.fonts?.ready.then(refresh);
    if ('ResizeObserver' in window) {
      layoutObserver = new ResizeObserver(refresh);
      layoutObserver.observe(document.body);
    }
    refresh();
  }
  window.SiteMotion = { init: init, refresh: refresh, destroy: destroy };
})();
```
### video-playback.js
```js
(function () {
  'use strict';
  const records = new Map();
  const reduced = matchMedia('(prefers-reduced-motion: reduce)');
  let root = document, observer = null, mutations = null;
  let raf = 0, pausedAll = false, destroyed = true;
  function validURL(value) {
    if (typeof value !== 'string' || !value.trim()) return null;
    try {
      const url = new URL(value.trim(), document.baseURI);
      if (!['http:', 'https:', 'file:', 'blob:'].includes(url.protocol)) return null;
      if (/(^|\/)(undefined|null)(\/|$)/i.test(url.pathname)) return null;
      return url.href;
    } catch { return null; }
  }
  function show(rec, state) {
    rec.state = state;
    rec.video.dataset.playbackState = state;
    const labels = { blocked: '点击播放', ended: '重播视频', error: '重试播放', reduced: '播放视频' };
    const label = labels[state] || '';
    if (rec.button.textContent !== label) rec.button.textContent = label;
    if (rec.button.hidden !== !label) rec.button.hidden = !label;
  }
  function visibleScore(rec) {
    const video = rec.video;
    if (!video.isConnected || video.closest('[hidden],[data-media-selected="false"]')) return 0;
    let opacity = 1;
    for (let el = video; el && el !== document.documentElement; el = el.parentElement) {
      const style = getComputedStyle(el);
      if (style.display === 'none' || style.visibility === 'hidden') return 0;
      opacity *= Number(style.opacity);
    }
    if (opacity < .05) return 0;
    const b = video.getBoundingClientRect();
    if (b.width <= 0 || b.height <= 0) return 0;
    const w = Math.max(0, Math.min(innerWidth, b.right) - Math.max(0, b.left));
    const h = Math.max(0, Math.min(innerHeight, b.bottom) - Math.max(0, b.top));
    const fraction = w * h / (b.width * b.height);
    if (fraction < .22) return 0;
    return fraction + Number(video.dataset.videoPriority || 0) * 10;
  }
  function ensureSource(rec) {
    if (rec.assigned) return true;
    const url = validURL(rec.video.dataset.src || rec.video.getAttribute('src'));
    if (!url) { rec.failed = true; show(rec, 'error'); return false; }
    rec.assigned = true;
    rec.video.src = url;
    rec.video.load();
    return true;
  }
  function pause(rec) {
    rec.wanted = false;
    rec.sequence += 1;
    rec.pending = false;
    rec.video.pause();
  }
  function play(rec) {
    if (destroyed || rec.failed || rec.blocked || rec.ended) return;
    if (!ensureSource(rec)) return;
    rec.wanted = true;
    if (rec.pending || !rec.video.paused) return;
    const sequence = ++rec.sequence;
    rec.pending = true;
    show(rec, 'loading');
    let result;
    try { result = rec.video.play(); } catch (error) { result = Promise.reject(error); }
    Promise.resolve(result).then(function () {
      if (destroyed || sequence !== rec.sequence) return;
      rec.pending = false;
      if (!rec.wanted) { rec.video.pause(); return; }
      show(rec, 'playing');
    }).catch(function (error) {
      if (destroyed || sequence !== rec.sequence) return;
      rec.pending = false;
      if (error?.name === 'AbortError') { show(rec, 'idle'); return; }
      rec.blocked = error?.name === 'NotAllowedError';
      rec.failed = !rec.blocked;
      show(rec, rec.blocked ? 'blocked' : 'error');
    });
  }
  function update() {
    raf = 0;
    if (destroyed) return;
    const candidates = [];
    records.forEach(function (rec) {
      const score = visibleScore(rec);
      if (!score) rec.manual = false;
      if (score && !rec.failed && !rec.blocked && !rec.ended && (!reduced.matches || rec.manual)) {
        candidates.push({ rec, score });
      } else if (score && reduced.matches && !rec.manual && !rec.failed && !rec.blocked && !rec.ended) {
        show(rec, 'reduced');
      }
    });
    candidates.sort((a, b) => b.score - a.score);
    const selected = pausedAll || document.hidden ? [] : candidates.slice(0, innerWidth < 800 ? 2 : 3);
    const active = new Set(selected.map(item => item.rec));
    records.forEach(function (rec) {
      if (active.has(rec)) play(rec);
      else if (!rec.video.paused || rec.pending) pause(rec);
    });
  }
  function schedule() {
    if (!destroyed && !raf) raf = requestAnimationFrame(update);
  }
  function manualPlay(rec) {
    if (pausedAll || document.hidden || !visibleScore(rec)) return;
    const ended = rec.ended || rec.video.ended;
    const failed = rec.failed;
    pause(rec);
    rec.manual = true;
    rec.failed = rec.blocked = rec.ended = false;
    if (failed) rec.assigned = false;
    if (!ensureSource(rec)) return;
    if (ended) { try { rec.video.currentTime = 0; } catch {} }
    // 在用户点击调用链内启动，保留浏览器手势授权。
    play(rec);
    schedule();
  }
  function register(video) {
    if (records.has(video)) return;
    video.muted = true;
    video.playsInline = true;
    video.autoplay = false;
    video.loop = video.dataset.loop !== 'false';
    video.preload = 'none';
    const shell = video.closest('[data-video-surface]') || video.parentElement;
    const button = document.createElement('button');
    button.type = 'button';
    button.className = 'video-play-fallback';
    button.hidden = true;
    shell.appendChild(button);
    const rec = { video, button, assigned: false, sequence: 0, pending: false,
      wanted: false, failed: false, blocked: false, ended: false, manual: false, events: [] };
    function on(event, fn) { video.addEventListener(event, fn); rec.events.push([event, fn]); }
    on('loadeddata', function () { video.dataset.videoReady = 'true'; schedule(); });
    on('playing', function () { show(rec, 'playing'); });
    on('error', function () { rec.failed = true; show(rec, 'error'); });
    on('ended', function () {
      if (!video.loop) { rec.ended = true; show(rec, 'ended'); schedule(); }
    });
    rec.click = () => manualPlay(rec);
    button.addEventListener('click', rec.click);
    records.set(video, rec);
    observer?.observe(video);
    if (reduced.matches) show(rec, 'reduced');
  }
  function remove(rec) {
    pause(rec);
    observer?.unobserve(rec.video);
    rec.events.forEach(([event, fn]) => rec.video.removeEventListener(event, fn));
    rec.button.removeEventListener('click', rec.click);
    rec.button.remove();
    records.delete(rec.video);
  }
  function discover() {
    root.querySelectorAll('video[data-auto-video]').forEach(register);
    records.forEach(rec => { if (!rec.video.isConnected) remove(rec); });
    schedule();
  }
  function destroy() {
    destroyed = true;
    cancelAnimationFrame(raf); raf = 0;
    mutations?.disconnect(); observer?.disconnect();
    records.forEach(remove);
    window.removeEventListener('scroll', schedule);
    window.removeEventListener('resize', schedule);
    document.removeEventListener('visibilitychange', schedule);
    reduced.removeEventListener('change', schedule);
  }
  function init(container = document) {
    destroy(); root = container; pausedAll = false; destroyed = false;
    observer = new IntersectionObserver(schedule, { threshold: [0, .22, .5, .8, 1] });
    discover();
    mutations = new MutationObserver(discover);
    mutations.observe(root === document ? document.body : root, {
      childList: true, subtree: true, attributes: true,
      attributeFilter: ['hidden', 'data-media-selected']
    });
    window.addEventListener('scroll', schedule, { passive: true });
    window.addEventListener('resize', schedule, { passive: true });
    document.addEventListener('visibilitychange', schedule);
    reduced.addEventListener('change', schedule);
  }
  function setSource(video, source) {
    const rec = records.get(video);
    const url = validURL(source.src);
    if (!rec || !url) throw new Error('播放器或媒体路径无效');
    pause(rec);
    rec.failed = rec.blocked = rec.ended = rec.assigned = false;
    rec.manual = false;
    delete video.dataset.videoReady;
    video.dataset.src = url;
    video.poster = source.poster || '';
    video.loop = source.loop !== false;
    video.dataset.loop = String(video.loop);
    show(rec, reduced.matches ? 'reduced' : 'idle');
    // 全局暂停时清掉旧片，保持新封面；继续后再加载。
    video.removeAttribute('src'); video.load();
    if (!pausedAll && !document.hidden && visibleScore(rec) && !reduced.matches) play(rec);
    schedule();
  }
  window.SiteMedia = {
    init, destroy, refresh: discover, setSource,
    setPaused(value) {
      pausedAll = Boolean(value);
      if (pausedAll) records.forEach(pause);
      schedule();
    }
  };
})();
```
### bootstrap.js
```js
(function () {
  'use strict';
  let cleanup = null;
  function init() {
    cleanup?.();
    window.SiteMotion?.init();
    window.SiteMedia?.init();
    const reduced = matchMedia('(prefers-reduced-motion: reduce)');
    const toggle = document.querySelector('[data-video-pause-all]');
    let paused = false, closed = false, hashFrame = 0;
    function togglePause() {
      paused = !paused;
      window.SiteMedia?.setPaused(paused);
      toggle?.setAttribute('aria-pressed', String(paused));
      if (toggle) toggle.textContent = paused ? '继续视频' : '暂停视频';
    }
    function alignHash() {
      cancelAnimationFrame(hashFrame);
      if (closed || !location.hash) return;
      let id = '';
      try { id = decodeURIComponent(location.hash.slice(1)); } catch { return; }
      const target = document.getElementById(id);
      if (!target) return;
      hashFrame = requestAnimationFrame(() => {
        hashFrame = requestAnimationFrame(() => {
          if (!closed) target.scrollIntoView({ block: 'start', behavior: 'auto' });
        });
      });
    }
    function click(event) {
      const element = event.target instanceof Element ? event.target : null;
      const button = element?.closest('[data-video-source]');
      if (button) {
        const video = document.getElementById(button.dataset.videoTarget || '');
        if (!video || !window.SiteMedia) return;
        try {
          window.SiteMedia.setSource(video, {
            src: button.dataset.videoSource,
            poster: button.dataset.videoPoster,
            loop: button.dataset.videoLoop !== 'false'
          });
          button.closest('[data-video-choices]')?.querySelectorAll('[data-video-source]').forEach(item => {
            item.setAttribute('aria-pressed', String(item === button));
          });
        } catch (error) { console.warn(error.message); }
        return;
      }
      const link = element?.closest('[data-scroll-to-end]');
      if (!link || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return;
      const target = document.getElementById(link.dataset.scrollToEnd || '');
      if (!target) return;
      event.preventDefault();
      target.scrollIntoView({ behavior: reduced.matches ? 'auto' : 'smooth', block: 'start' });
      if (location.hash !== '#' + target.id) history.pushState(null, '', '#' + target.id);
    }
    if (toggle) {
      toggle.textContent = '暂停视频';
      toggle.setAttribute('aria-pressed', 'false');
      toggle.addEventListener('click', togglePause);
    }
    document.addEventListener('click', click);
    window.addEventListener('hashchange', alignHash);
    window.addEventListener('popstate', alignHash);
    alignHash();
    // 用户开始浏览后不因字体晚到而把页面突然拉回锚点。
    let userMoved = false;
    const moved = () => { userMoved = true; };
    window.addEventListener('wheel', moved, { passive: true, once: true });
    window.addEventListener('touchstart', moved, { passive: true, once: true });
    document.fonts?.ready.then(() => { if (!closed && !userMoved) alignHash(); });
    cleanup = function () {
      closed = true; cancelAnimationFrame(hashFrame);
      toggle?.removeEventListener('click', togglePause);
      document.removeEventListener('click', click);
      window.removeEventListener('hashchange', alignHash);
      window.removeEventListener('popstate', alignHash);
      window.removeEventListener('wheel', moved);
      window.removeEventListener('touchstart', moved);
      window.SiteMedia?.destroy();
      window.SiteMotion?.destroy();
    };
  }
  window.SiteApp = { init, destroy: () => cleanup?.() };
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init, { once: true });
  else init();
})();
```
## 附录B：媒体任务记录格式
下面是数据结构示例，不是H3工具的API参数。提交时必须映射到已读取的真实工具schema。`${...}`只是待填字段，不能原样交付或提交。
```json
{
  "id": "chapter-03-option-02",
  "chapterId": "chapter-3",
  "label": "${用户实际分类名}",
  "playerId": "scene-video-3",
  "sourceType": "generated",
  "references": [
    {"path": "${主体基准图}", "purpose": "identity_or_product"},
    {"path": "${场景基准图}", "purpose": "environment"}
  ],
  "prompt": "${完整镜头提示词}",
  "requiredGeneration": {"model": "H3", "resolutionTier": "2K"},
  "actualGeneration": null,
  "taskId": null,
  "status": "planned",
  "masterPath": null,
  "plannedWebPath": "assets/videos/category-02.mp4",
  "webPath": null,
  "posterPath": null,
  "loop": true,
  "actualMedia": null,
  "review": {"identity": null, "structure": null, "motion": null, "decode": null},
  "integrated": false
}
```
实际产出后，actualGeneration填写真实工具、模型标识、分辨率档位与参考输入记录；actualMedia填写原片和网站片的实际宽高、时长及编码。用户上传的视频将sourceType记为uploaded，不伪造H3生成记录。

Original-Prompt (Chinesisch)

#互动影游网页

我想做一个 GTA 风格的沉浸式趣味人格测试网页，叫《测测你是 GTA 里的谁》。
请直接制作完整可运行的项目。整个体验要有经典 GTA 的游戏感：复古低模场景、电影感光线、厚重标题、任务标记、小地图和游戏菜单。核心是一个约3分钟、12道题的身份测试，不需要用户了解GTA剧情也能玩。
完整流程：
开场视频 → 标题主菜单 → 第一人称安全屋醒来 → 探索房间 → 走到 IDENTITY CHECK，按E进入答题 → 完成12题 → 获得角色结果 → 身份确认、原创彩蛋和分享。
具体要求：
1. 开场
使用我提供的Intro视频，前约5秒主要展示画面，随后依次渐显GTA风格标题、说明和“开始测试”按钮。点击开始后进入房间。有答题进度时提供继续入口。
2. 第一人称房间
玩家缓慢睁眼，在一个可移动、可环视的低模安全屋中醒来。房间里有桌椅、百叶窗、吊扇、旧电视、收音机和地图等细节。支持WASD移动、拖动环视，手机提供触控操作。
桌边放置IDENTITY CHECK标记，靠近后按E直接开始问卷。全程不显示手臂，不做拿起纸张或手持问卷动画。
3. 答题
固定12道生活情境题，每题4个选项。
每题配对应的第一视角视频，必须真实播放，不能用静态图片缩放冒充动态。保留场景声音，例如电台题有电台声，街景有城市环境声。视频结束后停在最后一帧，用户可以慢慢答。
支持上一题、修改答案、保存进度和重新测试。
4. 角色结果
结果包含Michael、Franklin、Trevor、CJ、Niko、Tommy、Lamar、Lester八位角色。
所有题目参与计分，同一套答案稳定得到相同结果，八种结果均可获得；最高分并列时讲清楚。
结果页展示人物海报、准确的原作简介、一句有记忆点的判词、性格标签，以及根据实际答案写出的趣味解读。
原作人物资料、趣味解读和我们原创的彩蛋任务要明确区分。
5. 音乐和语言
使用我提供的BGM，首页、房间、答题和结果之间连续播放，切换页面不能重头播放或叠音。
默认英文，支持中文切换，题目、结果、按钮和分享内容全部同步。遵循浏览器声音播放限制，在首次正常交互时启动音频。
6. 分享与交付
支持保存人物结果PNG、复制分享文字、下载答题摘要。桌面和手机都能完整操作。
优先接入我提供的视频、音乐、标题和人物素材，保持统一画风。
交付完整源代码、素材、README、本地启动脚本和可部署ZIP，核心功能无需API Key或外部CDN。
请实际完成并检查完整流程，明确说明未完成的验证。

Original-Prompt (Chinesisch)

#电影化动态叙事展示

请设计并实现一个原创的实验性数字创意工作室网站，整体参考古典出版物气质、文艺复兴绘画、旧式排版与当代数字交互，但不得复制其品牌、文案、画面和具体构图；网站不是传统纵向长页面，而是一个始终固定在视口中的全屏电影舞台，背景使用一段原创、无硬切、约 40–60 秒的连续“一镜到底”长视频，以《仲夏夜之梦》为主题，镜头从精灵公主指尖停驻的蝴蝶极近景开始，跟随她追逐蝶群、穿过幽暗森林，进入繁花与藤蔓环绕的月夜花园。公主在喷泉旁遇见王子，两人牵手起舞，镜头一镜到底绕过舞者、穿过喷泉水幕，再随蝶群升至树冠上方，展现森林环抱的花园、月光下起舞的人群，以及低悬天际的巨大月亮。使前后镜头在景别、空间、主体和尺度上形成强烈跨度，同时通过遮挡转场、急速推镜、变焦模糊、空间变形和匹配运动自然衔接；用户向上或向下滚动时不进入新的页面区块，而是将滚动进度精确映射到视频 currentTime，实现可前进、暂停和倒放的 scroll-scrub 影片体验，章节标题、宣言和说明文字只作为覆盖层在对应时间点淡入、位移、套色并消失；视觉采用深森林绿、黑色、旧纸米黄、锈红、暗金和少量钴蓝，结合衬线字体、超大压缩标题、错版套印、Letterpress 颗粒、胶片噪点、暗角、细线网格和博物馆式图注；顶部固定 MORROW 品牌字标、罗马数字章节导航与 INDEX 按钮，点击章节可平滑跳转到对应影片时间，INDEX 打开大幅旧纸目录弹层，底部显示影片进度线、章节节点、当前章节编号和滚动提示；技术栈使用 React + Vite/Next.js + TypeScript，HTML5 Video、requestAnimationFrame、Pointer Events、CSS Custom Properties 与 Intersection Observer，实现视频预加载、Poster 兜底、短 GOP 编码以保证拖动定位流畅、桌面与移动端响应式适配、触控滚动、键盘导航、prefers-reduced-motion 降级和 60fps 性能优化，最终输出完整可运行的网站，确保用户看到的始终是一条可被滚动探索的连续电影，而不是由多个普通网页区块组成的长页面。

Original-Prompt (Chinesisch)

#品牌化内容体验

请设计并实现一个原创的创意工作室作品集网站，整体参考终端控制台式视觉和数字档案馆体验，网站采用纯黑、纯白和少量灰色作为唯一主色，使用高对比度、极简、冷静、技术化的视觉语言，搭配等宽字体、像素化字符、命令行提示、细线边框、文件路径、系统状态、加载进度、视频参数和类似服务器终端的文字信息，营造一个“打开创意工作室内部服务器，浏览视觉项目档案”的沉浸式体验；进入网站时先展示全屏黑底终端启动界面，依次出现 Console setup、网络配置、系统加载、项目读取和工作室信息，文字以逐行打印、光标闪烁和加载进度条的方式出现，完成后进入主页；主页采用类似文件浏览器的结构，顶部或左侧显示虚构路径，例如 C:\Studio\Home，设置 Home、Works、About、Studio、Contact 等导航，页面边角显示当前日期、时间、浏览器信息、系统状态和关闭按钮；首页主视觉展示一段全屏或大面积自动播放的创意影像，视频使用黑白或低饱和视觉，鼠标移动时显示坐标、视频编号和实时播放信息，视频区域可以响应悬停、点击、滚动和拖拽；Works 页面作为核心作品档案库，提供年份筛选、服务类型筛选和项目类别筛选，分类包括 3D、VFX、Motion、Edit、Color Grading、Commercial、Music Video、Short Film、Showreel 等，支持 List view 与 Grid view 两种浏览模式，列表模式显示编号、项目名称、年份和服务类型，网格模式展示作品缩略图、动态视频封面和悬停信息；用户悬停作品时，缩略图自动播放短视频预览，画面出现轻微黑白反转、扫描线、坐标标记或文件读取提示，点击后进入作品详情页，显示大尺寸视频播放器、项目标题、制作年份、服务类别、项目说明和原创技术信息，视频播放器下方模拟专业播放控制台，展示视频 ID、Viewport、Frames、Resolution、Current、Optimal Resolution、Volume、Codecs 等参数，但所有数据使用虚构内容；About 页面使用极简文字排版介绍工作室定位、团队、地点、服务范围和联系方式，Studio 页面展示工作空间图片、工作流程和制作能力，页面切换时通过终端清屏、字符重排、文件夹展开、黑白遮罩和横向滑动完成，不使用普通网站常见的淡入淡出卡片动画；网站整体交互要保持“系统读取—文件浏览—作品筛选—视频预览—项目展开”的清晰逻辑，鼠标光标可以设计成细小十字、终端箭头或像素光标，按钮采用文字链接和极细边框，不使用圆角卡片、渐变按钮、玻璃拟态、彩色装饰或复杂 HUD；技术栈使用 Next.js、React、TypeScript 和 Tailwind CSS 构建页面结构与响应式布局，使用 CSS Modules 或原生 CSS 实现黑白终端风格、等宽字体、像素字符、扫描线、闪烁光标和文件管理器式排版，使用 GSAP 或 Framer Motion 制作启动加载、文字逐行打印、页面切换、滚动平移、作品悬停和视频展开动画，使用 Lenis 实现顺滑滚动，使用原生 HTML5 Video 或 Video.js 实现作品视频播放、自动预览、静音切换和播放进度控制，使用 Zustand 管理当前页面、筛选条件、列表／网格视图、视频状态和作品详情，使用 HTML Canvas 制作轻微 CRT 扫描线、噪点、字符闪烁和终端光标效果，使用 Intersection Observer 和懒加载机制优化大量视频缩略图，使用 LocalStorage 保存用户的视图模式与筛选状态；网站需要适配桌面端、平板和移动端，在小屏设备上将侧边导航转化为折叠式终端菜单，保留黑白高对比、终端档案、作品浏览和视频交互这几个核心特征，最终呈现一个像创意后期工作室内部系统一样专业、克制、神秘、技术化且具有电影制作感的原创作品集网站。

Original-Prompt (Chinesisch)

#沉浸式交互系统构建

请从零创建一个完整、可直接运行的浏览器桌面作品：
《Windows XP · 2005 / 放学后的电脑》
直接完成项目、运行并检查，最终交付可打开、可交互的成品。
目标体验：像打开了 2005 年家里的 Windows XP 电脑，可以在不同应用间切换、聊模拟 QQ、听怀旧歌曲、看 MV、画画、保存文件，以及在 XP 窗口里直接玩 GTA《罪恶都市》视觉风格的原创 3D 城市小游戏。
不要向我提问，不要只给教程、方案或零散代码。自行完成合理的实现选择。所有核心交互都要真实实现，不留 TODO、空按钮、假进度条和“后续接入”入口。先保证 XP 仿真度、GTA 游戏、QQ、播放器四个核心，再完成其余应用。
1. 整体视觉与首次打开
系统外壳严格采用中文 Windows XP 的 Luna 蓝色主题。默认是蓝天、白云、绿色丘陵壁纸，图标纵向排在左侧，底部是固定 30px 高的蓝色任务栏。桌面必须铺满浏览器，不出现网页式顶栏、产品介绍、卡片式导航和营销按钮。
参考桌面尺寸为 1440×900，同时适配 1280×720 和较小窗口。使用 Tahoma、宋体、Microsoft YaHei 的字体回退，普通界面文字 11—13px。窗口采用 2—3px 蓝边、约 29px 标题栏、小圆角、亮蓝渐变、细高光与轻阴影。窗口内底色 #ECE9D8，输入框有经典凹陷边框；关闭按钮红橙渐变；开始按钮绿色渐变、白色“开始”字样。不要把复古界面改成现代大圆角、毛玻璃和宽松卡片。
图标以 32×32px 的旧系统风格为主，保留清晰轮廓和少量像素感；不要用一组系统 Emoji 充当全部桌面图标。音效短促、轻量，提供全局静音；首次播放声音必须来自用户操作。
首次进入显示简短的 XP 风格欢迎界面，提供“进入桌面”按钮；进入后默认没有应用遮挡桌面。右下角显示真实本地时间。桌面图标固定为：我的电脑、我的文档、回收站、Internet Explorer、QQ2005、千千静听、画图、记事本、扫雷、蜘蛛纸牌、罪城海岸。
2. 真正工作的窗口系统
所有应用共用一个窗口管理器：支持拖动、边缘缩放、最小化、最大化、还原、关闭、活动窗口层级、非活动标题栏与任务栏按钮。双击标题栏可最大化；点击任务栏可恢复最小化窗口。最大化区域必须避开任务栏；窗口不能被拖到完全找不回的位置。
实现开始菜单、桌面右键菜单、图标选择、双击打开、重命名、删除、刷新和显示属性。开始菜单包含常用应用、所有程序、我的文档、控制面板、注销和关闭计算机。关机是可返回的模拟关机画面。
菜单、弹窗、文件列表、保存对话框也必须使用 XP 风格。拖动和缩放使用 Pointer Events，正确处理 pointer capture。关闭窗口时释放定时器、事件、音视频和 WebGL 资源。
3. 统一的文件与设置
记事本、画图、我的文档、回收站使用同一套文件数据。每个文件有稳定 ID、名称、类型、内容、创建时间、修改时间和删除状态。文件不能只存在于某个应用的临时变量里。
必须跑通：新建文字或绘画 → 保存到我的文档 → 关闭应用 → 从文件夹重新打开 → 修改并再次保存 → 关闭并重新打开窗口后仍存在。支持重命名、删除到回收站、还原和导出 TXT / PNG。
文件、设置、图片与聊天记录必须在同一页面会话内跨窗口和应用保留。可尝试 localStorage 或 IndexedDB 保存，但存储不可用时使用共享内存状态，仍能完整操作；不要求刷新页面后恢复。导入的图片和本机音视频在浏览器中处理，不上传到服务器。捕获存储失败并给出简短提示，不能在保存失败后显示成功。
4. GTA 视觉的原创 3D 游戏：VICE COAST / 罪城海岸
双击游戏图标，在 XP 应用窗口内进入游戏，也可切换全屏。玩家点击“进入城市”即可游玩，不需要游戏安装包、ROM、原版资源文件、注册、API Key 或额外配置。游戏使用项目自带的原创地图和模型，不以原版《罪恶都市》移植版的身份宣传。
整个游戏内容都要呈现 GTA《罪恶都市》及 PS2 时代城市游戏的视觉语言：
开场是一张高完成度漫画拼贴封面：粗黑轮廓、硬边色块、青绿衬衫人物、复古跑车、棕榈树、海岸旅馆与直升机剪影。标题用厚重白字、黑描边，搭配粉色斜体 Vice Coast。可以生成本地插画，或制作完整的原创 SVG 插画，不用几个方块充当封面。
场景是热带海滨城市的傍晚：粉紫天空、橘色夕阳、青蓝海水、淡紫远景雾，建筑采用奶油白、薄荷绿、浅粉色和暖黄色。棕榈长街、沙滩、Art Deco 旅馆、停车场、咖啡店、加油站和霓虹招牌形成清楚的区域差异。
采用有设计的低多边形模型、清晰的大色块与适量旧贴图质感。人物比例接近真实成年人，有头发、脸部朝向、青绿短袖、牛仔裤和鞋子；车辆有车身、车窗、轮胎、车灯和驾驶方向，敞篷跑车是默认可驾驶车辆。
摄像机是第三人称追尾视角，走路和驾驶都有平滑跟随、转向惯性和合理高度。允许鼠标拖动环视及 C 键切换视角。避免镜头钻进地面或建筑。
右上角显示时间、绿色现金、粉色体力条和六颗追捕星；左下角是带边框的圆形雷达；右下角是时速与车辆名称。任务标题使用黄色或粉色描边文字，取送点是粉色发光圆柱。HUD 要像老游戏的屏幕信息，保持紧凑，给城市画面留空间。
城市至少有 12 个可辨认街区、一条连续滨海道路、多条连通支路、可走的沙滩、可驾驶车辆、道路交通与少量行人。模型可以程序化生成，但建筑不能全部相同。地图、雷达、道路导航、碰撞体和任务点必须使用同一套世界坐标。
真实玩法：
WASD / 方向键移动或驾驶，Shift 奔跑；E 在车辆附近上下车，在任务圈内接取或交接任务；Space 手刹；C 切换视角；P / Esc 暂停；M 静音；F 全屏；R 回到旅馆。
人物有走路与跑步的肢体摆动。车有加速、倒车、惯性、转向、阻尼与制动，转向与速度相关，不能把驾驶实现成平移盒子。
建筑、路缘、车辆和地图边界具有碰撞。车辆不能穿墙，上下车要选择安全落点，玩家掉出地图时能恢复。
撞击车辆或路障会提升追捕等级。警车沿道路追踪玩家，使用基础路网寻路；离开追踪范围一段时间后星级逐步下降。
制作至少三段真实的限时“磁带送达”任务：前往咖啡店取件 → 驾车送至海边旅馆 → 再送往另一处街区。要有明确的取件、在途、送达、失败、重试状态。完成奖励现金并开启下一段；倒计时不能在暂停时继续流失。
保存现金、已完成任务数和音效设置。发动机音高随车速改变，碰撞和警笛有声音反馈。
游戏运行必须是实时 3D，不用视频、静态背景或预渲染动画代替可探索城市。移动端显示方向键、交互键和刹车键。窗口失去焦点或最小化时暂停游戏，并清空按键状态，避免恢复后角色持续移动。
5. QQ2005：细节丰富的怀旧聊天模拟
QQ 主面板默认约 310×560px，窄长比例，浅蓝渐变、企鹅图标、个人头像、昵称、个性签名、太阳/月亮/星星等级、在线状态、好友搜索、分组列表和底部工具栏都要完整。
设置 12 位各有头像、昵称、状态、签名与说话习惯的虚构好友，分成“我的好友”“同学”“网友”三个好友分组；另设三个可打开的模拟群：“初三（2）班”“周末网吧集合”“华语流行音乐”。包含在线、离开、忙碌、隐身、离线状态；分组可折叠，离线头像灰化。
昵称和签名带有适量千禧年网络文化，例如“夏天的风”“蓝色耳机”“正在输入…”“放学别走，等我一下”。不要让每个人都说同一句网络热梗。
聊天窗口必须包括对方头像与签名、工具栏、带时间的消息记录、输入框、发送按钮、字体颜色/字号、表情面板、图片发送、聊天记录查看与导出。提供约 60 个复古小黄脸表情，统一视觉，不依赖当前操作系统 Emoji 的外观。
用户消息立即出现在记录中；对方先显示“正在输入”，再根据角色与关键词给出自然的本地预设回复。支持“作业”“放学”“游戏”“音乐”“在吗”等话题，每类有多个变体，避免连续重复。对话围绕普通的放学生活、QQ 空间、听歌与游戏展开，不接真实 QQ，不发送消息给现实用户。
支持窗口抖动、未读数字、任务栏闪烁和短消息提示音。窗口抖动幅度小且短，避免反复轰炸。修改自己的昵称、头像、签名和状态后，相关窗口同步更新，在同一页面会话内关闭并重新打开应用后保留。聊天记录可尝试持久化，失败时使用内存状态。
QQ 空间也能打开：包含个人资料、两篇可编辑日志、相册、留言板和音乐盒；米黄与浅金色旧博客视觉。可以编辑心情、写留言，音乐盒歌曲点击后在千千静听中定位并播放对应曲目。只在“关于”里简短说明为本地模拟，不在聊天界面铺满技术说明。
6. 千千静听：35 首怀旧歌曲与 MV
播放器默认约 780×540px，银灰金属渐变外壳、青绿色 LCD、数字时间、跳动频谱、细进度条、实体感小按钮。提供银色、粉色、深蓝三种皮肤。
上部是歌曲名、歌手、年代、实际媒体类型和播放状态；中间是上一首、播放、暂停、停止、下一首、循环模式、音量；下部左侧约 40% 宽度为歌单，右侧约 60% 为可见的视频区域。歌单工具包括搜索、分类、收藏星标、“＋ 音乐 / MV”和换肤。
未播放时显示小巧的金属唱片、歌曲名、歌手和普通“▶ 播放”按钮。不要出现“连接官方 MV”、YouTube 字样、来源栏、“打开原页面”按钮、外部网站导航或大段网络实现说明。播放 MV 时直接使用右侧区域，操作由复古播放器的控件统一控制。
在线内容可使用官方允许嵌入的播放器与 API；这是实现层的选型，不是产品文案。使用其支持的精简控制参数，不要用裁切、遮罩、覆盖层或隐藏 iframe 去抹掉第三方播放器必须保留的标识。不要承诺能完全隐藏视频自身的原生角标。MV 区域必须完整可见，尺寸满足平台要求。若使用 YouTube IFrame API，可从 controls:0、playsinline:1、rel:0、autoplay:0 开始配置，在用户点击后播放；自行核对当前官方参数。
提供以下 35 首初始曲目。最后一列为现有版本采用的视频 ID；它们是可核实的初始候选，不代表已逐首验证当前地区的嵌入可用性。开发时检查实际可播放性；失效时查找对应歌手或唱片公司的可嵌入版本，不能编造 ID。专辑音频与歌词视频要标注实际媒体类型，Remix 保留版本名称。
歌曲
歌手
年份
视频 ID
晴天
周杰伦
2003
DYptgVvkVLQ
七里香
周杰伦
2004
Bbp9ZaJD_eA
江南
林俊杰
2004
G97_rOdHcnY
爱你
王心凌
2004
NAODcPQcy9U
Super Star
S.H.E
2003
gr5fNKK2FaA
童话
光良
2005
bBcp_ljCBGU
遇见
孙燕姿
2003
m4nu_F_9dWU
简单爱
周杰伦
2001
Y4xCVlyCvX4
夜曲
周杰伦
2005
6Q0Pd53mojY
说爱你
蔡依林
2003
_Y_mlCbfn_Y
Lydia
F.I.R.
2004
ZOHsd6Zk7DM
当你
王心凌
2003
Es2b6sM2nrs
看我七十二变
蔡依林
2003
B94n5Lbj4aw
一路向北
周杰伦
2005
L229QDxDakU
枫
周杰伦
2005
qzwsQTY-99o
发如雪
周杰伦
2005
aaM7qG2ycjk
珊瑚海
周杰伦 / 梁心颐
2005
kYhh1PpsOg4
Toxic
Britney Spears
2004
LOZuxwVk7TU
Oops!… I Did It Again
Britney Spears
2000
CduA0TULnow
…Baby One More Time
Britney Spears
1998
C-u5WLJ9Yk4
I Want It That Way
Backstreet Boys
1999
4fndeDfaWCg
Complicated
Avril Lavigne
2002
5NPBIwQyPWE
Sk8er Boi
Avril Lavigne
2002
TIy3n2b7V9k
Yellow
Coldplay
2000
yKNxeF4KMsY
In the End
Linkin Park
2001
eVTXPUF4Oz4
Numb
Linkin Park
2003
kXYiU_JCYtU
坏女孩
徐良 / 小凌
2011
YiFA7U_q7wc
客官不可以（Remix）
徐良 / 小凌
2011
u56KMBpR_zU
红装
徐良
2010
FRPrDCivzSI
犯贱（Remix）
徐良 / 阿悄
2011
_g4nljxCvTw
友情出演
徐良 / 小凌
2011
KJbx7GPqcM8
无颜女
徐良 / 小凌
2013
RLr0Foqle_E
第一次
光良
2001
rFsn1tzhcHk
约定
光良
2006
eHbIAjhS0cs
都是你
光良
2006
5RmBbdGmzIk
歌单分类：全部热歌、徐良 · QQ回忆、光良 · 情歌、华语回忆、欧美金曲、我的收藏、本机文件、原创电台。列表上方另有“全部 / 徐良 · QQ回忆 / 光良 · 情歌”三个快捷按钮。徐良 6 首、光良 4 首，数字来自实际数据。2005 是桌面主题，音乐覆盖 1998—2013 年，不能把后来的作品标成 2005 年发行。
单击选中、双击播放。进度、时长、音量、播放/暂停状态必须跟随实际媒体；频谱只在真实播放或原创电台播放时跳动。实现顺序播放、列表循环、单曲循环和随机播放；切歌停止上一首，拖动进度真正 seek，收藏和设置在同一页面会话内切歌、关闭并重新打开播放器后保留。
本机导入支持常见音频，以及 MP4 / WebM 视频。视频使用原生 video 元素和自制复古控件，在右侧完整显示，按原比例 contain，不拉伸、不裁切。在线曲目受网络或嵌入限制时，显示简短的“暂时无法播放”，提供重试、下一首和本机导入，不能假装已播放或用其他音乐冒充该歌曲。
另外用 Web Audio 创作三首可离线播放的短电子旋律：《雨后的操场》《放学路上》《蓝色星期六》，明确标注为原创电台。桌面、QQ、游戏和本机音乐可离线工作，商业歌曲的在线播放需要网络，不宣称它们已打包离线。原生第三方视频的后台播放行为遵循平台要求；关闭播放器后停止声音并释放资源。
7. 其他应用必须能用
记事本：编辑、新建、打开、保存、另存为、导出、未保存修改提醒。
画图：铅笔、画笔、橡皮、填充、直线、矩形、椭圆、颜色盘、线宽、撤销/重做、导入图片、保存与导出 PNG。画好的图片可设成桌面壁纸。
我的电脑 / 我的文档：经典工具栏、地址栏、侧边任务区、文件列表和属性。回收站支持查看、还原、永久删除与清空确认。
扫雷：至少初级 9×9 / 10 雷与中级 16×16 / 40 雷；首击安全、空白扩展、插旗、计时、胜负和重新开始。
蜘蛛纸牌：单花色的真实规则，降序移动、合法整组拖动、K 到 A 完成收牌、发牌、撤销、胜负判断；保证牌数守恒。
计算器：数字、四则运算、小数、百分比、退格、清除和连续计算。
Internet Explorer：仿真浏览器外壳与自带的 2005 导航主页；站内内容正常打开，第三方网站无法嵌入时明确使用新标签页，不伪装加载成功。
8. 工程、运行与性能
优先使用原生 HTML、CSS、JavaScript ES Modules，加本地 Three.js。将窗口管理、文件系统、QQ、播放器、各工具和游戏拆成清晰模块。游戏可通过同源 iframe 独立运行，键盘输入只在游戏获得焦点时生效，QQ 输入和记事本输入不能同时控制车辆。
项目必须能静态托管，使用正确的相对资源路径，无需后端、付费 API、账号或密钥。核心字体、图标、壁纸、游戏插画、模型和 Three.js 随项目提供，运行时不依赖外部 CDN 拉取核心资源。外部音乐与核心桌面加载彼此独立，一首 MV 加载失败不能拖垮系统。
采用 requestAnimationFrame；游戏时间步限制上限，物理采用固定步长或子步进。重复建筑与棕榈树尽量实例化，限制阴影与灯光开销；devicePixelRatio 上限 1.5—2。尺寸变化时同步更新渲染器、摄像机、画图坐标和 HUD。暂停或窗口最小化时停止不必要的渲染。避免任何应用把页面无限撑高。
交付可静态托管的完整项目，构建与部署由平台处理。
9. 交付前验收
执行实际可用的验证。有浏览器工具时，在浏览器里检查以下完整链路并修复发现的问题；没有浏览器时进行代码、构建和逻辑检查，明确未完成的实际播放或渲染验证，不编造测试结果。
同时打开 QQ、记事本和播放器，拖动、缩放、切换、最小化与恢复，任务栏和层级正确。
写文字、画图、保存、关闭、重新打开、跨应用查看、删除到回收站再还原，内容一致。
搜索好友、发消息、发图片、发复古表情、抖动窗口、修改签名、关闭并重新打开窗口恢复记录；QQ 空间音乐盒能打开对应歌曲。
选择徐良或光良歌单、搜索、收藏、播放、暂停、切歌、调整音量与进度；能导入并播放本机 MV，界面没有额外来源栏。
双击游戏 → 进入城市 → 走到车旁 → 上车 → 驾驶转弯与刹车 → 触发碰撞与追捕 → 完成一次取送任务 → 暂停与恢复 → 关闭窗口停止运行。
检查扫雷和蜘蛛纸牌的关键规则；桌面在 1440×900、1280×720 和触屏尺寸下没有无法操作的区域。
最终只简短告诉我如何打开成品、已经完成的核心功能，以及实际存在的限制。核心效果必须在本次实现完成，不能把关键功能留成以后再接入。