WildflowerJS Logo WildflowerJS

A luma matte

A layer shows through where a matte is bright and is hidden where it is dark, and the matte moves, so a photo is revealed by a sweep with a soft edge. mask-image on the layer takes the matte, a gradient here, or an image such as a photograph of smoke, with mask-mode: luminance so its brightness is the matte rather than its alpha.

The gradient is twice the layer's width with a soft step in its middle, and a maskPosition track slides it across: at 100% the dark half covers the layer and at 0% the bright half does. Nothing here is an SVG <mask> referenced by id, which the page draws and a render does not.

<div class="layer" data-component="reveal" data-start="0" data-duration="4">
    <img class="photo" src="harbour.jpg" alt="" data-bind-style="matte">
</div>
.photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
         mask-image: linear-gradient(to right, #fff 45%, #000 55%); mask-mode: luminance;
         mask-size: 200% 100%; mask-repeat: no-repeat; }
scene('reveal', {
    keyframes: {
        matte: { maskPosition: { at: [0.3, 1.8], to: [100, 0], unit: '%', ease: 'power2.inOut' } },
    },
});

No demo uses this pattern yet.

These patterns put still SVG filters on HTML, cut layers with mattes and feathered masks, lay paper and light over a scene, spray a ground with its own tint, and grade part of the stage with an adjustment layer.

  • Still effects with an SVG filter: A title card sits over a stippled sky, and a photo beside it is printed as a halftone.
  • An alpha matte and a feathered mask: A soft-edged shape cut from a layer: mask-image with a gradient from opaque to transparent, whose width is the feather; a disc here, grown by a maskSize track until it clears the frame.
  • A paper texture and a light leak: The scene under paper: a texture layer over everything, blended with multiply, darkens the scene by the paper's grain and leaves white untouched; a light leak is a warm gradient blended with screen, which lightens, moved by a track so it drifts across the frame.
  • A ground sprayed with its own tint: A title card on a deep teal, with the teal's own tint sprayed behind the title, densest there and thinning toward the edges, so the ground has the tooth and the light of a printed poster without a second hue.
  • An adjustment layer: An element over part of the stage with backdrop-filter changes everything beneath it in its area and nothing above: a grade on the footage under a title, a blur behind a panel, or a desaturated half that a track slides across.