Aster

四面字母骰子让标题动起来。
分类
构建提示词

# Aster：给其他 Agent 的复现提示词

独立实现一个暗夜星空订阅页，HTML/CSS 3D + GSAP；可直接使用本目录 index.html 静态结构/样式及 ../../aster-gallery/assets/aster.webm，不读取旧 JS。Unbounded 300/400/500。完整保留模板渐变、SVG噪点、视频、文字与表单布局。

背景 #040611，sky全高、perspective1400，视频cover且on时1800ms ease-out透明度0→1，grain z3/opacity.07/overlay。stack桌面top230、<=767为180，左右24。标题 A field of quiet stars.，uppercase、500、line-height.95、clamp(1.3rem,8.5vw,70px)、word-spacing.05em、perspective800、>=768不折行。word间margin-left .28em，各word上下padding .18em。副文案margin28、13px/1.7、max28rem、白.55。表单margin26、宽min(450px,90vw)、gap8，input高46、圆999、白.06背景/.18边框、blur8，button46圆白底。note16上距、10px/.26em、白.3。

每个word含inner，每字一个die：隐藏ghost占位、另有3个完全同字face，分别rotateX(90/180/−90deg) translateZ(.5em)，face绝对定位覆盖die、backface:hidden。各word后（末词除外）添加空die占位，white-space:pre、data-letter，内容为空；这4个空die也参与stagger。die从rotateX0到−270，2.1秒power1.out、stagger .055，transformOrigin50%50%。正文/表单/note先opacity0/y24/blur8，分别delay .15+.12*i，以1秒power3.out到opacity1/y0/blur0。

标题视差：目标/平滑鼠标坐标初始(.5,.5)，mousemove按sky包围盒归一化，mouseleave归中；每帧smooth+=(target−smooth)*.05，head rotateX((sy−.5)*8) rotateY(−(sx−.5)*10)，3位小数。初始化立即渲染一次，再rAF。

video监听canplay/playing添加on；readyState>=2立即on，尝试play并忽略浏览器自动播放拒绝。required email输入，submit preventDefault；按钮idle才能发起本地演示，发送中spinner18×18、stroke2.2、path M21 12a9 9 0 1 1-6.219-8.56，旋转.9秒linear infinite。900ms后sent，底色#9ad7a8、check16×16/stroke2.4/path M5 12.5 10 17l9-10，dasharray24/offset0/transition520ms cubic-bezier(.65,0,.35,1) delay60ms。无后端请求。清理计时器、事件、rAF与tweens。

验收桌面1440×1000、手机390×844：600ms/4000ms字母入场、鼠标(.8W,.2H)640ms视差、离开1600ms回正、发送400ms与1000ms状态。视频测试固定到.5秒暂停后截图（实际页面正常循环）。运行 ../scripts/check-aster.mjs，骰子姿态、宽度、标题倾斜、内容入场及表单状态对照一致。

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

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