# Z5 剪纸

- 分类：Z 中国风 · 中国风
- 长什么样：红纸镂空，民间纹样 / Chinese paper cutting

## 风格提示词

> 这一条的提示词是重新写过的详细版：画面规则、颜色、时间轴都写死了，DeepSeek 和 Opus 5.5 都能直接用。{{ }} 里是要你自己填的内容。

你是一位前端动效工程师。请写**一个完整的 index.html 文件**：只用原生 HTML + JavaScript + Canvas，不要任何外部库、字体文件或图片。做一段"中国剪纸"风格的动画：红纸对折剪出来的圆形镂空窗花，一层层叠在窗户纸上，有投影。

## 内容

- 主题：{{主题，例：新人的片头}}
- 总时长：{{秒，默认 12}}
- 中心要镂出的字：{{默认"囍"}}

## 输出要求（必须照做）

1. 只输出一个 html 代码块，不要解释。代码必须完整可运行：不要用省略号，不要写"其余同上""此处略"。
2. canvas 固定 1920×1080，用 CSS 等比缩放居中，多出来的部分是黑边。
3. 所有画面由函数 `draw(t)` 决定（`t` 是秒）。不要用 `Math.random`；需要随机就用带种子的 mulberry32(seed)，同一个 `t` 每次画出来都一样。
4. 默认循环播放；空格暂停/继续；网址带 `?t=5` 时只显示第 5 秒那一帧。

## 颜色

窗户纸 #F1E8D4；主红 #C8102E；深红 #8F0B22。除这三色外不要别的颜色，不要金色、渐变、高光。

## 怎么画（照这个步骤）

1. **窗户纸**：用 #F1E8D4 铺满，再用带种子的随机画 2000 条长 8–34px 的细短线（一半 #B9A98A、一半 #FFFAF0，透明度 0.05–0.11）当纸纤维。这一层只画一次，放进离屏 canvas 缓存。
2. **造两张红纸**（各用一个离屏 canvas，大小 1920×1080，坐标原点移到画面中心）：
   - `layerBase`：深红 #8F0B22 的圆盘，半径 452；用 `destination-out` 挖外缘 48 个半径 10 的小孔（放在半径 428 处），再挖掉半径 400 以内的整个圆（只留一圈深红边）。
   - `layerTop`：亮红 #C8102E 的圆盘，半径 404；用 `destination-out` 挖下面这些，**每一圈都是"画 1/N，旋转复制 N 份"**：
     - 外缘 48 个小孔：半径 9，放在 r=378；
     - 24 个小水滴：从 r=342 到 r=274，宽 22；
     - 12 片大花瓣：从 r=244 到 r=74，宽 50；
     - 12 个小菱形：每个先转 π/12，中心在 r=226，宽 32 高 48；
     - 12 个小圆点：每个先转 π/12，半径 12，放在 r=170；
     - 12 片内圈花瓣：从 r=78 到 r=148，宽 26；
     - 再挖掉半径 66 的中心圆；然后用亮红在中心补一个半径 46 的小盘；最后用 `destination-out` 在小盘上写中心的字（粗体 66px，居中）。
   - 花瓣之间必须留红色的"桥"，不要把红纸挖断。
3. **四个角花**：用另一个离屏 canvas 画一块"四分之一圆"（半径 250，圆心在画面角上）的亮红，挖：9 个沿弧边的小孔（半径 7）、4 片水滴、一个半径 58 的圆窗。复制到四个角（翻转）。
4. **合成**：先画窗户纸；再把 `layerBase`、`layerTop`、四个角花依次画上去，每一层画之前设置投影：`shadowColor='rgba(70,12,12,0.38)'`，`shadowBlur=16`，`shadowOffsetX=5`，`shadowOffsetY=9`。

水滴形的路径可以直接用这个函数（原点在窗花中心，y 轴向上为负）：

```js
function drop(g, y0, y1, w) {
  const d = y0 - y1;
  g.beginPath(); g.moveTo(0, y0);
  g.bezierCurveTo(w, y0 - d * .25, w * .9, y1 + d * .35, 0, y1);
  g.bezierCurveTo(-w * .9, y1 + d * .35, -w, y0 - d * .25, 0, y0);
  g.fill();
}
function ring(g, n, fn) { for (let i = 0; i < n; i++) { g.save(); g.rotate(i * Math.PI * 2 / n); fn(g, i); g.restore(); } }
```

## 动起来

- 0–0.8 秒：深红底盘从半径 0 展开到满（ease-out）；0.25 秒后亮红主盘同样展开。
- 1.2–4 秒：镂空由外向内一圈圈"打开"（每个孔的半径从 0 长到目标值，每圈晚 0.18 秒，每个孔 0.35 秒）；因为孔是挖出来的，所以实现时把"孔的半径 × 进度"传给上面的挖孔步骤，每帧重新生成 `layerTop`（可以缓存已经完成的圈）。
- 4–4.4 秒：中心的字"盖章"：缩放 1.15 → 1.0。
- 之后整张窗花以 ±0.6° 缓慢摆动（周期 6 秒），影子偏移跟着变 ±2px。
- 最后一秒保持静止，然后循环。

## 不要

金色、渐变、塑料高光、3D、粒子、发光、过重的阴影、把字写在纸上（必须是镂出来的）。

## 写完后自己过一遍（不要输出）

- 镂空是 `destination-out` 挖的，不是用底色盖的吗？
- 12 份是否完全对称？
- 所有影子是否都向右下？
- 同一个 `t` 刷新两次，画面是否一模一样？