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

独立实现画作电商动效：初始完整扇形画作，滚动收成弧形传送带，后段出现房间预览和评价；点击画作旋转360°并打开商品面板。读取本目录art.json，保持图片/商品文案/尺寸/材质/价格/edition/testimonial。使用仓库picasso-gallery/assets/wall-bg.jpg和wall-bg-dark.jpg作背景。禁止旧JS和iframe；数据、几何模型、交互、面板分离，单rAF渲染持续状态。

## 页面

浅色#f5f1ea，背景wall-bg.jpg中心cover，不再叠白色遮罩；文字#0a0a0a。Geist正文，Playfair Display标题，Geist Mono辅助。stage全屏overflowhidden/touch-actionnone；deck全屏z10/perspective900。画作圆角16、无阴影、cover；badge隐藏；tag位于画下34px、居中10px等宽/.18em。

intro top16.5%,宽90vw，居中，两行Every brushstroke / deserves a gallery.，700 clamp(32px,4.5vw,64px)/1.08。底部CTA top76.5%，左右16：说明Original paintings and limited edition prints — curated with care, / delivered to your door.，14px/1.5；View Collection黑色胶囊、Commission a Piece透明细边胶囊，padding11px24px；下方10px评分/收藏国家/包邮文案。手机≤767 intro top25%,标题32；CTA top66%，说明12px、按钮12px/padding9px12px、小字9px。HUD/进度轨迹视觉隐藏但保留状态。

卡宽w=clamp(.18W,126,252)，高h=w×4/3，CSS宽高round、数学保留小数。

## 进度与画作公式

progress/target/belt/beltTarget初始0，selected−1。每帧progress以.1追随target，belt以.1追随beltTarget。smooth(t)=t²(3−2t)。blend=smooth(clamp((progress−.176)/(.62−.176)))，travel=clamp((progress−.22)/.4)×(N−1)+belt。初始已经扇形展开，fan固定1，不重做成收叠入场。

i的f=i−(N−1)/2，rel=i−travel，away=|rel|。x=mix(f×W×.09,rel×W×.34,blend)，y=mix(f²H×.011,rel²H×.1×.18,blend)，rot=mix(f×9,rel×5,blend)，scale=mix(1,max(.6,1−away×.12),blend)，opacity=mix(1,clamp(1.4−away×.42),blend)。选中本卡时x=−.12W,y0,rot0,scale1.45,opacity1；其他卡在有选择时opacity乘.25。

外层translate3d(W/2+x−w/2,.52H+y−h/2,0)，位置1位；opacity3位；z-index100−round(away×10)+(选中?100:0)。内部flip transform rotate(rot2位) rotateY(spin1位) scale(scale3位)。tag opacity=blend×clamp(1−away)×(未选中任何卡?1:0)，2位。点击卡spin从0→360，.7s power2.inOut，完成保持360。

intro opacity=1−smooth(clamp(progress/.198))，3位，CTA同步且progress<.1时pointereventsauto否则none；intro y=−40smooth(clamp(progress/.22))，1位。roomIn=clamp((progress−.62)/.12)×(1−clamp((progress−.92)/.08))，rooms opacity未选择?roomIn:0，translateY=(1−roomIn)30。

房间预览right4vw,bottom12vh,width min(30vw,320px)，dark背景中画作left50%,top42%,translate−50%,width42%，带细白画框阴影；caption In the room · 当前画作sizes[1]。当前画作取clamp(round(travel),0,N−1)，仅索引变化且没选择时换图。

awardIn=clamp((progress−.82)/.1)，未选择时为awards透明度。>.2时评价索引clamp(floor((progress−.82)/(.18/N)),0,N−1)，显示带引号testimonial（为空则Beautifully printed — the colour holds up in daylight.）和On 标题。评价变更y18→0 .5s power3.out；评价在底14vh中央,max640、衬线斜体。隐藏进度scaleX=progress4位。

## 输入与商品面板

滚轮阻止默认，有选择时忽略；.22<progress<.61且横向轴更大时beltTarget+=deltaX×.004，否则target+=deltaY×.00042并clamp0…1。按下排除panel，保存lastY；拖动target−=dy×.0016并clamp，松开/取消结束。View Collection设target=.3。画作click打开对应面板；背景click和Escape关闭。

面板右侧占满高度，width min(92vw,420px)，padding34px30px，浅米白.97底、左细边，初始translateX100%。打开x→0 .55s power3.out，关闭x→100% .4s power3.in。title/artist/description/medium/badge/edition/testimonial按数据，标题500 clamp(1.7rem,3vw,2.3rem)/1.05衬线。sizes/materials各自一组胶囊，初始第一个aria-pressedtrue，点击互斥选择；价格固定取数据，不虚构变价。Add to cart只递增本页内存计数，更新隐藏Cart · n；不调用购买服务。手机面板overflowauto。Commission按钮沿当前页面既有点击冒泡规则调用首件选择，背景关闭规则保持一致。

初始卡片GSAP.from opacity0/y50，.9s power3.out,stagger.06，关闭lagSmoothing；清理所有事件/rAF/tween。

## 验收

1440×1000、390×844：初始、View Collection、横滚180、竖滚1000的房间、再600的评价；点击第2幅画、spin完成、尺寸/材质互斥、添加计数、Escape关闭。比较画作外层与flip变换、透明度、房间图/说明、评价/商品内容。只验证内存购物交互，不执行付款。脚本 `rewrite/scripts/check-picasso-ecommerce.mjs`，证据 `artifacts/rewrite-validation/picasso-ecommerce/`。

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

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