用代码免费做像素风动画

<role>
你是像素画师，也是创意程序员。用一个独立的 HTML 文件、原生 JavaScript 和 Canvas 2D 做一段像素动画，最后拍成 MP4。不用任何外部图片、库或网络请求。
</role>

<direction>
雨夜里的一个小拉面摊：红白条纹屋檐、霓虹招牌「RAMEN」偶尔接触不良闪两下、挂着一个会晃的红灯笼；
老板系着白头巾在搅锅，锅里冒蒸汽，第 7 秒抬手捞一次面；柜台前一位背对镜头的客人在吃面，每 1.5 秒低头吸一口；
柜台尽头一只黑猫甩尾巴、偶尔眨眼；前景有个打伞的路人 12 秒走过整个画面；远处楼房窗户亮着、偶尔一扇灭掉；
湿漉漉的街面上有灯笼和招牌的倒影，雨点打在水坑里有小圈。
禁止：抗锯齿、渐变、shadowBlur、模糊发光、小数坐标、缩小的矢量图那种质感。
</direction>

<build>
1. 所有内容画在 160×90 的逻辑画布上，整数倍放大（12 倍 = 1920×1080），imageSmoothingEnabled = false。
2. 固定调色板（36 色左右），每个像素都只能从里面取色；天空的深浅用两色棋盘格抖动，光晕也用抖动一圈圈点出来。
3. 每一层是一个函数（sky、city、stall、sign、chef、pot、counter、guest、noren、lantern、cat、street、walker、rain），按顺序往上盖。
4. 人物用字符画拼：每个字母代表调色板里的一个颜色。动作做成参数（手臂角度、要不要抬手、眨眼）。
5. 姿势每秒只更新 8 次（时间先量化到 1/8 秒），雨、蒸汽、倒影这些特效每帧都动。
6. 随机数带固定种子，开头一次性生成雨滴的起点和速度，之后位置只由时间算；每滴雨 12 秒正好落整数轮、路人 12 秒正好走完一趟，首尾无缝。
7. 页面暴露 window.render(t)：画面只由 t 决定，不用 requestAnimationFrame 驱动、帧与帧之间不保存状态。
8. 用 Playwright 打开页面，逐帧调用 render(i / 30) 并截图（360 张），喂给 ffmpeg 压成 MP4。
9. 配乐用 Python numpy 合成：80 BPM 的 lofi 小曲（三角波和弦、方波拨弦、正弦底鼓）、低通噪声做雨声、招牌闪烁时加一下 120Hz 的嗡嗡声，12 秒可无缝循环。
</build>

<gotchas>
- 每做完一层就渲一张静帧自己看：人物有没有被前景挡住、主体够不够大。
- 字体不要用系统字体缩小，招牌字母自己画 5×7 的像素字。
</gotchas>

创建一个独立的单 HTML 文件，用原生 JavaScript 和 Canvas 2D 渲染一个正在施法的像素风巫师动画。不使用任何外部素材、库或网络请求。

渲染
- 所有内容先画在一块逻辑分辨率固定为 128×96 的离屏画布上，再按能放进窗口的最大整数倍放大，画到全屏的显示画布上，居中，设置 imageSmoothingEnabled = false 和 CSS image-rendering: pixelated。
- 所有绘制都对齐到逻辑画布的整数坐标。不要亚像素位置、抗锯齿、渐变和 shadowBlur。
- 固定调色板，大约 24 个颜色：夜空用深蓝和深紫，长袍用暖色，再加 3–4 个明亮的魔法色。每一个像素都必须来自这个调色板。

角色
- 用填充矩形和一串串像素程序化地搭出巫师，大约 24×32 个逻辑像素：带弯折的尖顶帽、长胡子、双色长袍加深色描边、杖头有宝石的法杖。
- 把姿势做成参数（法杖角度、手臂抬起高度、头部倾斜、长袍摆动）。参数平滑变化，但每一帧都量化到像素网格上，这样虽然循环以 60fps 运行，动作看起来却像每秒 8–12 张的像素动画。

动画
- 循环状态机：待机（两帧上下晃动、胡子摆动）→ 蓄力（法杖举起、宝石闪烁、火花螺旋着向内聚拢）→ 施法（一道强光爆发，飞弹横穿画面，屏幕震动 1–2 像素）→ 收招（回到原位）。关键帧之间的姿势参数用缓动过渡。
- 粒子系统预先分配好、循环复用，不产生新对象。蓄力时火花围着宝石转，施法时向外炸开，每个粒子消失前从白色经过魔法色变成深色。画粒子时位置对齐到像素网格。
- 用固定的 60Hz 时间步长更新，用 requestAnimationFrame 渲染。循环里不产生任何新对象。

场景
- 极简背景：深色夜空、几颗闪烁的 1 像素星星、月亮、石头地面。角色的剪影必须清晰可辨。
- 宝石给巫师打一圈 1 像素的轮廓光，蓄力和施法时变亮。

质量标准
- 任何窗口大小下像素都清晰，无缝循环，稳定 60fps，剪影清楚。看起来要像一段精致的 16-bit 游戏角色动画，而不是缩小了的矢量图形。

不要用 requestAnimationFrame 实时播放。改成暴露 window.render(t)，画面只由时间 t 决定（随机数带固定种子，帧与帧之间不保存状态），我要用 Playwright 逐帧截图拍成视频。