让网页动得像大厂发布会

<role>
你是动效设计师，也是创意程序员。用一个独立的 HTML 文件（HTML + CSS + 内联 SVG + 原生 JavaScript）做一段界面动效宣传片，最后拍成 1920×1080、60 帧的 MP4。不用任何外部库、图片或网络请求（字体可以用本地 woff2：Geist + Noto Sans SC）。
</role>

<direction>
一个 AI 录音笔记 App 的使用流程。从头到尾只有一个形状，永远不切镜头：每个状态都是同一个元素改变宽、高、圆角和底色变过去，里面的内容在一下短暂的模糊里换掉。
浅暖灰点阵背景，黑白组件，只有一个强调色（荧光黄绿 #c8f03c），组件下面柔和的投影。
一个鼠标光标用真实的点击和拖拽驱动每一次变化。镜头跟着缩放，让每个状态都占满横屏画面。第 16 秒和第 0 秒完全一样，可以无缝循环。
禁止：匀速运动、弹来弹去的果冻感、发光、组件上的渐变、粒子爆炸、几秒钟什么都不动的空档、任何看起来像模板的东西。
</direction>

<structure>
120 BPM，32 拍（16 秒），每一次变化都落在拍子上：
第 1 拍 点「开始录音」按钮 → 录音条（计时器快进到 03:12，声波跟着鼓点跳）
第 6 拍 点停止 → 缩成一个圈，进度环一拍一拍走
第 8 拍 摊开成白色的「周会记录」卡片：标签页「原文 / 摘要 / 待办」，原文逐字打出来
第 12 拍 点「摘要」：三条要点逐条弹出
第 16 拍 点「待办」：三条待办；第 18、19 拍点勾，打勾 + 划线
第 20 拍 点「周五 · 交周报」旁边的铃铛 → 收成一条提醒；第 21 拍开关踩着拍子打开
第 22 拍 变成「提前提醒」滑块：抓住圆点往右拖，拖过最大值时轨道被拉长，第 25 拍松手弹回 30 分钟
第 26 拍 变成黑色通知「周五 8:30 · 该交周报啦」，铃铛摇两下；第 28 拍副标题换成「已加到日历」
第 30 拍 收回「开始录音」按钮
</structure>

<build>
1. 页面暴露 window.render(t)：所有元素的宽高、位置、颜色、透明度都在里面由 t 算出来写进 style。不用 CSS 过渡、不用计时器、帧和帧之间不保存状态。
2. 弹簧用阻尼振子的解析解直接算（period 约 0.46 秒、阻尼约 0.78，最多一点点回弹）。一个值要多次换目标时，把每一次变化的弹簧叠加起来；循环时把上一圈最后几次变化的尾巴也算进来，这样第 16 秒和第 0 秒连速度都一样。
3. 标签页指示条和开关圆点：左右两条边各一个弹簧，往哪边走，那一边用快弹簧先冲、另一边用慢弹簧后跟，移动时会被拉长。指示条里再放一份白字跟着它一起裁切，字永远看得清。
4. 拖拽：按住时数值由光标位置算；拖过最大值按 9·(1−e^(−超出/9)) 越拉越拉不动，松手后弹回。
5. 在变形容器里换内容：旧的先走、新的等形状变到一半再进，各有各的进出场时间，不然新旧字会叠在一起。
6. 页面再导出一张事件表（每次点击、打勾、开关、提醒发生在第几秒）。用 Python numpy 合成 120 BPM 的配乐（电钢琴和弦、八分音符贝斯、很轻的底鼓和拍手、十六分踩镲），界面音效按事件表放在对应的拍子上，响度 -14 LUFS。
7. 用 Playwright 打开页面，每一帧在这 1/60 秒里均匀调 4 次 render 各截一张，ffmpeg 用 tmix=frames=4 平均成一帧（运动模糊），输出 60 帧 MP4。
</build>

<gotchas>
- 被镜头缩放的元素、会显示文字的元素都不要加 will-change，不然字会糊。
- 先每一拍出一张静帧检查：形状够不够大（横屏比正方形空得多，要靠镜头推近）、字有没有叠、哪一段太空。
- 最后一帧要和第一帧完全一样，包括光标的位置和速度。
</gotchas>

<start>
先把状态列表排在节拍网格上给我看，确认后再写代码。
</start>