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

独立实现 CSS 3D 书架，悬停抽书、点击转向并翻开封面，显示书籍与零售商面板。以本目录books.json全部12本数据为准，背景使用仓库 `hardback-gallery/assets/books-bg-day.png`，保持书本尺寸/颜色/顺序/资料/retailers链接。无需WebGL，不加载旧JS或iframe。拆分尺寸布局、单书姿态、DOM组件与面板控制。

## 页面与书本

全屏room，背景图center bottom/cover，perspective2200px、origin50%46%。文字#f3ecd8，正文Geist，衬线Cormorant Garamond，辅助Geist Mono。标题区top13vh、左右16px、居中黑棕#17130d；The与Hour斜体，标题The Reading Hour为500 clamp(42px,6.2vw,90px)/1.1、−.02em；副标题Twelve books on building, growing, and lasting — pulled from the shelf, the lamp’s on.，italic16px/1.5、opacity.65、margin24px0 32px。当前书提示11px/.25em大写、#a2632e。手机≤767标题top9vh、副标题max300/margin18auto、提示8px。shelf left50%,top65%（手机64%），preserve3d；木板与旧HUD隐藏。

unit46。每书脊宽w=depth×46×2，高h=height×46，封面宽d=width×46。书absolute/bottom0。spine为face，w×h，数据spineColor/spineTextColor，vertical-rl，padding14px0、flex两端对齐；标题13px/600 Cormorant，.06em大写；作者只显示最后一个单词，5px/600Geist。pages leftw,width d−8，top/bottom2，rotateY90°、左中为轴，纸色#efe7d4→#d9cfb8。cover leftw,widthd,heighth，背景/文字取coverColor/coverTextColor，左中为轴，初始rotateY90°，padding14px9px，flex两端分布作者5px、标题15px/600衬线、Hardback · n sellers 5px。所有face backface-visibilityhidden。

总书架宽sum(w+6)−6，书本x依次累加w+6；最高高maxh。scale=min(2.8,max(1.25,.43H/maxh))。W<767时focusOffset=−(第7本x+第7本d×.5−total×.5)scale，否则0。shelf transform translate(calc(−50% + focusOffset px),−50%) rotateX6deg scale(scale3位)，宽total、高maxh。resize重算。

## 运动与交互

初始hovered=6、opened=−1，每书hover/open标量0。每帧hover+=(i==hovered?1:0−当前hover)×.16，open以.1追随i==opened。使用清楚的括号实现目标减当前值。

opened≥0且不是本书时shift=sign(i−opened或1)×26；否则若hovered≥0，shift=sign(i−hovered)×32；否则0。z=26hover+360open，y=−8hover−10open，turn=30+60hover+32open，scale=1+.06open。书transform translate3d(x+shift,y,z) rotateY(−turn) scale(scale)，位置1位、角2位、scale3位；zIndex100+round(100open+10hover)，filter:none。封面rotateY=90−62open（2位），即翻开量保持当前CSS版本，不改成另一套角度。

pointerenter只在没有打开书时设置hovered；pointerleave若是该书则hovered=−1。点击已打开书关闭，否则打开该书并hovered=−1。当前小字只反映hovered书名·作者，否则Hover a spine · Click to open。初始GSAP.from书opacity0/y60，duration.9,stagger.05,power3.out，关闭lagSmoothing；持续姿态由单rAF负责。

## 面板

桌面right4vw,top50%,translateY−50%,width min(38vw,420px)，padding25、#211910eb底、blur20、圆角12、maxheight75vh、overflowauto；默认opacity0/pointereventsnone，is-open后1/auto。W≤900改左右5vw、底4vh、topauto、无transform；W≤767最大高43vh。

内容：编号 / 12 · Hardback 10px等宽/.24em；标题600 clamp(1.8rem,3vw,2.6rem)/1.05衬线；作者13px；synopsis13.5px/1.65；excerpt加引号、左细边、italic14px/1.6。retailers生成外链，target_blank,rel_noreferrer，左右显示name/price，细边圆角6。Back to shelf按钮关闭，Escape也关闭。打开panel从opacity0/x40到1/0，.5s power3.out。关闭清除内联opacity、移除class并取消旧面板tween，书本缓动回位。只呈现真实数据链接，不执行购买。

## 验收

1440×1000和390×844：初始第7本突出；悬停第6本后700ms、点击后1000ms、Escape后1300ms，比较全部书transform与封面角、shelf尺寸/变换、当前标签；再点第7本确认资料切换。核对零售商名称/价格/URL，不点击外链。当前脚本检查范围 `rewrite/scripts/check-hardback.mjs`，证据 `artifacts/rewrite-validation/hardback/`；清理rAF、事件和tween，无溢出/控制台错误。

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

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