线框重排

为什么有效

线框态把布局和内容拆开展示，观众直接看到结构本身在变；变形阶段只有 1px 蓝线和黑底，没有颜色干扰。

参数

时长

全片 10.5s。线框模式 1.6–2.1s（0.5s，15 帧）；点击布局 3.3–3.44s；重排 3.4–4.2s（0.8s，24 帧）；点击关闭线框 4.84–4.98s；各格从 4.9s 起依次填入（每格 0.35s，错开 0.15s，5.7s 完成）；拉远 5.8–6.6s（0.8s，24 帧）；Publish 点击 7.0s，放大按钮 7.08–8.1s，Published 8.3s

缓动

重排用 cubic-bezier(0.65,0,0.35,1)（power3.inOut），尺寸与位置同时插值；线框淡化 power2.out；填入 expo.out（cubic-bezier(0.16,1,0.3,1)）；推近和拉远 expo.out

镜头

全景 scale 1.26→1.30（线性，0–3.4s）；3.4–4.5s 推近到 1.6 对准内容区（1.1s expo.out），之后缓慢漂移到 1.65 直到 5.8s；5.8–6.6s 拉远到 1.3 回到编辑器全景（0.8s），之后 1.30→1.34 漂移到 10.5s

主体

左右并排的两块 section（各 544×420，收件箱列表和功能文案）淡出内容，只留 1.5px 蓝色线框和 7% 填充；线框分裂成四个，移动重排成 2×2 bento 网格（640×202、448×202 在上，448×202、640×202 在下，间距 16px）；各格从左上起依次淡入新内容

同步

3.4s 点击 Grid 时，控件、图层行和四个线框在同一帧开始移动；线框移动时内容保持隐藏（标签 4.25s 回来，间距参考线 4.3s）；填入在布局落定后 0.7s 才开始，由光标关闭线框模式触发

风格

近黑编辑器（窗口 #1c1c1e），1.5px 蓝色线框 rgb(10,132,255)；填入后的格子 rgb(16,16,19)、14px 圆角，内容是界面面板（收件箱、文案、集成网格、工作流）；收尾 Publish 按钮用同一蓝色

提示词

常见说法

• 内容消失只剩框，框再重新排好
• 布局换了，内容再一格格填进去
• 网页结构在眼前变化

容易混淆

• 形变接力形变接力是单个元素变成另一个元素；本条是一组元素先脱去内容再整体重排
• 堆积清空堆积清空靠硬切换图；本条在线框之间做连续插值