WildflowerJS Logo WildflowerJS

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. Both are plain layers above the scene and under the pointer, and both draw the same in the page and in a render. The paper here is an SVG image of turbulence as a data URL, so the pattern needs no file; a scan of real paper does better.

<div class="layer" data-component="texture" data-start="0" data-duration="6">
    <div class="paper"></div>
    <div class="leak" data-bind-style="leak"></div>
</div>
.paper { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
         background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 0.84 0 0 0 0 0.8 0 0 0 0 0.72 0 0 0 0.35 0.65'/></filter><rect width='400' height='400' fill='white'/><rect width='400' height='400' filter='url(%23p)'/></svg>");
         background-size: 400px 400px; }
.leak  { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
         background: radial-gradient(circle at 30% 30%, rgba(255, 160, 80, 0.9), rgba(255, 120, 60, 0) 60%); }
scene('texture', {
    keyframes: {
        leak: { translateX: { at: [0, 6], to: [-200, 200] }, opacity: { at: [0, 1, 5, 6], to: [0, 1, 1, 0] } },
    },
});

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 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.