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

请独立实现一页 Revolver 企业信用卡展示：左侧营销文案，右侧六张金属卡沿看不见的竖直轮盘循环翻转。保留下列布局、照片、插值、交互、时间值。不得调用旧案例JS或iframe；将关键帧数学、运动状态、DOM渲染、输入分离，持续动画由单一rAF拥有。GSAP只做标签和入场淡入。

## 素材与页面

本目录 cards.json 按 DARK / WHITE / BLUE / GREEN / GRAY / PINK 顺序提供卡面img、背景bg、accent、blend及name/line文字。图片相对本目录解析，保持同一素材，object-fit:fill。正面15px圆角、无阴影；反面相同渐变底、top18%/height22%的黑.72磁条、left7%/right32%/bottom22%/height13%白.82签名条、右9%底23%的•••。背面rotateX180°，双面都backface-visibility:hidden，根据朝向手动切可见性。

全屏背景#f4f2f0，在71% 50%处加55%×70%的深色.07径向阴影。正文Bricolage Grotesque，辅助Geist，计数/提示Geist Mono。桌面hero left clamp(28px,14.3vw,272px),width min(37vw,700px),垂直居中。标题三行 A corporate card / designed for / modern finance.，500 clamp(2.4rem,4.45vw,64px)/1，opsz14。介绍 Save money and time. All with one corporate card.，margin-top32px,max-width min(24vw,360px),16…20px/1.3,opacity.6。表单margin-top32px,max470，浅底细边圆角12；邮件框58px高，按钮51px高、#e4f222，文字Get started for free。保持展示表单，没有新增提交服务。

wheel left38%,right/top/bottom0，perspective-origin50% 44%；card居中。标签与计数在hero左对齐、底部约10svh：名称13px/600/.22em，副标题12px；计数位于标签上48px。右侧竖排六点，6px普通点，当前点高22px圆角3。底26px中央胶囊提示Scroll · Drag · Tap。

≤767px：hero左右24px,top=max(128px,15svh),居中，标题clamp(2.1rem,8.6vw,2.9rem)，隐藏介绍；表单纵排、间隙6px、输入与按钮50px高。wheel inset36% 0 0、overflowhidden、顶端透明至14%不透明遮罩。标签left38,bottom94，计数bottom144；dots right16,top68%。

## 关键帧数学

卡位position初始0。relative(i,position)先将i−position正模6，再将≥3的值减6，范围[−3,3)。以下表每列对应relative −3,−2,−1,0,1,2,3：

|量|7个采样值|
|---|---|
|y|−.72,−.56,−.28,0,.34,.58,.74|
|z|−200,−150,−70,0,50,120,160|
|rotateX|−230,−195,−100,5,95,200,235|
|rotateZ|0,−1.5,−3,−4,−6.5,−2.5,0|
|scale|.9,.93,.97,1,1,1.03,1.04|
|opacity|0,1,1,1,1,1,0|
|veil|.5,.34,.14,0,.16,.28,.5|

浮点索引u=relative+3，j=clamp(floor(u),0,5)，f=u−j。取p0=table[max(0,j−1)],p1=table[j],p2=table[j+1],p3=table[min(6,j+2)]。Catmull-Rom=.5×(2p1+(−p0+p2)f+(2p0−5p1+4p2−p3)f²+(−p0+3p1−3p2+p3)f³)。不要用线性或CSS关键帧代替。

设wheel实际高度H；桌面卡宽C=clamp(.52×wheel宽,280,410)，透视P1500，spread1；窄屏C=clamp(.78×视口宽,240,340)，P1100，spread.78。DOM卡宽round(C)，高round(C/1.586)；数学仍用未取整C。逐卡固定X偏移[6,−8,4,−5,8,−4]，固定Z角偏移[.8,−1.2,1.5,−.6,1.1,−1.4]。

clock=.001×rAF时间；near=max(0,1−1.8|relative|)。bob=3.5sin(1.1clock+1.7i)×(1−.4min(1,|relative|))。y=样条y×H×spread+bob；z=样条z×C/380；rx=样条rx−4.5pointerSY×near；ry=7pointerSX×near；rz=样条rz+逐卡偏移；scale=样条scale；opacity=clamp(样条opacity)，>.93时设1；veil=clamp(样条veil)。transform顺序translate(-50%,-50%) translate3d(X,y,z) rotateX(rx) rotateY(ry) rotateZ(rz) scale(scale)。位置/角2位、scale4位、opacity3位。z-index1000+round(z)，opacity<.015整卡隐藏。

正反面判断不能只看rx：a=rx弧度，b=ry弧度，facing=−sin(b)×X−sin(a)cos(b)×(−.06H−y)+cos(a)cos(b)×(P−z)>0。前面朝向且整卡未隐藏时显示face，否则显示back。

指针在stage中的x/y归一到[−.5,.5]。sx/sy每帧追随目标，follow=min(1,7dt)，dt=min((now−last)/1000,1/30)。离开目标回0。sheen采用100°白条带、background-size240%100%，blend取数据；场内sweep=50−30sx，场外=50+26sin(.5clock)，背景位置sweep% 50%，opacity=near×(场内?.5:.3)。

## 输入、吸附与自动播放

glide保存from/to/start，持续900ms，t=min(1,(now−start)/900)，position=from+(to−from)×(t≥1?1:1−2^(−10t))，结束精确落到to。select(index)使用基线方向约定：to=round(position−relative(index,round(position)))。按钮与键盘选择都沿此规则，不能擅自翻转方向。

滚轮阻止默认，取消glide，position+=deltaY×.0032；最后一次滚轮140ms后glide到round(position)。按下（排除hero与dots）保存startY/startPosition/lastY/lastTime，取消glide、速度0、捕获指针。拖动position=startPosition−(clientY−startY)/190；累计位移>4标记moved。每次有效dt>0时velocity=.5velocity+.5×(−dy/dt×16/190×60)。释放或取消：有拖动则目标round(position+.14velocity)，否则round(position+1)，启动glide。拖动时使用grabbing。

stage方向键右/下 select(round(position+1))，左/上 select(round(position−1))；输入框与按钮内的键盘不触发；点击dot用其索引。按下与stage键盘更新interactedAt。非reduced-motion、页面可见、不拖动且无glide，距interactedAt>3800ms且距上次自动开始>3400ms时select(round(position)+1)，更新autoAt。初始两时间为启动时刻。|position|>600时减去round(position/6)×6，并同步所有glide/drag起点。

当前项=正模(round(position),6)，只在变化时更新标签、计数、dots；标签从opacity0/y14到1/0，.45s power3.out。启动GSAP卡片opacity0,y80，1.1s power3.out，每张错开.06；连续几何仍归rAF。初始聚焦stage，GSAP关闭lagSmoothing。

## 验收

1440×1000与390×844，使用同一个受控时钟验证初始、指针视差、滚轮180、方向键、dot3、垂直拖动、空闲自动播放；检查每张卡transform/opacity、veil、sheen和正反面可见性。手机表单不应触发拖动，无遮挡溢出或控制台异常。页面离开释放事件、定时器、rAF与GSAP动画。验证脚本 `rewrite/scripts/check-revolver.mjs`，证据 `artifacts/rewrite-validation/revolver/`。

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

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