AI 写代码拍一部小纪录片

<role>
你是纪录片导演，也是创意程序员。用 Remotion（React + TypeScript）做一段约 100 秒、1920×1080、30fps、有旁白有配乐的小纪录片，最后渲成 MP4。不用任何外部图片、视频素材或图片生成模型，所有画面用 SVG / CSS / Canvas 代码画。
</role>

<inputs>
旁白稿我会给你（或者你先写好给我确认）；用 TTS 配音后拿到每个字的开始时间（timing.json），画面一律对齐到字上。
</inputs>

<direction>
题目：条形码的 25 年。气质：奶白 / 沙色 / 纸色的底，黑色条码，全片唯一的强调色是扫描线的红；标题用宋体，小字用等宽字体；整片叠一层很淡的胶片颗粒。
一个主角贯穿全片：一条线。收银台的红色扫描线 → 沙滩上手指画的点和划 → 专利图里的同心圆 → UPC 条形码 → 回到扫描线。
屏幕上的字很少：大多数时候一两个词或数字，左上角一个打字机效果的年代标签（1974.06.26 08:01 TROY, OHIO / 1948–49 MIAMI BEACH / 1952.10.07 US 2,612,994 / UPC-A / TODAY）。
禁止：深色背景 + 居中大字 + 全部淡入淡出、把旁白整句打在屏幕上、硬切、匀速滑动、几秒钟什么都不动的空拍、机器人或吉祥物。
</direction>

<structure>
1974：扫描线从中间画出来，大号日期 1974 / 6.26 / 08:01 依次弹出再缩到左上角；柜台和扫描玻璃升起；一包口香糖用弹簧滑到线上，念到「嘀」那一帧扫描线闪、两圈波纹、一个红色大字「嘀」。
倒回：镜头一头扎进口香糖上的条形码，满屏的条往上缩回沙子里，背景变成海和沙滩；沙子上先画罐头、盒子、瓶子和一个问号，一道浪把它们冲掉；手指一笔笔画出点和划（镜头推近），念到「往下一拉」时每个点划往下拉成粗细不同的线。
1952：画面变成纸，专利图框里一圈圈画出同心圆；念「等」时变灰，大号年份从 1952 滚到 1974；一道红色激光扫过，圆圈拉直成 UPC。
UPC 解剖：12 个数字逐个弹出；推近一个数字看 7 个格（0/1 和「白1 黑2 白3 黑1」）；激光扫过时下面画出高低起伏的信号；校验算式念到哪行出哪行，最后一位高亮；把一根线改错，算式变红「再扫一次」；整根条码转 180°，标出左半奇、右半偶。
收尾：退回口香糖和小票（$0.67），一包变成满屏几十包，计数滚到 10,000,000,000 次/天；全部收拢成一条红线，最后一个「嘀」。
</structure>

<build>
1. 一个组件一镜到底：const t = useCurrentFrame() / fps，每个元素的位置、透明度、颜色都是 t 的纯函数；不保存上一帧的状态。
2. 写一个 wt("某个词") 函数：在逐字时间里查这个词第一次被念到的秒数。所有出场时间都用它，不手填秒数。
3. 动画用闭式解的弹簧（不依赖上一帧），按东西分档：按钮快而利落、卡片默认、大字和定版沉而几乎不回弹、贴纸明显回弹。
4. 条形码按 UPC-A 标准真编码：左半 L 码、右半 R 码（L 取反），起始/中间/结束护栏 101 / 01010 / 101，共 95 格；校验码 = (10 − (奇数位和×3 + 偶数位和) mod 10) mod 10。
5. 配乐用 Python numpy 合成：四个和弦慢慢铺底、每拍一个拨弦；「嘀」是 2093 Hz 方波只响 0.16 秒；沙沙声是带通噪声；扫描仪的嗡嗡声是 120 Hz；说话时配乐自动压低。配音和配乐混成一条 wav，用 <Audio> 放进来。
6. npx remotion render 渲染；每做完一个场景先渲 3 张静帧自己看，再接着做。
</build>

<gotchas>
- 空拍：一段旁白只对应一个元素时，画面会空好几秒——加一个和旁白有关的小动作（画商品、浪、镜头推近）。
- 镜头推近看细节时，标签很容易被推出画面：按放大后的可见范围摆标签。
- 逐字时间里英文词之间没有空格，查词时别带空格。
</gotchas>

用 HyperFrames 做一段 19.4 秒、1920×1080 的纪录片开场（一个 index.html，GSAP 时间线）：
画面：奶白色底，一条细细的红色扫描线横在画面中间；全片唯一的强调色是这条红线。
0.2 秒 扫描线从中间往两边画出来；
1.2 秒 大号等宽字 1974 / 6.26 / 08:01 一个个弹出（08:01 是红色），左上角打字机效果打出「1974.06.26  08:01  TROY, OHIO」；
5.1 秒 大号日期往上收走；5.4 秒 深色柜台从下面升起，扫描玻璃展开；
8.67 秒 一包黄色口香糖（白色标签上有一根 UPC 条形码，用 SVG 按标准编码画出来）从左边滑进来，花 3.9 秒停在扫描线上；
12.55 秒「嘀」：扫描线变粗发光再收回，两圈红色椭圆波纹扩散，一个红色宋体大字「嘀」弹出来；
13.9 秒 小字「FIRST SCAN · 第一次」升上来；全程镜头慢慢推近 4%，最后 0.5 秒淡出。
规则：每个元素写 data-start / data-duration；时间线用 { paused: true } 创建并注册到 window.__timelines["main"]；只用确定性的逻辑（不用 Math.random、Date.now）；配音放一个 <audio>。
做完跑 npx hyperframes lint，再 npx hyperframes render -o opening.mp4。

做一个单文件网页「条形码画板」，原生 JavaScript + SVG，不用任何库：
1. 一个输入框输入 11 个数字，按 UPC-A 标准算出第 12 位校验码：(10 − (奇数位之和 × 3 + 偶数位之和) mod 10) mod 10。
2. 编码：左半 6 位用 L 码（0001101, 0011001, 0010011, 0111101, 0100011, 0110001, 0101111, 0111011, 0110111, 0001011），右半 6 位用 R 码（L 码取反），加上护栏 101 / 01010 / 101，一共 95 格；护栏比数字条长一点。
3. 条下面写 12 个数字，校验码用红色；下方显示校验算式和「✓ 10 的倍数」。
4. 一条红色激光线在条码上来回扫；鼠标移到某根条上，把同一个数字的条都变红，并提示是第几位、哪个数字。
5. 「随机一个」按钮；「倒过来扫」按钮把整根条码转 180°。
风格：奶白色底、黑色条、只有一个强调色红色，标题用宋体，数字用等宽字体；页面缩放到窗口大小。