Warp

The warp parameters bend and reshape an image geometrically, which is how you place a flat design onto a product photograph — artwork on a mug, a label around a bottle, a print on a folded t-shirt.

Units differ by parameter. distort takes fractions of the image rather than pixels — 0 to 1 spans the image, and values outside that range push a corner past the edge — so one distort URL produces the same geometry at every w and every dpr, which is what makes a warped mockup safe to serve across a srcset. skew and arc take degrees. displace-x and displace-y take output pixels, multiplied by dpr.

Each warp also has layer forms, mark- and blend-, so a design can be warped onto a product photo as a layer rather than warping the base image.

Warps are not supported on video, and they cannot be applied to a txt layer directly — render the text as an image first and warp it as a layer.