WildflowerJS Logo WildflowerJS

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. The spray is a crachis layer under the type, drawn with blend: 'normal' so each drop is the tint itself, and its density rises with the title, so the drops gather as the card comes up. The drops hold still: only the density moves, so no drop jumps from one frame to the next.

<div id="stage" data-composition-id="sprayed" data-start="0" data-duration="5" data-width="1280" data-height="720" data-fps="30">
    <div class="layer" data-component="sprayed" data-start="0" data-duration="5">
        <canvas class="spray"></canvas>
        <h1 data-bind-style="title">4.07 million rides</h1>
        <p data-bind-style="sub">The year in review</p>
    </div>
</div>
const { scene, shade } = wildflower.kinetic;

// The deep teal #233b3c mixed 15% toward the paper #eef0f2 in OKLab: its tint.
const TINT = '#3e5354';

scene('sprayed', {
    keyframes: {
        title: { opacity: { at: [0.2, 0.9], to: [0, 1] }, translateY: { at: [0.2, 0.9], to: [30, 0], ease: 'power2.out' } },
        sub:   { opacity: { at: [0.6, 1.3], to: [0, 1] } },
    },
    init() {
        // A spot of the tint behind the title, its density rising over the first 1.5 s.
        shade(this.element.querySelector('.spray'), { scene: this, kind: 'crachis', blend: 'normal', marks: (m, t) => m
            .glow({ at: [420, 320], radius: 820, ink: TINT, amount: 0.8 * Math.min(1, t / 1.5), falloff: 'smooth' }) });
    },
});
html, body { margin: 0; background: #0a0b10; }

#stage { position: relative; overflow: hidden; background: #233b3c; }
.layer { position: absolute; inset: 0; }

.spray { position: absolute; inset: 0; width: 100%; height: 100%; }
h1 { position: absolute; left: 96px; top: 250px; margin: 0; font: 800 110px/1 system-ui, sans-serif; color: #f4f2ee; }
p  { position: absolute; left: 100px; top: 390px; margin: 0; font: 600 36px system-ui, sans-serif; color: #9fd4cd; }

[data-composition-id]:not([data-kinetic-ready]) { visibility: hidden; }
A title on a sprayed ground

A spray two steps or more from its ground, or in another hue, is loud across a whole ground; keep that for a small halo around one subject. Small text sits where the spray is thin, and the figure meets its contrast at the densest point behind it.

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