WildflowerJS Logo WildflowerJS

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. An author places this layer over part of the stage; the finish applies the same grade to the whole frame. A camera's world draws it flat with the layers under it, so it sits above the world, not inside it.

<div class="layer" data-component="grade" data-start="0" data-duration="5">
    <div class="adjust" data-bind-style="adjust"></div>
</div>
.adjust { position: absolute; top: 0; bottom: 0; left: 50%; right: 0; pointer-events: none; backdrop-filter: grayscale(1) contrast(1.3); }
scene('grade', {
    keyframes: {
        adjust: { left: { at: [0.5, 2], to: [100, 50], 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.
  • 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.
  • 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.