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

独立实现 Folio 杂志式作品索引：标题列表和照片列共享一个浮点索引，但以各自行高同步移动，当前作品在两栏焦点对齐；可无限循环、停止后吸附。使用本目录works.json全部title/client/discipline/imageId/imagePosition/summary，保持顺序。照片URL为 `https://images.unsplash.com/photo-{imageId}?w=900&q=80&auto=format&fit=crop`，object-position取imagePosition。不加载旧JS或iframe；拆分运动模型、强调样式函数、DOM渲染与输入。

## 页面

全屏#fafafa底、#0a0a0a字，正文Geist、标签Geist Mono。桌面stage为两列1fr1fr；titles高100vh、overflowvisible、z2，track left64,right0,top0；row横排居中对齐、gap20、nowrap；标题4.2vh/1.1、字距−.035em，meta9px/.2em、maxwidth220/overflowhidden。照片区域高100vh/overflowhidden，cell居中；figure高60vh、宽48vh、maxwidth90%、圆角16、无阴影；img cover。右上计数right48,top42、10px等宽/.22em/opacity.5。brand/hint/midline/summary节点存在但隐藏。

≤767px：stage改block；titles绝对上半屏高50vh、overflowhidden，track left24，标题2.5vh、meta7px；shots绝对下半屏，figure高38vh、宽30.4vh；计数right18,top20。注意768…860区间保留基线的一列grid规则和可见titles，不自行改为新的响应式排版。

## 列表与同步位置

把完整作品数组重复3遍，实际从中间一遍开始。N为原数组长度，target=index=N。标题行高slot=H×(W<768?10:80/9)/100；图片行高pitch=H×(W<768?42:65)/100；CSS变量用于每row/cell高度。resize重算。

每帧不拖动且距lastInput>90ms，则target=round(target)。index+=(target−index)×.14；差值<.0005时精确落到target。index<N/2时循环加N，同时target加N；index≥1.5N时循环减N，同时target减N，保证始终处于中间一轮，不出现空白。

titleTrack translateY=H×(W<768?.45:.5)−(index+.5)slot；shotTrack translateY=H×(W<768?.19:.5)−(index+.5)pitch；使用translate3d(0,y,0)，y保留2位。这是手机上方文字与下方图片各自对齐焦点的关键。

## 强调与衰减

对于三轮展开后的第i项，away=|i−index|。

- away<1，t=1−away：图片opacity=.78+.22t，scale=.93+.07t。
- 1≤away<2，t=2−away：opacity=.18+(.78−.18)t，scale=.84+(.93−.84)t。
- away≥2：opacity.18、scale.84。

图片opacity保留3位、scale4位。标题strength=max(0,1−2away)，metaStrength=max(0,1−.55away)。h2颜色 `color-mix(in srgb,var(--foreground) {100strength一位}%,rgba(10,10,10,.4))`；字重strength>.5时600，否则400。meta opacity=strength，颜色以45metaStrength%在foreground和rgba(20,19,15,.12)之间混合。

当前作品=正模(round(index),N)，变化时更新两位计数和隐藏summary；summary动画opacity0/y10→.6/0，.5s power3.out,overwriteauto。初始图片GSAP.from opacity0,y40，.9s power3.out、stagger.05，关闭lagSmoothing，持续transform仍归单一rAF。

## 输入与验收

滚轮阻止默认，target+=deltaY×.0016，更新lastInput=performance.now。按下保存lastY并捕获指针；拖动target−=dy×.004，更新lastY/lastInput；松开/cancel结束grabbing并更新lastInput。下键target+1，上键−1，都更新lastInput。初始lastInput0。

在1440×1000和390×844，比对初始4800ms、下键后900ms、滚轮850后900ms、向上拖动、滚轮30000跨多轮后的标题/图片位置、颜色、缩放和计数。两栏始终同步，循环无露底、无横向溢出或控制台异常。当前实现全部上述状态通过精确对照。离开页面清理事件/rAF/tween，后台暂停绘制。脚本 `rewrite/scripts/check-folio.mjs`；证据 `artifacts/rewrite-validation/folio/`。

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

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