HTML 苹果风发布会短片

向我询问： 用于字标的单字品牌名（动词效果最佳） 9 到 12 张高分辨率照片 一首约 120 BPM 的免版税歌曲，带有 drop 和安静的 breakdown（Mixkit，可免费商用） 一段免费素材库中纯色墙面配移动植物阴影的视频片段（Pexels） 一支 Apple 主题演讲风格的发布短片，仅 2D，一镜到底。 每个场景都从前一个场景中生长出来：没有任何淡出、模糊或剪切。 物体通过变形转换：文字从遮罩线中升起，图标以弹簧效果从零弹出，条形横向绘制，页面推入，一个黑色形状淹没整个画面，然后收缩进入下一个场景。 暖调米白画布，黑色 UI，照片上覆有 iOS 26 液态玻璃。 字标使用 Archivo（wdth 125，字重 800），UI 使用 Geist。 一个光标通过真实的点击、拖拽和长按来控制每一次变化。 镜头以屏幕工作室风格缩放，使每个瞬间填满方形画面，光标随之缩放。 禁止：交叉淡化、模糊入场、亮度“显影”、3D 翻转、粒子、辉光、超过 1 秒的停留、任何看起来像模板的东西。 120 BPM，54 拍，每一拍都有事情发生。 开场：字标像手风琴一样挤入自己的句点，圆点扩展成黑色胶囊，一个标签在其中升起。 点击：六片虹膜叶片在标签上闭合，然后啪地打开到一张照片上。 圆形变成方形，缩小，网格从它背后像纸质地图一样展开（中心、加号、四角），重排为便当格，一次点击放大到其中一个格子，正好落在 drop 上。 玻璃：一个玻璃单词逐字母出现，融化成水滴，拉伸成玻璃工具栏。 调整图标将其变为滑块。 拖拽将照片从白天重新打光到黄金时刻（两张对齐的镜头），旋钮在被按住时变成玻璃镜头。 它升入一个玻璃球体，下一张照片在其中以圆形打开，球体扩展成锁屏：玻璃时钟数字、日期，以及一个拉伸成玻璃音乐播放器的 home 条。 舞台：锁屏向后拉入一部手机（边框从屏幕边缘生长出来）。 灵动岛像液体一样拉伸、掐断、飞过并扩展成一个 Mac 窗口，像百叶窗一样卷起。 长按壁纸，将其拖到 Safari 标签页上，页面推入，放下后它成为落地页的主视觉。 滚动：主视觉变形为产品卡片上的带框印刷品，卡纸和边框从照片边缘生长出来。 选择边框颜色（颜色横向涂满）和尺寸，然后导航按钮飞入“订购印刷品”。 订单：一个黑色形状连续变形： 已订购 ✓ → 打印中 % → 运送中（一辆货车在路线上）→ 已送达 ✓ 墙面：已送达的圆形从边缘到边缘淹没画面，保持黑色一拍，然后收缩成挂在真实墙面素材上的带框印刷品。 同一个虹膜打开到印刷品上，再次闭合，边框淹没屏幕并收缩成胶囊 → 圆点 → 字母弹回，落在节拍回归上。 最后一帧 = 第一帧。 一个 HTML 文件，方形 1440x1440。每个样式都在异步 seek(t) 内部根据时间计算：没有 CSS 过渡，没有计时器，帧与帧之间没有状态。 弹簧使用闭式阶跃响应。具有多个目标的值是每次变化对应一个弹簧之和，因此它保持为时间的纯函数。 液态玻璃：每个玻璃元素持有其背后场景的自身克隆，通过三个略微不同比例的 feDisplacementMap 用 SVG feImage 位移贴图（圆角矩形距离场）进行过滤，以产生色差边缘，外加边缘光。玻璃字母：每个字形的 canvas 距离场生成贴图、遮罩和高光。 粘稠效果：模糊 + alpha 阈值，然后将源合成在上方，使玻璃内部保持锐利。 虹膜：六片叶片围绕六边形光圈。每片叶片使用其两个顶点、两条边延长线以及它们之间的短弧。 字标挤压：每个字母以相同系数向圆点移动，其绘制宽度随之变化（收窄 wdth 轴，缩放其余部分），使字母保持相接。 素材：全部重新编码为全帧内（ffmpeg -g 1），作为 blob URL 加载，在绘制每一帧之前等待 'seeked'。 声音：每个事件使用下载的音效（Mixkit），绝不合成，每个按其测得的峰值定位。歌曲从强拍开始：缩放命中 drop，墙面位于 breakdown，字标随节拍回归。响度归一化到 -14 LUFS。 使用 Playwright 渲染：每帧 4 个子帧用 ffmpeg tmix 混合，60fps。每拍检查一帧，然后扫描单帧跳变（帧差峰值达到相邻帧的 3 倍）。 backdrop-filter: url() 在 Chromium 中会误读位移贴图，因此改为克隆场景。 淹没必须超出四角过扫，并耗时约 0.3 秒，否则半个屏幕会在一帧内改变。 带有 visibility: visible 的子元素会透过隐藏的父元素显示，因此使用 inherit。 在变形形状内部交换的文字需要自己的遮罩。 python http.server 无法对视频进行范围寻址，因此使用 blob URL。 向我询问输入，然后在编写完整影片之前向我展示节拍图和 4 张静帧（开场、玻璃、舞台、墙面）。