Photo-grid collage

Real product and lifestyle photos drop in one tile at a time with a soft bounce, then paying off as a completed grid under a brand lockup.

It is one of 13 native HTML ad templates in Hermoso, formats rendered from real markup by a browser instead of generated by a model. This one outputs a video, with 4 copy slots you fill, and it needs 4 product photos from your brand before it will run.

When to use it

For collections, ranges, before-and-after sets, and any brand with a library of good photography that has nowhere to go. It turns a folder of images into a designed video.

The thing to get right

It needs four photos. The format is the assembly of a grid, so the tiles have to be genuinely different pictures rather than crops of one.

The format at a glance

• Output: a video.
• Copy slots: 4, each with its own character budget derived from the layout rather than guessed.
• Assets required: 4 product photos.
• Template id: photo-grid.

How this template renders

Nothing here is generated by an image or video model. The format is a self-contained HTML page whose animation is a pure function of time, with no CSS keyframes, timers or randomness. The renderer steps that page frame by frame in headless Chrome, screenshots each frame, and assembles them with ffmpeg into an H.264 file that ends on a crossfade into your brand end card.

Two things follow from that. The render is deterministic: the same inputs produce the same file, so a format that looked right yesterday looks right today. And every word on screen is real browser-rendered text, which means the copy is exact and stays sharp at any resolution. The whole thing costs a couple of credits rather than a video generation, which is what makes these formats practical to run at volume.

Can I use crops of the same photograph?

No. The format is the assembly of a grid, so it needs four genuinely different pictures. Crops of one image assemble into a grid with nothing to reveal, which is the one thing the animation exists to do.

The other native templates

• Native-style image ad
• Myth-vs-fact explainer
• Value-prop motion ad
• Kinetic type
• Cinematic vignette
• iMessage chat-reveal

All 13 are listed on the native ad template index, and the wider catalog is on the creative recipes index.

The photo-grid collage template is reachable from Claude, Cursor, Codex or any other MCP client as well as from the web studio, with the same brand grounding. Driving a format from an agent covers the setup.