Cutout

切开字母，露出下面的照片。
分类
构建提示词

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

用 Canvas 2D + GSAP 独立实现俯拍剪纸摄影桌：五张情绪文字纸卡，点击后刀路沿字形切割，照片在文字里显影，再展开为10张照片小样。保留本目录 index.html 静态样式、config.json 与 moods.json 的全部数据；素材 ../../cutout-gallery/assets/，不能替换照片、道具、调色配方、标题或注释。不要读取旧 JavaScript；实现材料生成、布局、绘制、阶段状态和输入几个独立模块。

## 桌面与布局
Archivo Black 与 JetBrains Mono 400/500，等待字体和初始素材加载。全屏背景 #E7DFCE，Canvas DPR=min(devicePixelRatio,2)，像素尺寸四舍五入。pad=.03*min(W,H)，切割垫矩形(pad,pad,W−2pad,H−2pad)，圆角10，垫图透明度.85。网格步长max(26,mat.w/34)，每5格加重，线位置round+.5；文字/配色/道具坐标取config.json，道具宽W*spec.w、高按素材比例、坐标按mat归一化、旋转角度换弧度，阴影blur24/Y10。W<760使用CARDS_NARROW，否则WIDE。卡宽mat.w*k，中心由数据决定；hover升高6、阴影blur18→34/Y8→16。卡片备注字号max(8,.035卡宽)。底部提示10px/.28em；右上Back，仅非mat状态显示。

初始标题 HOW SHOULD、YOUR PHOTOS、feel?、PICK ONE — THE CUT DOES THE REST。位置依次为mat归一化(.045,.065)、(.04,.18)、(.44,.28)、(.115,.365)。两块纸标题旋转−.028/.096弧度；字号分别mat.w*(窄屏.1/宽屏.055)、*(.085/.047)，纸边距8、高1.26字号。其余标题10左右的等宽字体。

选中词纸宽min(mat.w*(窄屏.9/宽屏.82),W*.86)。10帧排5×2，boxW=.86mat.w、gap=.022boxW、cw=(boxW−4gap)/5、ch=.72cw，整体垂直中心mat.y+.56mat.h。词中心y=mat.y+mat.h*mix(.46,.22,cubic(morph))，居中x。cubic为三次in-out。

## 纸张与照片材料
先以100px字体测量，最终字尺寸=(纸宽−2*.085纸宽)/测量advance*100；测量每个字宽、actualBoundingBoxAscent/Descent（fallback .72/.04字号）。纸高=asc+desc+2pad，基线=纸高/2+asc/2。纸圆角min(4,.05高)。实体卡 bold/raw 用白字，其余深色#241f19。镂空纸逐字先描rgba(0,0,0,.34)、线宽max(2,.03字号)，destination-out挖字，再source-atop加黑.55内阴影，blur=max(3,.075字号)。

字形缓存键 字符@round字号；在ceil(1.2s)×ceil(1.6s)离屏画布、基线1.15s绘字，按step=max(1,round(s/90))逐行扫描alpha>128，连续区间合成Path2D矩形，y减1.15s。必须保留此栅格化路径，不能用不同描边近似。

照片最长宽1100，等比缩小、尺寸round至少2。先用 mood.grade.filter 绘制，再以castAlpha填cast颜色。径向暗角从中心.28*min尺寸到.72*max尺寸，外色rgba(8,6,4,vignette)，此时仍保持castAlpha。颗粒LCG初始7919*src.length+画布宽，透明度.5*grain，共w*h*.012颗，白252/244或深10/8/6、alpha.5、1.2px方块。随机序列/调用次序要稳定。调色结果按mood/src缓存。

## 显影、展开与时间线
状态 phase=mat,mood=−1,hoverCard/hoverFrame=−1,cut/morph/roll/hero/pencil=0,dev[10]=0。选择只在mat有效；构建镂空材料并等待该情绪照片全部调色，再开始GSAP：cut→1，1.1秒power1.inOut；结束设phase=word；10个dev从0→1，1.25秒power2.out、stagger .085，起点前一步结束−.55；morph→1，1.3秒power3.inOut、前一步结束+.12，开始设phase=sheet；roll→1，1秒power2.out，前一步结束−.65；hero→1，.9秒power3.out，−.5；pencil→1，.75秒power2.out，−.3。hero保留状态但没有额外画面效果。

照片i对应字母i%词长，矩形从字母包围盒插值到小样格，插值权重cubic(morph)。morph<.999时按插值矩形缩放字形路径做clip，alpha=dev*(1−morph)，cover照片；morph>.001时另画纸框/照片，alpha=dev*morph，hover框缩放1.03（仅sheet阶段）、阴影blur26/Y10，普通14/Y5。纸框圆角2。上方词纸alpha=1−.9morph、阴影26/Y12*(1−morph)。精选项roll>0时用2px铅笔线画外扩4px/半径3框。注释alpha=pencil*.8、字号max(7,.055框宽)、第一行序号+标题，下一行place·year。

cut在0和1之间：done=cut*词长，按字母依次从左到右clip描字，白.85、1.2px、dash[6,5]、offset=−t*40。剪刀位于当前字符进度x、字顶−6，rotate−.25/scale.42，路径 M8 4 L8 66 L22 53 L32 78 L46 72 L36 48 L56 47 Z，填#EFEAE0、描#141414/5px圆连接。

展开后情绪标题alpha=clamp((morph−.2)/.5)，11px等宽/.26em、y=.33mat.h；说明13px、alpha*.68、y=.38mat.h、最大宽.52mat.w、行高20。hover小样时底部标题28px Archivo/y=.93mat.h，元信息11px/.2em/alpha.6/y=.96mat.h。

## 输入和验收
卡片命中先逆旋转坐标，小样矩形命中；pointermove更新hover/cursor，leave清空。mat点卡进入；sheet点空白、Back、Escape退出：kill旧时间线，cut/morph/roll/hero/pencil→0，.5秒power2.inOut，结束mood=−1/phase=mat/hoverFrame=−1。保留每帧绘制顺序：桌垫、道具、卡片或工作区；道具alpha从1随morph到.25。清理事件、rAF与tweens。

固定字体、图片、DPR和16ms时间步；1440×1000、390×844分别验证5组情绪：初始、hover、cut500ms、word1500ms、morph3200ms、sheet6000ms、首小样hover、Escape800ms。照片预处理结束之后才推进时间。运行 ../scripts/check-cutout.mjs，当前这些状态的Canvas像素逐一一致。

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

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