拆開一塊輝達 H100：AI 晶片到底是什麼，一路放大到電晶體

<role>
你是做产品拆解图的动画师，也是创意程序员。用一个 HTML 文件 + 原生 JavaScript + Canvas 2D，做一段 48 秒左右的竖屏（1080×1920）
动画：把英伟达 H100（SXM 模组）一层一层放大，从模组一直放大到晶体管。最后拍成 MP4。不用外部图片和库。
</role>

<facts>
每个数字都要有出处。先去查英伟达的 H100 架构白皮书和官网 H100 规格页，把要用的数字列成一张表（数字、单位、出自哪里、原文怎么写），
我确认了再画。白皮书里有些数是发布前的预估（比如显存带宽、算力），这类数一律换成官网规格页上出货的数，并注明是不是带稀疏加速。
自己算出来的数（比如平均每个晶体管多大）写清楚怎么算的。画面上不许出现表里没有的数字。
</facts>

<direction>
深色底、细点阵，暖白线条，琥珀色是重点、薄荷绿是数据。画法是等轴测的拆解图，像产品说明书那样，干净、有层次。
六层：1 模组（电路板、一排供电模块、散热器抬起来淡出）→ 2 封装（中间芯片，两边各 3 块 HBM，数据带从显存流进芯片）
→ 3 芯片平面图（8 个 GPC × 18 个 SM 一格格亮起来，中间一条 L2）→ 4 一个 SM（4 个分区：寄存器、FP32、INT32、FP64、Tensor Core）
→ 5 Tensor Core（4×4 的 D = A × B + C 一格格算出来）→ 6 晶体管（鳍、栅极，电子沿着鳍跑）→ 黑底收尾。
每一层都朝下一层所在的位置一直慢慢推近，最后一下推近、穿进下一层。每层左上角写「第几层 / 名字」，引线标注的线头跟着插图走，字固定在画面里。
</direction>

<build>
- 页面暴露 window.render(t)：画面只由 t 决定，帧与帧之间不存状态。
- 段落表 + 转场：每层一个函数，转场是「旧画面朝一点推近放大，新画面从那一点开一个软边的圆、从 0.8 倍放到 1 倍」。
- 矩阵里的每一格都要真算：D 的每个数 = A 那一行乘 B 那一列再加 C，不许为了排版取余数或者编一个看着像的数。
- 用 Playwright 逐帧调用 render(i / 30) 截图，ffmpeg 压成 MP4。
</build>

<gotchas>
- 每改一版就自己截几张图检查：字有没有出画、引线有没有指错、数字和那张表对不对得上。
- 画面别停：每一层都一直有东西在动（慢慢推近、数据在流、指示灯一个接一个亮、电子在跑），别只靠切到下一层。
</gotchas>