Portfolio Photographer

移动的缩略图队列散开成一幅构图。
分类
构建提示词

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

独立实现32张缩略图无限巡游，在屏幕中部散成构图，再收回队列；桌面悬停有3D倾斜，点击进入大图查看器。素材顺序使用photos.json，缩略图URL为https://images.unsplash.com/photo-{id}?w=520&h=700&fit=crop&q=72&auto=format，大图900×1200/q80。不要读取旧JS或iframe。拆分纯队列模型、查看器和输入/渲染，静态素材及GSAP可复用。

背景#fafafa，1px #00000007横纵网格46×61px；文字#0a0a0a。Geist/Geist Mono和Playfair Display500/italic。缩略图230×305，内层3px圆角、无阴影、图片cover scale1.05；sheen为105deg渐变，38%透明/50%白.4/62%透明。介绍left56/bottom54/z35，标签10px/.24em；标题Every frame,/every story.为Playfair500 clamp(38px,4.5vw,64px)/1.1、−.02em、margin24 0 18，第二行斜体；正文14/1.7灰.65；Book a session黑胶囊和透明View archive，padding13 18；页脚11px、margin32。手机W<768：介绍左右24/bottom30，标题38、正文11、标签7/.1em、页脚8/margin18。介绍容器无鼠标事件但按钮有；Book a session保留原无动作状态。旧HUD/toggle隐藏。

rand(i)=fract(sin(i*127.1+311.7)*43758.5453)。每卡固定cx=2*(rand(i)−.5)、cy=2*(rand(i+99)−.5)、rotation=26*(rand(i+7)−.5)、size=2.4+1.9rand(i+33)、yBias=18*(rand(i+55)−.5)。offset0、velocity0、formation/target1。每帧非拖动时手机先限制velocity±7；offset连续执行+=velocity−.32、−=.32（实际基础漂移−.64/帧）；velocity乘桌面.94/手机.82。offset正模N*52，formation以.06追随target。

x=正模(52i−offset,N52)，若x>W+52则减N52；u=(x+23)/W；仅formation>0且.3<u<.8，s=sin((u−.3)/.5π)，scatter=s²*(3−2s)*formation，否则0。dx=cx*W*(手机.24/桌面.22)*scatter；dy=(手机.6cy−.45/桌面cy)*H*(手机.22/桌面.3)*scatter；rotation*=scatter，scale=.2*(1+(size−1)*scatter)。u<.55时e=1−u/.55、rise=−e²*(3−2e)*220，不限制e；否则rise0。px=x+23−115+dx，py=(手机.4H/桌面H/2)−152.5+yBias+dy+rise。translate位置1位、rotate2位、scale3位；z=1+round(30scatter)，opacity1。实际DOM中心最接近屏幕中心者更新隐藏计数。

滚轮取主轴delta*.12加velocity。按下舞台开始拖动、velocity0；移动offset−=dx，velocity=−dx，累计|dx|；松开/cancel且累计<6时点击卡进入查看器。非拖动桌面hover：以外卡包围盒求nx/ny=归一化坐标−.5，内层perspective520 rotateY(nx10) rotateX(−ny10)，角度2位，transition .08s linear；sheen opacity.5、translateX(nx60)%1位。其他卡/手机/查看器开启时重置倾斜，transition .5s cubic-bezier(.16,1,.3,1)，sheen0。View archive将formationTarget设0，隐藏toggle可往返0/1。

查看器z90，黑.94 scrim、blur6；图居中height78vh、aspect3/4、max-width80vw、4px圆角、shadow0 50px100−40黑.9。白色序号bottom7vh、10px mono/.3em；上一/下一46px圆按钮left/right4vw，关闭right4vw/top5vh。打开overlay opacity0→1 .3s，图scale.94/opacity0→1/1 .6s power3.out。左右按钮/箭头循环更新图，图opacity.4/x20d→1/0 .4s power3.out，同时offset+=52d。Escape/关闭/scrim使overlay淡出.25后隐藏。查看期间背景继续运动。页面入场GSAP.from所有缩略图opacity0/y40、1s、stagger.028、power4.out；清理事件、rAF、tween。

验收1440×1000和390×844：初始巡游、滚轮、拖动惯性、hover、打开、前后切图、关闭、View archive归队，比较32卡位置/角度/缩放/层级、高光、序号、大图状态。当前全部对照精确通过，脚本rewrite/scripts/check-portfolio-photographer.mjs，证据artifacts/rewrite-validation/portfolio-photographer/。远程图片需要联网。

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

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