# Cinema Reel：可直接交给其他 Agent 的复现提示词

独立实现 Cinema Reel：垂直拖动影视海报，超过拉动阈值才翻到下一部，背景图和文字不同速移动，自绘光标提示Pull/Release，EXPLORE打开影片资料。使用本目录films.json全部数据、顺序与图片；图片URL `https://images.unsplash.com/photo-{imageId}?w=1800&q=80&auto=format&fit=crop`。禁止加载旧JS或iframe包页；拆分影片内容、运动模型、输入与渲染。

## 视觉与内容

全屏#0a0908底，文字#f3efe7，Geist正文、Geist Mono辅助、Playfair Display衬线标题。reel overflowhidden,touch-actionnone,grab。track top10vh；每slide高80vh、左右margin5.2vw、底margin5vh，圆角48；因此步距为.85H。图片覆盖卡内100%，object-fitcover。shade为linear-gradient(0deg,#08070acc,transparent65%),#0002。

内容padding左右4.2vw/底9vh，flex底对齐。eyebrow10px等宽/.34em；片名titleLines换行，500 clamp(2.6rem,6vw,5.4rem)/.92、字距−.02em、margin-top26。facts竖排gap8，9pxGeist/.3em，DIRECTOR和CATEGORY标签。左上festival left4.2vw,top5vh：年份24px斜体衬线、eyebrow9px/.3em；下方距28px显示❧ Award-Winning Reel ❧及★★★★★。右侧奖项right4.2vw,top50%,translateY−50%、纵排gap26/max160；按数据stars输出实星及空星共5个，15px/#f1e7d2；奖项名9px/.3em；引用16px斜体Playfair/1.25。description和stats在主海报隐藏。右下EXPLORE →胶囊right4.2vw,bottom5vh,padding17px32px、12px/.3em、细白边透明底。

右侧导航rail right2.8vw，垂直中央，间距16，4px普通点/6px当前点，可点击。品牌、hint、index视觉隐藏但更新。W<640时卡左右4vw、圆角28；content左右6vw/底10vh；标题12vw；奖项隐藏；festival left6vw；EXPLORE right6vw,bottom3vh,padding12px18px,10px；rail right1vw。

## 胶片模型

index0、offset0、target0、lastSettle0。goTo(i)：index=clamp(i,0,N−1)，target=−index×.85H，lastSettle=performance.now。非拖动每帧diff=target−offset；|diff|<.5则offset=target，否则offset+=.11diff。track translate3d(0,offset,0)，2位。

h=.85H；每slide的rel=i×h+offset+h/2−h/2，away=|rel|/h。away>2时content opacity0、blur16px，保留其他旧样式。否则shot translateY=−rel/1.2（2位），不能改成与轨道同速。

若i是当前index：t=clamp(1−away/.55)，opacity=t²(3−2t)，blur=(1−opacity)14，shift=(1−opacity)64×sign(rel或1)。其他项：t=max(0,1−max(0,away−.6)/.6)，opacity=.35t，blur=(1−t)10+4，shift=−.42rel。content opacity3位、filter blur两位、translateY两位。

## 输入与光标

滚轮阻止默认，距离lastSettle<420ms忽略，否则deltaY>0下一项，其他上一项。按下reel排除button，记录startY/startOffset，moved0，光标scale1.18。拖动dy=clientY−startY，moved=dy，offset=startOffset+dy，target=offset，1:1跟手。松开/cancel/离开时：|moved|>.85H×.18才翻页（向上下一项、向下上一项），否则回原index；使用goTo吸附，光标scale1。

方向下/PageDown/空格下一项，上/PageUp上一项，preventDefault；rail点击到对应索引。resize只重算当前target=−index×.85H。

自绘cursor直径74、fixed左上0、z90、无指针事件、白.35细边/白.06底/blur6；文字9px等宽/.2em。目标x/y初始0，跟随sx/sy初始0，每帧.22追随；alpha以.18追随inside?1:0。transform translate3d(sx,sy,0) translate(−50%,−50%) scale(scale)，位置1位、scale/alpha3位。拖动且过阈值显示Release，否则Pull；向下拖时上箭头opacity.8，向上拖时下箭头.8。进入/移动inside真，离开false并结束拖动。

当前index改变时更新两位计数和rail.on。初始GSAP.from第一项content opacity0/y40，delay.3,duration1.1,power3.out，关闭lagSmoothing；连续内容姿态仍归rAF。

## 影片详情

EXPLORE打开原生dialog.showModal：positionfixed，top/bottom10vh,right5.2vw,width min(520px,89.6vw),height80vh,padding35、圆角48、深棕黑半透明底、细白边、overflowauto；背景遮罩#0a090859与blur14。内部右浮动36px圆关闭钮、全宽圆角20图片、32px/1.1衬线片名、14px/1.7介绍，以及category/year/director/runtime/format/country。手机padding24、圆角28。关闭按钮、Escape、点击dialog外背景均关闭；图片与文字必须是点击的那一部。

## 验收

1440×1000与390×844：首屏、滚轮下一项、短拖动后回弹、超过18%步距的长拖动后翻页、rail回首项、EXPLORE及Escape。对照轨道/照片/文字/光标的transform、透明度与模糊，中间拉动状态显示Release。无控制台异常；卸载清理事件、rAF、tween、dialog。脚本 `rewrite/scripts/check-cinema-reel.mjs`；证据 `artifacts/rewrite-validation/cinema-reel/`。

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

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