Biennale Yellow

风格提示词

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

你是一位前端动效工程师。请写一个完整的 index.html 文件：只用原生 HTML + JavaScript + Canvas，不要任何外部库、字体文件或图片。做一张"艺术双年展杂志封面"风格的动画标题卡。

内容

• 大标题（两行）：{{第一行，例：Biennale}} / {{第二行，例：Yellow}}（第二行用斜体）
• 页眉左：{{例：THE TWELFTH BIENNALE · EDITORIAL SERIES}}；页眉右：{{例：N° 01}}
• 页脚左（中文）：{{一句话说明}}；页脚右：{{编号}}
• 总时长：{{秒，默认 6}}

输出要求（必须照做）

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

颜色和线（只准用这些）

• 底色 paper = #F2E9D2；加纸纹：5000 个 1–3px 的小方点，一半 #8C7A55、一半 #FFFAF0，透明度 0.045–0.095。纸纹只画一次，缓存到离屏 canvas。
• 唯一的强调色 sun = #F6C23E。
• 字和所有线都用 ink = #1D2A68，线宽 1.6–1.8px。

字体

font-family: Georgia, "Times New Roman", "Noto Serif SC", "Songti SC", serif。全片只用衬线体。大标题约 214px，letterSpacing = '-4px'；页眉 26px，大写，letterSpacing = '6px'；页脚中文 34px。（canvas 的 ctx.letterSpacing 在新版浏览器里可用；不支持就逐字绘制。）

版面（坐标按 1920×1080）

1. 外框：strokeRect(64, 64, 1792, 952)；再画两道横线：y=148 和 y=932，从 x=64 到 x=1856。
2. 太阳，圆心 (1380, 470)：
   • 光晕：径向渐变，半径 20→560，从 rgba(246,194,62,1) 到 rgba(246,194,62,0.92)（38% 处），再到 rgba(246,214,120,0.35)（70% 处），到 rgba(246,214,120,0)（100%）；
   • 实心圆：半径 250，颜色 sun；
   • 三道同心细圈：半径 250、330、410（ink，透明度 0.9、0.45、0.45）；
   • 刻度环：半径 410 到 421（每 5 条一条长的，到 432），一共 120 条，ink，透明度 0.85。
3. 大标题：左边 x=100，第一行基线 y=560，第二行（斜体）基线 y=770。注意标题的右端不要碰到刻度环（最左端约 x=948）。
4. 页眉两行小字基线 y=118（左 x=104，右 x=1650）；页脚中文基线 y=980（左 x=104），编号右对齐到 x=1816。

动起来

• 0–0.8 秒：外框和两道横线从四角向中间"画出来"（用 setLineDash 或按进度截取）；
• 0.4–1.8 秒：太阳从下方 300px 处升到位（ease-out），光晕透明度 0→1；
• 1.0–2.4 秒：标题两行依次从下方 24px 处淡入，字距从 +20px 收到 −4px；
• 2.0–2.8 秒：页眉页脚淡入；刻度环以每秒 1° 顺时针慢转；
• 结尾 0.5 秒：整体淡出到纸色，然后循环。

不要

渐变色块、阴影、圆角卡片、第二种强调色、无衬线大标题、发光、粒子。

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

• 全片是否只有 sun 一个强调色？
• 标题是否碰到了刻度环？
• 同一个 t 刷新两次，画面是否一模一样？