Canvas

Masks

Show a picture, gradient or video through the shape of a vector, or through its moving particles.

A mask shows one layer only where another layer's shape is. In Wildfield the shape always comes from a Vector: a logo, a word, a glyph, or the particles a Vector runs. This page covers the two ways to use it: the Mask component, which clips a Media or Gradient layer by a separate Vector, and filling a Vector with its own picture. For building the shape itself, see Vector layers and glyphs.

#Mask with a vector

Add Mask from + Add Component on a Media or Gradient layer. Its card has a Mask with menu that lists the other Vector layers in this scene that have a shape. Pick one and the layer you are on shows only inside that shape. None turns the mask off again.

Static shape or particles matte

The menu groups its sources in two:

  • Static shape uses the vector's silhouette as a stencil. The shape is fitted inside the masked layer's box and centred on it, so it frames that layer rather than following where the vector sits on the canvas. The source vector still renders as itself.
  • Particles matte (animated) is offered for Media layers holding a picture when the source Vector runs particles on this format. Now the picture shows through the moving particles: as they travel, swirl or settle into a formation, they reveal the media underneath them. The Media layer is painted only through the particles, not on its own.

Gradient layers take a static shape only.

The controls

What the card shows depends on the pair you picked:

  • Invert and Opacity appear when the masked layer is a gradient. Invert flips the mask, so the gradient shows everywhere except the shape. Opacity, from 0 to 100, fades the masked gradient toward whatever sits beneath it, including the layer's own image when Gradient on image is on.
  • Soften and Matte edge appear when the source is a particles matte. Soften melts the particles into one soft, liquid field, for liquid and dissolve reveals. Off, each particle is a crisp mark. Matte edge drives the edge of the reveal with a force on the particle layer: Settle (gravity and spring), Sweep (wind), Dissolve (turbulence) or Drain (swirl and gravity).

Matte edge writes those forces onto the source Vector's particles, for every format, and replaces the forces it had. Fine-tune them afterwards on the particle layer itself, in its Motion card.

Gotchas

  • The source must be a Vector with a shape in the same scene. If you delete it, the layer shows unmasked and the Mask card asks you to pick another source.
  • On a layer still locked to the frame (some older projects and Live Frame captures), the Mask controls wait. Press Make Free on the layer first.
  • On a gradient with both Shape and a vector Mask, the vector mask wins.

Worked example

A 9:16 perfume ad where the product photo is revealed by particles that settle into the brand's logo.

  1. Add a Media layer and load the product photo.
  2. Add a Particles layer. Use Draw to trace the logo SVG, so the particles settle into the logo (see Particle shapes), and add Motion so they move.
  3. On the Media layer, add Mask and in Mask with pick the particle layer from Particles matte (animated).
  4. Turn on Soften for a liquid, perfume-like edge, and set Matte edge to Settle so the particles fall and spring into place.
  5. Play the scene: the photo appears only where the particles are, and as they settle, the logo fills with the picture.

Ideas

  • A sale reveal: a Sweep matte carries a product photo on, like wind blowing the picture into view.
  • A drain exit: particles in the shape of the logo swirl away with Drain, taking the image with them.
  • A brand-coloured gradient shown only inside a thin outline glyph, with Opacity at 70 so the photo behind still reads.
  • An inverted gradient vignette: a circle glyph masks a dark gradient with Invert on, darkening the frame around a centred product.
  • A coffee ad where a hot drink photo is revealed through rising, softened particles, like steam.

#Mask through its own shape

In the appCanvas > Media or Gradient > Mask
Show this layer's fill - the media slot, the gradient or the stream - through its OWN vector objects. Build the vector in Vector mode, switch Mask on, then flip the layer to Media or Gradient: you get exactly what vector mode draws, every glyph, in its animated position, with the fill painted through it.

The simplest mask needs no second layer: fill a Vector with a picture or video, and the shape shows it. Since the Vector layer took over from Glyph, this is done from the Vector itself. Add Mask to the Vector and put the media in its Media slot (see Media fill), and the vector becomes a window onto it: every glyph, in its animated position, with the picture painted through it. With particles on, the picture shows through every particle as it moves.

The controls

Once the Vector has media in it, the Fill section in its Mask card has:

  • Invert, which shows the picture everywhere except the shape, turning the vector into a cut-out.
  • Fill: Shared image (the default) shows one picture behind the whole shape, so the glyphs or particles are windows onto it. Per particle puts a small copy of the whole picture inside each glyph or particle. The choice is hidden while Invert is on.
  • Feather, from 0 to 40 px, softens the cut edge. It is hidden in Per particle.

A Media or Gradient layer from an older project may still carry a Mask card switched on for its own shape. It keeps working, with the same Mask, Invert, Fill and Feather controls. New work uses the Vector's Media slot instead.

Which mask to use

  • Use the Vector's Media slot when the picture should live inside the shape: text filled with video, a logo made of a photo, particles that each carry an image.
  • Use Mask with a vector when the picture is its own layer that you also crop, grade, transform or animate separately, or when one shape should reveal a gradient.

Worked example

A 16:9 travel ad where the word ICELAND is filled with aurora footage.

  1. Add a Vector and press + Add string, then type ICELAND. Make it the master and set a heavy font in the Aa type settings.
  2. In the Media slot, load the aurora video.
  3. In Fill, keep Shared image, so the footage runs once behind the whole word.
  4. Scale the layer so the word fills most of the frame.
  5. For a variation, turn on Invert and set Feather to 12 px: now the footage fills the frame and the word is a soft-edged cut-out.

Ideas

  • A menu ad where each dish name is filled with a photo of the dish.
  • Particles in Per particle, each carrying the same product shot, pouring into a formation.
  • An inverted, heavily feathered circle glyph over a video, for a soft "peek inside" spotlight teaser.

Try it in Wildfield

Build an animated, on-brand ad in every format from one project.

Wildfield is coming soon and opening to new teams in waves.

Start freeJoin the waitlist