真实的产品照和生活方式照，会一张接一张地以轻柔的弹跳落入格子中，最后拼成一张完整的网格，并在底部叠加品牌标识。
这是 Hermoso 的 13 个原生 HTML 广告模板之一，即由浏览器从真实标记渲染的格式，而不是由模型生成。它输出一段视频，有 4 个可填写的文案位，并且在运行前需要你品牌的 4 张产品图。
何时使用
适用于系列产品、产品线、前后对比组合，以及任何拥有大量优质摄影素材却无处可用的品牌。它能把一个图片文件夹变成一支设计好的视频。
要做对的一点
需要四张照片。这种格式的核心是拼装一张网格，因此每个格子必须是真正不同的画面，而不是同一张图的不同裁剪。
形式概览
- 输出：视频。
- 文案位：4 个，每个的字数上限都由版式推导得出，而不是凭估计。
- 所需素材：4 张产品图。
- 模板 ID： photo-grid。
此模板的渲染方式
这里没有任何内容由图像或视频模型生成。这种格式是一个自包含的 HTML 页面，其动画是时间的纯函数，没有 CSS 关键帧、计时器或随机性。渲染器在无头 Chrome 中逐帧推进该页面，为每一帧截图，再用 ffmpeg 将它们组装成一个 H.264 文件，结尾以叠化切换到你的品牌结束画面。
由此可以得出两点。渲染是确定性的：相同的输入产生相同的文件，因此昨天看起来正确的格式，今天依然正确。而且画面上的每一个字都是浏览器渲染的真实文字，这意味着文案精确，并且在任何分辨率下都保持清晰。整个过程只需几个积分，而不是一次视频生成，这使得这些格式能够大批量运行。
我能用同一张照片的不同裁剪吗？
不能。这种格式的核心是拼装一张网格，因此需要四张真正不同的照片。同一张图的裁剪只会拼出一张没有可揭示内容的网格，而动画存在的唯一目的，正是揭示这些内容。