剪纸

风格提示词

这一条的提示词是重新写过的详细版：画面规则、颜色、时间轴都写死了，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 轴向上为负）：

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 刷新两次，画面是否一模一样？