类型：Site模板 · 收录：2026-11-05 01:12:18 · 源码：会员可见
# MOTDES 当前作品复原提示词
版本日期 2026 年 10 月 15 日
将本文件和同目录的 `01_MOTDES_完整源代码_20261015.zip` 一起交给接手的 AI
以下内容可直接作为执行提示词
---
你是一名熟悉 Astro Three.js GSAP 和滚动交互的前端工程师
请将随附源代码恢复为可运行 可构建 可部署的 MOTDES 动漫影像作品集网站
这是一份已完成多轮细节调整的现有作品 目标是忠实复原当前版本并提供运行结果
先解压检查源代码和素材 完成安装及构建 再启动预览 按下文核对动效 不要只给我设计建议或静态效果图
## 一 恢复方式与版本基准
1. 解压后进入 `MOTDES-source` 阅读 `README.md`
2. 运行 `node verify-package.mjs` 验证源文件和素材完整性
3. 进入 `motdes` 运行 `npm ci` 使用随包的 `package-lock.json`
4. 运行 `npm run dev` 默认地址 `http://127.0.0.1:4323/`
5. 运行 `npm run build` 产物在 `motdes/dist`
6. 运行 `npm run preview` 可以检查构建产物 该命令也使用 4323 端口 先停止同端口的开发服务 或指定其他端口
7. 从 `MOTDES-source` 根目录运行包内四个离线验证脚本
```sh
node analysis/profile-scroll/verify-profile-gl.mjs
node analysis/profile-scroll/verify-profile-damping.mjs
node analysis/site-soundtrack/verify-soundtrack.mjs
node analysis/opening-performance/verify-boot.mjs
```
使用 Node.js 22 或更高版本以及 npm 依赖锁中 Astro 的最低 Node 要求见源码包 README
源工程交接前的构建环境是 Node.js 26 和 npm 11
首次安装需要访问 npm 源 源码包不包含 node_modules 和 dist 网站使用的当前视频 两首音乐 海报 图片以及字形路径均随包提供 字体依赖随 npm 安装
本次为包含音乐修复的 2026 年 10 月 15 日完整快照 不要用 10 月 13 日旧包覆盖当前声音逻辑
以随附 `motdes/src` 的实现为精确基准 本提示词解释设计和交互意图
若旧代码注释或旧辅助脚本与当前实现不同 以实际被首页引用的代码及本提示词中的最新动效顺序为准
恢复过程中保留 Astro Three.js GSAP Lenis 架构 避免无必要迁移框架造成动画和媒体行为变化
若环境限制使你只能重新实现 请先读取原始时间线 几何 着色器和素材映射 按同样逻辑复原 并明确说明不能验证的部分
## 二 整体视觉与内容方向
这是一页以动漫角色 动作设计 奇幻世界和个人影像案例为主的滚动作品集
画面克制 清晰 有留白 但章节之间不能出现过长空白
页面主要由黑色作品舞台和浅灰白色图纸舞台组成
个人介绍及四个下滑作品处保持浅灰白底 细网格 十字定位点 外围细线框 不要改成紫色底
网格场景基础颜色为 `#D7DBDC` 字体主色为 `#181818` 实际背景包含现有 Three.js 图层效果
排版以左右两侧为主 有明确的阅读层级 保持现有栅格和对齐关系
正文优先使用苹方 `PingFang SC` 并保留 `PingFang TC` 和现有 Noto Sans SC 等回退 跨平台无苹方时使用回退字体 不从网络临时下载来历不明的字体
个人介绍的英文大标题也使用现有无衬线字体 不使用衬线或手写字体
Profile 标题主要为 500 字重 正文为 400 字重 不要把所有文字都做成同一粗细
英文标题和中文短说明穿插 个人展示段文案不用标点 不额外加入下划线
品牌 Logo 导航和右上 Contact / Recruit 胶囊沿现有画面边界对齐 右上原先删掉的汉堡图标及其旁边的小控件不重新添加
保留左侧章节刻度指示器
## 三 完整页面顺序
### 1 硬币开场与抓取衔接
使用本地 `public/top/coin/intro-grab-pullback.mp4`
这是已经补齐抓取过程的开场视频 包含硬币阶段 手臂进入与抓取 以及末段后拉交接 不要误用同目录旧版 `intro.mp4` 或 `intro-pullback.mp4`
当前开场为 1920 × 888 60 fps 562 帧 约 9 秒 367
`Layout.astro` 的 `data-arrival-start` 是 `9.066667`
后续使用 `loop-pullback.mp4` 在 WebGL 场景中承接 保留现有视频纹理交接和环绕作品入场
保留加载进度 跳过入口 静音自动播放失败后的交互恢复 视频错误兜底 页面隐藏暂停和返回恢复逻辑
入口由 `coin-opening.js` 和 `main.js` 中的 `bootCoinOpening` 控制 不是新增一个定时隐藏的视频遮罩即可完成
### 开场音乐与后续循环
两首音乐已经嵌入网站 随源码包的 public/sounds 一起提供 无需访问原作者桌面文件
| 顺序 | 网页文件 | 用户提供的原文件名 | 时长 | 行为 |
| --- | --- | --- | --- | --- |
| 01 | opening-first.mp3 | 第一步.mp3 | 约 92 秒 212 | 随开场启动 播放一次 |
| 02 | ambient-loop.mp3 | df55afa49c1047fa84655df1fa5c3ea3.mp3 | 约 82 秒 021 | 第一首结束后循环 |
第一首在开场视频真正开始播放时启动 视频缓冲期间跟随暂停 并在恢复时与开场画面时间同步
开场视频约 9 秒结束仅解除音画同步 不截断第一首音乐 不提前切换到第二首
第一首 ended 后在同一个 audio 元素上更换为第二首音源并启用 loop 不创建第二个播放器 以保留已有的用户播放授权
两首网页副本已降至约负 24 点 25 LUFS 播放器 volume 为 0.7 保留当前轻柔音量 文件本身已有短淡入和淡出 不要重新提高音量或重复压低
保留右下角独立的声音胶囊 开场遮罩出现时也能点击 未播放或被限制时显示 点击开启声音 真正播放后才显示 音乐已开启
加载时点按钮必须立即同步调用 audio.play 不能等待视频事件以后再播放 也不能将默认启用状态误当成已经播放 从而把用户的第一次点击保存成静音
首次自动播放被浏览器拦截时 真实点击按钮或页面可恢复播放 Enter 与空格也支持激活 普通滚轮滚动不能被假设为有效的音频授权
已经主动关闭音乐时 尊重 localStorage 中的 motdes-music-muted 普通页面点击不能擅自解除静音 只有声音按钮可以重新开启
保留已暂停 加载中 播放失败的真实状态 不要未出声就显示已开启 不要试图绕过浏览器播放限制
页面隐藏 页面离开或打开作品视频弹层时暂停音乐 返回或关闭弹层后从当前位置继续 页面卸载要清理监听和未完成播放请求
当前作品视频仍为静音展示 背景音乐由 site-soundtrack.js 单独控制 不重新启用旧 sound-manager 中缺失素材的 BGM 和章节音效
声音入口在 src/scripts/controllers/site-soundtrack.js 音频和按钮在 Layout.astro 样式在 coin-opening.css main.js 的 bootCoinOpening 负责初始化与释放开场同步
要在浏览器中真正点击并试听 第一首完整结束后确认第二首循环 离线模拟通过不等于实际音频输出已经验收
### 2 黑色环绕作品舞台
保留当前五组作品视频的 Three.js 环绕呈现和作品标题
内容顺序以 `src/pages/index.astro` 的 `works` 数组为准
| 顺序 | 英文标题 | 素材文件名 |
| --- | --- | --- |
| 01 | LIGHTSABER DUEL | duel |
| 02 | FOREST SPIRITS | forest |
| 03 | ALLEY FIGHT | alley |
| 04 | CLOUD COMPANIONS | cloud-cat |
| 05 | GENTLE GIANT | gentle-giant |
素材目录是 `public/top/works/selected-20261008`
### 3 浅色个人介绍
左边是固定的两行标题
```text
FRAME TO
MOTION
```
下方文案
```text
这里可展示个人头像与简要履历
```
下方小胶囊
```text
角色 镜头 动漫影像
```
右边四组内容随滚动经过视觉中心
| 序号 | 英文标题 | 中文标签 |
| --- | --- | --- |
| 01 | Character and Story | 角色与故事 |
| 02 | Action and Timing | 动作与节奏 |
| 03 | Fantasy Worlds | 奇幻世界 |
| 04 | Frame to Motion | 创作方向 |
详细中文说明读取 `src/lib/profile-content.js` 的 `PROFILE_CHAPTERS`
右侧内容起初很浅 随着下滑从左到右逐渐变实 先标题 再中文标签 再两行说明
使用文字背景裁剪渐变 保持单层字形 避免重叠复制文字导致糊边
左侧标题按两行分别在遮罩内向上进入 同时逐渐显现 下方说明和胶囊稍后跟入
### 4 四组固定舞台作品
个人介绍结束后进入同一个固定画面中的作品展示
第一组左侧标题从左向右进入 右侧视频从右向左进入 两者缓慢落到各自位置
继续下滑时在当前舞台内改变内容与左右关系 不要改成四个隔着大段空白依次向上滚走的普通网页区块
四组素材与排版如下
| 顺序 | 展示名称 | 两行英文标题 | 中文短说明 | 稳定排版 |
| --- | --- | --- | --- | --- |
| 01 | 少女与猫 | MOMENTS IN / MOTION | 表情 陪伴 轻快日常 | 左文字 右视频 |
| 02 | 风暴之刃 | ACTION AND / IMPACT | 蓄势 交锋 力量释放 | 左视频 右文字 |
| 03 | 焰灵奇想 | CHARACTER / AND MAGIC | 焰灵 秘术 奇幻表演 | 左文字 右视频 |
| 04 | 赤焰之舞 | RHYTHM OF / BATTLE | 赤焰 刀光 动作节奏 | 左视频 右文字 |
表中的斜杠仅表示标题换行 不显示在页面中
视频和同名海报在 `public/top/profile/selected-20261012`
```text
girl-and-cat.mp4 girl-and-cat.jpg
storm-blade.mp4 storm-blade.jpg
flame-spirit.mp4 flame-spirit.jpg
scarlet-dance.mp4 scarlet-dance.jpg
```
素材已经按网页播放需要整理 保留画面上的原有标识 不擅自裁切去除
视频容器比例为 16 比 9 使用 `object-fit: contain` 圆角为 `clamp(12px, 1.25vw, 24px)` 容器隐藏溢出
标题字号使用当前 CSS 的 `clamp(34px, 4.2vw, 76px)` 以及对应窄屏规则
四组共享同一个左右交换进度 切换时旧视频作为不透明底层 新视频覆盖进入 避免两个半透明视频把背景露出来产生闪白
标题与图注在交叉经过中间时先收淡 再于新位置出现 避免英文大字叠压视频
默认只播放当前权重最高的一组视频 保留惰性加载 静音 循环 行内播放 隐藏页暂停 自动播放失败按钮和 reduced motion 下的手动播放
### 5 视频卡片的漂移手感
随滚动轻轻漂移的是整个视频卡片和下方图注
这不是视频逐帧跟随滚动 也不是对画面施加水波形变
方向取决于滚动进度的滞后差 停止滚动后缓缓回到稳定位置 不持续自主晃动
现有实现使用独立的 `--case-drift-y` 保持它与左右交换 transform 分开
漂移跟随系数为 0.55 桌面最多 28px 手机最多 16px 同时限制在视口高度的百分之三内
在 reduced motion 页面隐藏 非作品段和生命周期退出时归零并清理阻尼状态
### 6 最后一组向两侧退场和 M 放大
这是最新确认的关键行为
第 04 组继续向下滑动时 左边的视频连同图注向左退出 右边的标题和说明向右退出
两侧从开始退场的这一刻起 底部 M 同步开始缓慢放大并向中间抬升
前面的个人介绍和作品停留阶段 M 保持底部小尺寸 并且非常浅 只能微微看见
随最终退场和后续下滑 M 逐步变大 变清晰 但保持正面闭合
M 放大完成之后 继续向下滑动才开始翻转 再接现有展开过程
M 内部不要出现小颗粒 不要重新挂载 `profile-particles.js` 虽然该历史文件仍在源代码目录中
所有 M 表示层共享同一个显现值 玻璃本体 描边 基底和侧屏的时序不能互相错开
保留 `main-logo.js` 中父级世界变换更新后再复制到独立描边场景的逻辑 避免直接定位进入时 M 尺寸异常变小
### 7 PORTFOLIO 与展开后的案例
保留现有 PORTFOLIO 描边标题 STORIES IN MOTION 分行标题和中文条带文字
它继续前一段已经开始的 M 放大 不从小尺寸重新播放一次
展开后沿用 `src/lib/service-cases.js` 的六个案例和原有屏幕铺展动效
```text
地铁奇遇记
巷口破局
红蓝交锋
云间旅伴
巨兽与精灵
森境苏醒
```
保留点击打开视频 全屏弹层关闭 滚动锁释放和键盘返回等已有行为
### 8 收尾
保留现有构造线 字标描边和填实过程
最终在黑色画面上显示大号白色英文
```text
THANKS FOR WATCHING
```
字形已经烘焙在 `src/lib/outro-name.js` 中 共 17 个非空格字母 总时序仍为 298 帧时间单位 字母填充有错峰 最晚完成在第 277 帧 保留最后停留
不要恢复早期的 YOUR NAME 占位文字
## 四 时间线精确约束
以下 Profile 进度是该滚动段的归一化进度 不是全页进度 也不是视频时间
Profile 滚动轨道为 `720lvh` 具体响应式行为以 CSS 和 `profileSpaciousTrack` 为准
| 动作 | 进度或参数 |
| --- | --- |
| Process 内容内部计算 | 原始 Profile 进度乘 1.5 |
| 四个章节导航停点 | 0.064 0.1386667 0.2133333 0.288 |
| 介绍文字完成退出 | 约 0.410 |
| 第一组文字视频进入 | 0.414 至 0.460 |
| 左侧标题进入位移 | 从负 12vw 到 0 |
| 右侧视频进入位移 | 从正 12vw 到 0 |
| 四组作品停点 | 0.46 0.57 0.68 0.79 |
| 三次交换中心 | 0.515 0.625 0.735 |
| 每次交换完整窗口宽度 | 0.06 |
| 最后一组向外退出 | 0.797 至 0.839 |
| 最后一组逐渐淡出 | 0.817 至 0.839 |
| 左右完整退出距离 | 对应元素自身宽度加 14vw |
| M 开始变大 | 0.797 与最后退场同时 |
| Profile 与 PORTFOLIO 交接 | 同一条增长曲线在输入 0.7 处接续 |
| PORTFOLIO 放大结束 | 该段进度 0.62 |
| PORTFOLIO 大尺寸保持 | 0.62 至 0.74 |
| PORTFOLIO 翻转 | 0.74 至 1 |
| 主体共享滚动阻尼 | Lerper multiplier 0.7 |
| 卡片附加漂移阻尼 | Lerper multiplier 0.55 |
保留以下曲线含义
```js
const clamp01 = x => Math.max(0, Math.min(1, x))
const S = x => {
const t = clamp01(x)
return t * t * (3 - 2 * t)
}
// p 为 Profile 进度
const profileGrowth = S(0.7 * clamp01((p - 0.797) / (1 - 0.797)))
// q 为 PORTFOLIO 进度
const portfolioGrowth = S(0.7 + 0.3 * clamp01(q / 0.62))
// layout 为 1 时使用小尺寸底部姿态 为 0 时使用原有完整 M 姿态
const layout = 1 - growth
```
显现值从很浅的 0.08 附近开始 正常作品停留阶段渐进至 0.20 附近 最后放大时逐渐达到 1
精确公式和移动端尺寸读 `profile-timeline.js` 与 `main-logo.js`
不要新增一套与现有进度竞争的自动吸附 不要把淡入改为滚到某处一次性触发的定时 CSS 动画
向上滚动时以上位置 透明度和尺寸都应按同一条曲线回退
## 五 关键文件导航
| 要查看或调整的内容 | 文件 |
| --- | --- |
| 首页顺序 五组环绕作品 | `src/pages/index.astro` |
| 公共布局 开场视频 Header Outro | `src/layouts/Layout.astro` |
| 四章个人信息 四组下滑视频和文案 | `src/lib/profile-content.js` |
| 个人展示时间线 M 变大和翻转门槛 | `src/lib/profile-timeline.js` |
| 个人展示 DOM | `src/components/ProfileStory.astro` |
| 两侧排版 圆角 字体 渐变和断点 | `src/styles/profile-story.css` |
| 淡入交换 视频播放和卡片漂移 | `src/scripts/controllers/profile-story.js` |
| M 姿态 显现 闭合与展开限制 | `src/scripts/gl/main-logo.js` |
| M 几何与着色器 | `src/scripts/gl/logo-geometry.js` 以及 `src/scripts/gl/shaders/` |
| 浅色网格场景 | `src/scripts/gl/mission-vision-scene.js` 和 `grid.js` |
| 全部滚动触发器 共享进度 | `src/scripts/core/top-scroll-manager.js` |
| 阻尼实现 | `src/scripts/core/lerper.js` |
| 页面章节与左侧导航 | `src/lib/top-sections.js` |
| 开场抓取到场景交接 | `src/scripts/controllers/coin-opening.js` |
| 首曲启动 声音开关 后续循环 | `src/scripts/controllers/site-soundtrack.js` |
| 开场及声音按钮样式 | `src/styles/coin-opening.css` |
| 两首已调低音量的音频 | `public/sounds/opening-first.mp3` `public/sounds/ambient-loop.mp3` |
| WebGL 总场景 视频纹理和最终合成 | `src/scripts/gl/index.js` |
| 展开后六组案例 | `src/lib/service-cases.js` |
| 最终感谢观看字形和时间线 | `src/lib/outro-name.js` `src/lib/outro-svg.js` `src/scripts/controllers/outro.js` |
| Header 和页脚 | `src/styles/chrome.css` |
| 全页主循环与启动 | `src/scripts/main.js` |
主循环顺序是先 Lenis 再 Lerper 再读取阻尼值的控制器和 WebGL 渲染 保持这一依赖顺序
## 六 响应式和运行行为
桌面保持左右双列 宽屏图文围绕同一固定舞台变化
窄竖屏使用现有上下排列和更小字号 横向低高度窗口保留已有双列紧凑布局
小屏底部 M 有额外缩小和下移规则 不要用桌面固定像素覆盖
保留 `prefers-reduced-motion` 下的减少位移和手动播放策略
尊重自动播放限制 视频资源未准备好时使用海报和进入按钮 不要把加载中当成动画完整结束
清理离场的视频 事件监听 RAF 和阻尼状态 避免返回页面后重复播放或重复绑定
## 七 当前交付边界
这份代码是当前首页的完整工程快照
`src/pages` 当前只有 `index.astro` 部分顶部导航和 Contact 链接保留 `/news` `/works` `/about` `/stellla` `/contact` 地址 对应独立页面尚未实现 不要报告这些子页面已经可用
当前首页音乐已完整提供 使用 `/sounds/opening-first.mp3` 与 `/sounds/ambient-loop.mp3`
历史 sound-manager 中仍有 `/sounds/bgm.mp3` `/sounds/mission_in.mp3` `/sounds/typing.mp3` `/sounds/works_in.mp3` 引用 这些旧素材不在包内 当前硬币开场不绑定旧章节音效 不把它们误判成现用音乐缺失 不改回旧启动分支
`astro.config.mjs` 的 `site` 为示例域名 实际发布时替换为用户提供的域名
当前素材 URL 使用站点根路径 最简单的部署位置是域名根目录 子目录部署需要统一处理 base 与资源路径
tools 中包含早期诊断和生成辅助脚本 部分端口及可选工具依赖需要按当前环境调整 正常安装 构建和运行无需执行这些历史脚本 已生成字形均在 src 中
素材标题是画面展示名称 不据此生成不存在的制作署名 经历或项目获奖信息
## 八 验收与最终交付
先完成安装和生产构建 再运行包内离线验证脚本
如果允许浏览器访问本地预览 在桌面和手机尺寸检查以下内容
- 开场抓取动作衔接到后拉和作品舞台
- 首次打开或加载中点击声音按钮能够启动音乐 不误设静音
- 第一首持续播放到结束 第二首自动接续循环 音量保持轻柔
- 隐藏页面 打开视频弹层 静音 恢复以及返回网站时音频状态正确
- 五组环绕作品素材正常显示
- 左侧标题有进入动画 右侧文字由浅到实
- 四个下滑视频素材和标题一致 圆角完整
- 视频和标题在固定舞台交换两侧 没有大段空白
- 快速滚动 慢速滚动 停止和反向滚动时 卡片漂移能够回稳
- 第四组左视频向左 右文字向右退出 同时底部 M 开始放大
- M 放大前后没有颗粒 保持闭合 放大完成后才翻转展开
- 收尾显示 THANKS FOR WATCHING
- 窄屏和 reduced motion 策略能工作
交付时告诉我修改了什么 给出本地预览地址 构建结果以及部署目录
浏览器视觉验证与离线构建验证分别说明 若浏览器不可用 就如实说明 不宣称已经看过实际动画
保留可编辑源文件和原始媒体映射 让我可以继续替换作品和文案
---
交接说明
这个提示词和源代码包配合使用可以恢复现有实现 仅提供提示词时 AI 可以重建结构与动效意图 但不能凭文字重建同一批视频和精确字形 素材与源代码请一起传递