# Momentum Slider · 独立复现提示词

将下方完整提示词交给具有浏览器和编码能力的 agent。`products.json` 及所列素材是输入数据，不需要读取旧版 JS。本文约束的是本仓库冻结版本的效果；不要替换成其他跑鞋轮播或另作视觉设计。

---

请用原生 HTML/CSS/JavaScript 和本地 GSAP 3.12.5 实现一个全屏跑鞋发布页。交付 `index.html`、可读的实现模块和验证截图。视觉与交互必须满足下列规格。

## 素材与内容

- 数据附件：本目录 `products.json`，按 Meridian、Kinetic Pro、Terra Flux、Echo Glide、Velo Lite 的顺序，完整保留标题、副标题、标签、价格、描述。5 个商品重复一轮，实际渲染 10 张卡片。
- 背景：`../../momentum-slider-gallery/assets/bg.webp`，居中、cover、固定背景。
- 商品图片按数据的 `image` 字段，从 `../../momentum-slider-gallery/` 解析。分别是 lumiere.jpg、overlay-shadow.jpg、prism-1.jpg、echo.jpg、veil.jpg。不得换图或画占位商品。
- Geist 正文（400/500/600）；Playfair Display 标题（500，含斜体）。字体加载完再截图。
- 顶部居中：细线、`nº 01`、圆点、`SS 26 · Running`；主标题 `Built for the long run`，后两个词斜体且黑色 40% 透明度。正文逐字采用基准页面的这段文案：`Five new silhouettes engineered for the road, the trail, and the days you push further than planned. Subscribers unlock 50% off for the first 48 hours.` 折扣加粗。
- 邮箱胶囊表单：`Enter your email for early access`、黑色 `Notify me` 按钮与右箭头。下方 `50% off · 48h early access · Limited drop`，10px、字距 .24em。表单是演示，不连接后台。

## 构图与样式

- 默认浅色；右上角 34×34 的圆形按钮切换 dark/light。浅色详情背景 #fff，正文 #111；深色详情背景 #111113，正文 #f3f3f3。
- 页面宽 100%，至少一屏高，横向裁切。正文基础行高 1.5。顶部 hero 在 >=768px 时 padding:128px 24px 40px，小屏 96px 24px 24px。
- 主标题 clamp(2.6rem,7vw,5.5rem)，行高1.02、字距-.025em；正文14px/1.6、max-width:32rem；表单距正文32px、高52px、半透明白玻璃底色、16px 背景模糊；输入宽桌面256px/窄屏224px。
- hero 下方轨道填剩余空间，min-height 为卡高+60px；卡片 top:16px。透视桌面1200px、小于640px为800px，消失点50% 45%。
- 卡片宽高：<640px 为250×350，640–1023px为290×400，>=1024px为340×460。卡间距22px。圆角16px，图片cover。左上标签；左下商品名/用途；右下价格。商品名桌面1.35rem/小屏1.2rem，价格2rem/1.8rem。
- 卡底叠加四层同图柔光：[blur px,scale,渐变高度%] = [6,1.05,20]、[14,1.08,16]、[28,1.12,12]、[50,1.16,8]；加从底部黑色25%到40%位置透明的渐变，以及白色10%内描边。hover 图片放大1.05，过渡.7s ease-out。

## 运动模型：必须按公式实现

集中维护轨道位置 x 和速度 v。令 spacing=卡宽+22，period=10×spacing。第 i 张卡的 offset 为 i×spacing−x 折回 [-period/2,period/2) 的结果。卡片 translateX=视口宽/2+offset−卡宽/2。

令 n=offset/(视口宽×.55)，a=min(abs(n),1.5)。桌面/小于640px的参数分别是：
- rotateY=−n×14° / −n×8°；
- translateZ=a×−120px / a×−60px；
- scale=1−a×.35 / 1−a×.25；
- z-index=round((1−a)×100)。

循环必须在框外换份，不能在中间瞬移或出现空隙。每张卡高光为115度渐变：透明30%、白色alpha=(.04−.03a)在50%、透明70%；高光横移 offset/视口宽×200px。

