A product-centric banner template for Standard Display DMPU (300x600) and Mobile Midscroll, where the product appears to pop out and float in front of the creative frame — a "3D" frame-break effect achieved with just 2D assets. The animation plays in six phases: the product slides into a conventional ad layout, then grows while the background frame shrinks behind it, tilts and floats in front of the frame with a drop shadow, settles back into place, and finally shrinks to make room for a closing marketing message. The full sequence plays twice, holding the end frame for 3 seconds between loops.
Supported placements
The template currently supports two placement types: Standard Display DMPU (300x600) and Mobile Midscroll. The frame-break effect relies on a large placement to read clearly, so the template is not suitable for smaller standard display sizes. Support for other large formats may be added in the future if requested.
Examples
Adore — Beauty (Standard Display 300x600)
Advance — Electronics (Mobile Midscroll)
Assets
All assets with a transparent background (product, logo, CTA, final message) should be exported tightly cropped to the visible artwork, without baked-in empty space around it. The template sizes and positions assets by their full image bounds, so transparent padding in the file makes the artwork render smaller than intended and skews the automatic product sizing.
Product Image
PNG or WEBP with a transparent background, max 250kb.
Dimensions: recommended around 800x1200px (portrait) for bottle-style products, but any aspect ratio works — the template measures the asset and automatically grows it as large as possible during the float phase without cropping it at the edges of the creative. A clean cut-out is essential: this is the layer that breaks out of the frame, so any background left in the image will spoil the illusion.
Background Image
JPG, PNG, WEBP, max 250kb.
Dimensions: recommended 600x1200px or similar portrait orientation. The background renders full bleed with 'cover' scaling and is masked by the shrinking frame during the animation, so it must tolerate cropping on all edges — keep essential details away from the edges.
Logo
PNG, WEBP, SVG, max 250kb.
Dimensions: recommended 300x100px or similar. Due to limited vertical space, we recommend using horizontal variants of logos where available.
CTA
PNG, WEBP, SVG, max 250kb.
Dimensions: recommended around 400x120px. Displayed at the bottom of the creative; fades out while the product floats and returns for the final frame.
Final Message
PNG or WEBP with a transparent background, max 250kb.
Dimensions: recommended around 800x300px. The closing marketing message is supplied as an image so fonts and colours can be fully customised. If left empty, the animation ends on the standard layout and the final frame is skipped entirely.
Final Background Image (optional)
JPG, PNG, WEBP, max 250kb.
Same guidance as the main background. Cross-fades in behind the final frame — useful for ensuring legibility of the final message when the main background is busy.
Format description and guidance
Add your default click URL, then upload the product cut-out and background image (both required). Add your logo and CTA, and optionally a final message image to enable the closing frame — with an optional separate final background for legibility.
The frame colour is revealed around the background while it shrinks behind the floating product. By default it is transparent, so the publisher page itself shows through — the strongest version of the frame-break illusion. Set a solid colour instead if the creative should stay self-contained.
The template sizes itself automatically. The product is measured at runtime and grows to the largest size that fits the creative without being cropped, whatever the asset's aspect ratio. In Mobile Midscroll placements the layout also adapts automatically: safe zones are calculated from the midscroll viewport reported by the canvas, all content is kept within the visible area, and the frame shrink is deepened so the pop-out effect reads clearly within the midscroll window — no manual configuration required.
Max total file weight
The combined file weight of all assets must not exceed 3.5 MB.
Audio
No
Template Details
Frame Breaker
General
| Parameter | Purpose | Notes |
|---|---|---|
| Click URL | Default clickthrough URL for the creative. | |
| Product Image | Cut-out product image with a transparent background (PNG/WebP). This is the layer that pops out of the frame. | Required |
| Background Image | Full-bleed background image, shown inside the frame that shrinks behind the floating product. | Required |
Branding
| Parameter | Purpose | Default |
|---|---|---|
| Logo | Logo asset shown at the top of the creative. | |
| Logo Max Width | Maximum width for the logo (supports px, %, vw). | 60% |
| CTA | Call-to-action image asset shown at the bottom of the creative. | |
| CTA Max Width | Maximum width for the CTA (supports px, %, vw). | 50% |
Final Frame
| Parameter | Purpose |
|---|---|
| Final Message | Marketing message image (transparent PNG) shown on the final frame while the product shrinks to make space. Leave empty to end the animation on the standard layout. |
| Final Background Image | Optional separate background for the final frame, to ensure legibility of the final message. Leave empty to keep the main background. |
Configuration
| Parameter | Purpose | Default |
|---|---|---|
| Frame Colour | Colour revealed around the background frame while it shrinks behind the floating product. | #ffffff00 |
| Format Layout | Midscroll automatically calculates safe zones from the canvas viewport metrics so all content fits fully within the visible midscroll viewport. | Standard | choices: Standard, Midscroll |