用途：从声明式 JSON 规格渲染可复用的视频叠加组件，输出独立 HTML 预览或 PNG 帧，用于叠加在已有视频素材之上，如产品证明卡片、健身/数据 HUD、连续打卡卡片、巨型标题、原生通知、玻璃堆叠、浏览器窗口、标题/播放叠加等。
主要能力：内置组件包括 product-proof-card、fitness-metric-hud、streak-progress-card、giant-kinetic-title、social-notification、stacked-glass-list、browser-chrome、video-title-play。支持自定义叠加计划，输出文件名使用 overlay.id。
使用方式：进入目录后执行 npm install、npx playwright install chromium、npm test、npm run render:previews，输出默认落在 previews/。渲染脚本示例：node scripts/render-previews.js --out previews --width 1080 --height 1920 --html；--transparent 可渲染带透明通道的 PNG；--plan path/to/overlay-plan.json 可渲染自定义计划。常用参数还有 --dpr、--width、--height。
适用场景：社交视频、广告、产品视频、UI 标注、通知、证明卡片等叠加层制作，最终可渲染透明叠加轨道或逐帧 PNG，再用 FFmpeg 合成。
限制与注意事项：CSS backdrop-filter 无法模糊预渲染透明 PNG 下方的视频，玻璃组件需在叠加层内烘焙更强半透明表面或在 FFmpeg 合成时加视频侧模糊/压暗。FFmpeg 中静态 PNG 加时间滤镜需先加 -loop 1 -framerate 30 -t <base_duration + 1>；fade=alpha 需上游 format=yuva420p；避免使用抠像 PNG，改用真实 alpha。设计上文案应放在 props 中，保持 9:16 与 1:1 布局稳定，底部 14% 留安全区，渲染后需人工目检。