动态
首先阅读 /hyperframes 技能（渲染合约），然后阅读 brand/DESIGN.md。生产目录是 templates/base/ 的副本。
基础
templates/base/index.html已包含：颜色变量、字体、3D 界面空间 (#world)、玻璃卡片、遮罩和圆点的样式。请保留这些类，不要重新发明样式。- 当影片超过 10 秒时，每个子合成放在
compositions/中（根目录只保留场景宿主、音频和背景世界）。 - GSAP 本地文件 (
assets/js/gsap.min.js)。绝对不要使用 CDN：渲染过程无需网络。 - 字体：使用
@font-face指向assets/fonts/。
运动（工作室参数）
| 动作 | 值 |
|---|---|
| 文本进入 | 从遮罩进入：yPercent 110 → 0，0.7 至 0.85 秒，expo.out，行间距 80 毫秒 |
| 文本离开 | yPercent 0 → -110，0.36 至 0.4 秒，power3.in |
| 玻璃卡片进入 | y +1250 → 0，1.1 秒，expo.out |
| 圆点 | y 26 → 0 + 不透明度，0.6 秒，expo.out，间距 70 毫秒 |
| 线条 | scaleX 0 → 1 从左到右，0.7 至 0.8 秒，expo.out |
| 界面空间 | 线性连续滚动，rotationX 56，rotationZ -20 |
| 玻璃反射 | 每部影片一次，1.3 秒，power2.inOut |
| 数字跳动 | 0.9 至 1.4 秒，power3.out，最终值四舍五入并保持不变 |
技术禁止：禁止动画 letter-spacing、width、top、left；禁止在 GSAP 动画的元素上使用 CSS transform；禁止对标题使用 filter: blur；禁止任何背景光晕或渐变（参见 DESIGN.md）。
真实界面
要展示应用程序，请使用真实截屏（对于像 mescentimes.cloud 这样的公开网站，执行 npx hyperframes capture <url> --json）或用 HTML 重建屏幕并填充真实可信的 FCFA 数据。严禁使用虚假客户标志。
检查并渲染
npx hyperframes check --json # 零错误
npx hyperframes snapshot --at <关键时间戳> # 检查每一帧
npx hyperframes render --output renders/<slug>.mp4
渲染后：在手机上提取 6 张图片（ffmpeg -ss T -i … -vf scale=540:-2）并在交付前仔细查看。