# Crema：可直接交给另一位 Agent 的复现提示词

实现一个可本地运行的咖啡 App 展示页，独立组织状态和渲染，保持当前画面和操作。使用 HTML/CSS、GSAP 和 requestAnimationFrame。可复用本目录 index.html 的静态样式/结构及 screens.json 的三组静态界面、道具坐标；不要读取旧案例 JavaScript。素材路径 ../../crema-gallery/assets/，保留全部图片和字体。实际是一台手机，旋转中途切换三种界面。

## 视觉
背景 crema-bg.png，奶油色 #F2EDE2、墨绿 #0E1F1A、绿色 #006241、金色 #C9A961。Fraunces 400/800 与 Inter 400/600/700/800。左文案 Your / coffee, / fast.，字号 clamp(70px,8.5vw,122px)、行高 .92、普通字重，正文 15px/1.65、宽430。保留评分、应用商店徽章、三颗指示点。手机 300×620，圆角44，前后面 Z=±7，背面 rotateY(180deg)，三枚镜头。舞台透视1400、原点62% 50%，rig 缩放 .74。<=900 缩放 .6、舞台 top35%；<=767 文案左右24/top64，标题60，舞台top72%/bottom−28%，rig .72。完整 CSS 以本目录静态模板为准，包括界面内排版、阴影和断点。

## 模型与时间
状态 angle=452,target=0,restClock=−.5,midflips=0,entered=false,dragging=false,current=0。入场 GSAP angle→0，2.1秒 power3.out；完成 entered=true,target=0,midflips=0,restClock=−1.4。文案各子元素从 opacity0/y26 到原位，.9秒、stagger .09、power3.out、delay .2。

每帧 dt 首帧 .016，之后 min(.05,秒差)。entered 且未拖动时，k=1−.5^(dt/(1.75/7))，角差>.5 时 angle+=(target−angle)*k；否则角度吸附目标并累计 restClock，>=2.6秒 target−=360、restClock=0。flips=floor(−angle/360+.5)，变化时 current=正模(current+flips−midflips,3)，更新静态屏幕 HTML 与 dots，并存 midflips。

rig rotateY(angle，2位小数)。cos=cos(angle*π/180)，facing=max(0,cos)，peekVis=clamp(cos/.309,0,1)。每件 props 的 s=facing*(所属屏幕===current)，transform=translate3d(x−size/2,y−size/2,z) rotate(rot) scale(.35+.65s)，scale/opacity 保留3位；opacity=s，宽高size，z-index=10+layer。peek 的 v=peekVis*所属屏幕开关，translate3d((x??0)−(width??232)/2,y??290,z??130)、rotate(rot??0)、scale(.86+.14v)，opacity=v，3位。手机 brightness(.82+.18*abs(cos))，3位。

舞台 pointerdown 记录鼠标x和起始angle，设置拖动类及 pointer capture；move angle=起始angle+(x−起始x)*.55；up/cancel 停止拖动，target=round(angle/360)*360、restClock=0。不要改变入场时拖动与 tween 的原有叠加。界面按钮/徽章仅展示，不连接订购服务。清理事件、帧循环和 tweens。

## 验收
1440×1000 与390×844，固定时间每16ms一帧，检查600ms入场、2600ms正面、继续4300/2000/6500ms的翻转换屏，以及向右180px、向左300px拖动和3000ms吸附；比较所有道具/peek位置透明度、屏幕标题、文案动画、指示点、手机亮度。运行 ../scripts/check-crema.mjs。现有验证上述状态全部一致。

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

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