用代码免费做像素风动画

<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 色左右的调色板：夜空用深蓝和深紫，长袍用暖色，再加三四个亮的魔法色。每个像素都只能从这盒里取色。

巫师
- 用方块和一串串像素拼出来，大约 24×32：折了尖的高帽子、长胡子、两种颜色的长袍加深色描边、顶上镶宝石的法杖。
- 姿势做成参数：法杖角度、手抬多高、头歪多少、袍子摆多少。参数平滑地变，但每一帧都对齐到像素格上，所以看起来像每秒 8–12 张的像素动画。

动作
- 一圈循环：待机（上下轻轻晃、胡子飘）→ 蓄力（举起法杖、宝石闪、火花绕着往里收）→ 施法（一下强光，光弹飞过画面，屏幕抖 1–2 个像素）→ 收招，回到待机。关键姿势之间用缓动过渡。
- 粒子一开始就分配好、反复用：蓄力时绕着宝石转，施法时往外炸开，消失前从白色变成魔法色再变暗。粒子的位置也对齐像素格。

场景
- 背景简单：深色夜空、几颗一像素的星星在闪、月亮、石头地面。巫师的剪影要一眼看清。
- 宝石给巫师描一圈一像素的轮廓光，蓄力和施法时更亮。

要的效果：窗口多大像素都清楚，循环无缝，看起来像一段精致的 16-bit 游戏角色动画，而不是缩小了的矢量图。

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