按基准60Hz更新：非拖动且未开详情时，先 x+=v，再 v*=.935；释放后的3200ms内且 |v|<.8 时，v+=(round(x/spacing)×spacing−x)×.035；超过3200ms且|v|<.3时，x每帧增加.45，v清零。背景卡在详情打开时停止惯性和漂移，但允许导航目标插值。

入场：第i张 delay=.8+.07×abs(i−4.5)秒；p=clamp((elapsed−delay)/.9,0,1)，r=1−(1−p)^4。opacity=r，translateY=(1−r)×60，额外scale乘(.94+.06r)。hero元素从opacity0、y30、scale.94、blur6px开始，.4秒后以.12秒错峰、每项1秒、power4.out进入。

## 输入与状态

- 横拖移动 x -= deltaX；以手势最近一次 deltaX/deltaTime×16 估计释放速度并取反。总位移超过8px再锁方向：|dx|>1.2|dy|才接管横向；竖向让页面自然滚动。
- 移动超过5px不得打开卡片。鼠标、触屏、取消手势都要正常结束状态。点击未移动的卡片打开对应商品。
- 滚轮仅在 |deltaX|>.5|deltaY| 时接管：阻止默认、x+=.6×deltaX、v=0并重设释放时刻。
- 所有持续卡片 transform/opacity/z-index 只由一个渲染循环写；GSAP 仅控制 hero 和独立详情层。隐藏页面暂停，销毁时移除事件和rAF。

## 详情：保持打开、切换、关闭全过程

- 记录点中卡片的屏幕矩形，从该矩形展开详情，不是直接出现的新弹窗。宽=min(vw−48,896)。桌面高=min(vh−64,560)，手机<768px高=min(vh−32,.88vh)，居中。
- 遮罩黑色60%、blur6px；面板圆角16px。展开.55秒 power3.inOut；媒体区域从100%×100%收至桌面左侧48%×100%，手机上侧100%×45%。说明区占剩余空间，桌面内边距40、小屏24。
- 说明依次显示用途、名称、描述、细线、价格+one-time、Get this section/Preview live 按钮，以及 GSAP/Spring Physics/Responsive/Dark Mode 四个标签。保留演示按钮语义，不新增购买流程。
- 说明区在.35秒后淡入.4秒；各文字在.45秒后从y16/opacity0错峰.05秒进入。导航按钮.6秒后进入。桌面箭头在面板两侧52px/12px处；手机固定在底部20px、44px按钮、间隔16px。
- 左右按钮和方向键循环切商品。先让旧文字在.18秒、旧图片在.2秒淡出，图片放大1.03；替换内容后图片.35秒复原、文字.3秒淡入。轨道目标±spacing，每帧向目标移动差值的10%，小于.5px收敛。
- Esc、关闭按钮、遮罩都关闭；面板缩至.95并淡出.3秒，遮罩晚.05秒淡出.3秒。关闭期间不允许重复建立详情层。窗口缩放时重新布局，包括跨768px导航迁移。

## 验收

在1440×1000与390×844下检查：首屏3秒/5秒；横拖释放与吸附；空闲漂移；打开卡片中途/完成；上一张/下一张与Esc；详情打开后跨断点缩放；主题切换。保留源图、文案、大小、阴影、裁切与时间曲线；不要新增装饰或更换字体。记录截图及交互结果，网页无脚本异常、无横向溢出。仅成功构建或静态截图不能算效果一致。

## 本地图片与中英文（2026-09-21 更新）

本轮已接入本地公开图片和中英双语。复现时同时遵循 [共享规范](../../shared/README.md)：沿用当前本地图片路径，使用共享词典与语言偏好（`zh` / `en`），覆盖动态内容、辅助标签和 Canvas 文字；不要恢复旧的远程图片链接。中文拆字标题应先翻译再拆分，并保持原有动画机制。图片来源与替换映射在共享规范中列出。