@arraypress/covers 1.0.0 → 1.1.0

package/src/effects/light.js

@@ -0,0 +1,59 @@
+/**
+ * Blur, shadow, glow and die-cut borders.
+ *
+ * @module effects/light
+ */
+
+import { num } from '../svg.js';
+import { len } from '../geometry.js';
+import { flood } from './util.js';
+
+/**
+ * `blur`: `radius`, or `x` and `y` for an axis-aligned blur.
+ *
+ * @param {import('./index.js').Effect & { kind: 'blur' }} fx
+ * @param {import('../layers.js').RenderContext} ctx
+ * @returns {string}
+ */
+export function blur(fx, ctx) {
+  const sd = fx.x != null || fx.y != null ? `${num(len(fx.x, ctx.canvas, 0))} ${num(len(fx.y, ctx.canvas, 0))}` : num(len(fx.radius, ctx.canvas, '1vmin'));
+  return `<feGaussianBlur stdDeviation="${sd}"${fx.edge === 'duplicate' ? ' edgeMode="duplicate"' : ''}/>`;
+}
+
+/**
+ * `shadow` and `glow`: the alpha, tinted, blurred and offset under the source.
+ *
+ * @param {import('./index.js').Effect & { kind: 'shadow' | 'glow' }} fx
+ * @param {import('../layers.js').RenderContext} ctx
+ * @returns {string}
+ */
+export function shadow(fx, ctx) {
+  const glow = fx.kind === 'glow';
+  const op = fx.opacity ?? (glow ? 0.6 : 0.35);
+  const spread = fx.spread ? `<feMorphology operator="dilate" radius="${num(len(fx.spread, ctx.canvas))}"/>` : '';
+  const dx = glow ? 0 : len(fx.x, ctx.canvas, 0);
+  const dy = glow ? 0 : len(fx.y, ctx.canvas, '0.8vmin');
+  return `<feColorMatrix in="SourceAlpha" type="matrix" values="${flood(fx.color ?? (glow ? '#ffffff' : '#000000'), [0, 0, 0, op, 0])}"/>${spread}<feGaussianBlur stdDeviation="${num(len(fx.blur, ctx.canvas, glow ? '1.2vmin' : '1.5vmin'))}"/><feOffset dx="${num(dx)}" dy="${num(dy)}" result="s"/><feMerge><feMergeNode in="s"/><feMergeNode in="SourceGraphic"/></feMerge>`;
+}
+
+/**
+ * `border`: a die-cut sticker border round the alpha, and an optional cut
+ * line outside it.
+ *
+ * @param {import('./index.js').Effect & { kind: 'border' }} fx
+ * @param {import('../layers.js').RenderContext} ctx
+ * @returns {string}
+ */
+export function border(fx, ctx) {
+  const w = len(fx.width, ctx.canvas, '1.2vmin');
+  /** @param {number} r @param {string} c @param {string} name */
+  const ring = (r, c, name) => `<feMorphology in="SourceAlpha" operator="dilate" radius="${num(r)}" result="${name}d"/><feColorMatrix in="${name}d" type="matrix" values="${flood(c, [0, 0, 0, 1, 0])}" result="${name}"/>`;
+  let out = '';
+  let merge = '';
+  if (fx.line) {
+    out += ring(w + len(fx.lineWidth, ctx.canvas, '0.25vmin'), fx.line === true ? '#c9c6c0' : fx.line, 'ln');
+    merge += '<feMergeNode in="ln"/>';
+  }
+  out += ring(w, fx.color ?? '#ffffff', 'bd');
+  return `${out}<feMerge>${merge}<feMergeNode in="bd"/><feMergeNode in="SourceGraphic"/></feMerge>`;
+}

package/src/effects/looks.d.ts

@@ -0,0 +1,9 @@
+// Graded presets.
+import type { Effect } from './index.js';
+
+/** Preset names: fade, crossProcess, bleachBypass, tealOrange, warmFilm, coolFilm, noir. */
+export const LOOK_NAMES: readonly LookName[];
+/** A look's name. */
+export type LookName = 'fade' | 'crossProcess' | 'bleachBypass' | 'tealOrange' | 'warmFilm' | 'coolFilm' | 'noir';
+/** The `look` effect's filter primitives. */
+export function look(fx: Extract<Effect, { kind: 'look' }>): string;

package/src/effects/looks.js

@@ -0,0 +1,74 @@
+/**
+ * `look`: graded presets, built from the grading filters, `amount` of the
+ * way from the original (0–1): `fade` (lifted blacks, softened whites),
+ * `crossProcess` (slide film in negative chemistry: yellow highlights,
+ * cyan-blue shadows, hard contrast), `bleachBypass` (silver kept in:
+ * desaturated, harsh, metallic), `tealOrange` (warm skin against cool
+ * shadows), `warmFilm` and `coolFilm` (balanced stock, gently faded), and
+ * `noir` (hard black and white).
+ *
+ * @module effects/looks
+ */
+
+import { num } from '../svg.js';
+import { curveTable, transfer, balanceTables } from './grade.js';
+import { LUMA, mat } from './util.js';
+
+/** @param {number} v @returns {string} */
+const saturate = (v) => `<feColorMatrix type="saturate" values="${num(v, 3)}"/>`;
+
+/** @param {[number, number][]} pts @returns {number[]} */
+const curve = (pts) => curveTable(pts, 96);
+
+/** A curve on all three channels. @param {[number, number][]} pts @returns {string} */
+const tone = (pts) => { const t = curve(pts); return transfer([t, t, t]); };
+
+/** A table per channel. @param {[number, number][][]} rgbPts @returns {string} */
+const split = (rgbPts) => transfer(rgbPts.map(curve));
+
+/** A colour balance. @param {Parameters<typeof balanceTables>[0]} z @returns {string} */
+const balance = (z) => transfer(balanceTables(z).map((t) => t));
+
+/** The presets, as filter primitives. @type {Record<string, () => string>} */
+const LOOKS = {
+  fade: () => tone([[0, 0.11], [0.25, 0.3], [0.75, 0.76], [1, 0.93]]) + saturate(0.82),
+  crossProcess: () => split([
+    [[0, 0.04], [0.25, 0.15], [0.75, 0.9], [1, 1]],
+    [[0, 0], [0.25, 0.17], [0.75, 0.9], [1, 1]],
+    [[0, 0.2], [0.5, 0.46], [1, 0.66]],
+  ]) + saturate(1.12),
+  bleachBypass: () => `<feColorMatrix in="SourceGraphic" type="matrix" values="${mat([...LUMA, 0, 0, ...LUMA, 0, 0, ...LUMA, 0, 0, 0, 0, 0, 1, 0])}" result="lkg"/>`
+    + '<feBlend in="lkg" in2="SourceGraphic" mode="overlay" result="lko"/>'
+    + '<feComposite in="lko" in2="lkg" operator="arithmetic" k2="0.55" k3="0.45"/>'
+    + tone([[0, 0], [0.22, 0.14], [0.5, 0.5], [0.8, 0.88], [1, 1]]),
+  tealOrange: () => tone([[0, 0.02], [0.25, 0.21], [0.75, 0.8], [1, 0.98]])
+    + balance({ shadows: [-0.32, 0.06, 0.3], midtones: [0.06, 0, -0.08], highlights: [0.26, 0.06, -0.3] })
+    + saturate(1.12),
+  warmFilm: () => tone([[0, 0.06], [0.3, 0.3], [0.7, 0.74], [1, 0.95]])
+    + balance({ shadows: [0.06, 0.02, -0.06], midtones: [0.1, 0.03, -0.12], highlights: [0.08, 0.04, -0.12] })
+    + saturate(0.92),
+  coolFilm: () => tone([[0, 0.06], [0.3, 0.29], [0.7, 0.73], [1, 0.95]])
+    + balance({ shadows: [-0.1, 0.04, 0.14], midtones: [-0.08, 0.01, 0.1], highlights: [-0.04, 0.02, 0.06] })
+    + saturate(0.85),
+  noir: () => `<feColorMatrix type="matrix" values="${mat([0.3, 0.6, 0.1, 0, 0, 0.3, 0.6, 0.1, 0, 0, 0.3, 0.6, 0.1, 0, 0, 0, 0, 0, 1, 0])}"/>`
+    + tone([[0, 0], [0.18, 0.05], [0.45, 0.4], [0.75, 0.85], [1, 1]]),
+};
+
+/** Preset names. */
+export const LOOK_NAMES = Object.freeze(Object.keys(LOOKS));
+
+/**
+ * `look`: a preset grade (`name`), `amount` of the way (default 1).
+ *
+ * @param {import('./index.js').Effect & { kind: 'look' }} fx
+ * @returns {string}
+ * @throws {TypeError} On an unknown name.
+ */
+export function look(fx) {
+  const name = fx.name ?? 'fade';
+  if (!Object.hasOwn(LOOKS, name)) throw new TypeError(`Unknown look "${name}" (${LOOK_NAMES.join(', ')})`);
+  const a = fx.amount ?? 1;
+  const body = LOOKS[name]();
+  if (a >= 1) return body;
+  return `${body}<feOffset dx="0" dy="0" result="lk"/><feComposite in="lk" in2="SourceGraphic" operator="arithmetic" k2="${num(a, 3)}" k3="${num(1 - a, 3)}"/>`;
+}

package/src/effects/mask.d.ts

@@ -0,0 +1,52 @@
+// Where an effect applies: a gradient, or layers.
+import type { Length, Layer } from '../index.js';
+
+/** A point as fractions of the canvas. */
+type Point = [number, number] | { x: number; y: number };
+
+/** Options every mask form takes. */
+interface MaskCommon {
+  /** Swap where the effect applies and where it doesn't. */
+  invert?: boolean;
+  /** A smooth step between none and full (default true); false is linear. */
+  ease?: boolean;
+}
+
+/** Where an effect applies, from none (0) to full (1). */
+export type EffectMask =
+  | (MaskCommon & { gradient: 'linear'; from?: Point; to?: Point })
+  | (MaskCommon & { gradient: 'radial'; center?: Point; from?: Length; to?: Length; aspect?: number })
+  | (MaskCommon & { gradient: 'band'; center?: Point; angle?: number; from?: Length; to?: Length })
+  | (MaskCommon & { layers: Layer[] });
+
+/** A mask image placed over a filter's region. */
+export interface MaskImage {
+  href: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+/** The gradient forms. */
+export const MASK_GRADIENTS: readonly ('linear' | 'radial' | 'band')[];
+/** Where a resolved layer mask is kept on a mask (its markup, and an image where one could be drawn). */
+export const RESOLVED: unique symbol;
+/** Check a mask, throwing a readable error. */
+export function checkMask(spec: unknown, where?: string): void;
+/** A gradient mask as a function of a point in the layer's units, 0–1. */
+export function maskField(spec: EffectMask, ctx: { width: number; height: number; canvas: { width: number; height: number } }): (x: number, y: number) => number;
+/** A mask on a grid over a box of the layer, a byte a cell; undefined where a layer mask can't be drawn. */
+export function maskGrid(spec: EffectMask, ctx: object, box: { x: number; y: number; width: number; height: number }, cols: number, rows: number, angle?: number): Promise<Uint8Array | undefined>;
+/** A gradient mask on a grid (synchronous). */
+export function gradientGrid(spec: EffectMask, ctx: object, box: { x: number; y: number; width: number; height: number }, cols: number, rows: number, angle?: number): Uint8Array;
+/** The mask as a small greyscale image over a filter's region. */
+export function maskImage(spec: EffectMask, ctx: object, pad: number, angle?: number): Promise<MaskImage | undefined>;
+/** A gradient mask as an image, synchronously. */
+export function gradientImage(spec: EffectMask, ctx: object, pad: number, angle?: number): MaskImage;
+/** Filter primitives mixing the chain's result with its source through a mask image. */
+export function lerpPrimitives(image: MaskImage): string;
+/** Mix pixels before and after an effect through a mask, in place on `out`. */
+export function lerpPixels(src: Uint8ClampedArray, out: Uint8ClampedArray, m: Uint8Array): Uint8ClampedArray;
+/** The effect drawn over the layer through an SVG mask. */
+export function maskOverlay(before: string, after: { defs: string; body: string }, spec: EffectMask, ctx: object, id: string): { defs: string; body: string };

package/src/effects/mask.js

@@ -0,0 +1,314 @@
+/**
+ * `mask` on any effect: where it applies, from none (0) to full (1).
+ *
+ * - `{ gradient: 'linear', from: [x, y], to: [x, y] }`: none at `from`,
+ *   full at `to` (fractions of the canvas).
+ * - `{ gradient: 'radial', center, from, to, aspect }`: none inside the
+ *   radius `from`, full beyond `to` (lengths): a sharp face, the rest
+ *   blurred.
+ * - `{ gradient: 'band', center, angle, from, to }`: none within `from` of
+ *   a line through `center` at `angle`, full beyond `to` (tilt-shift).
+ * - `{ layers: [...] }`: the luminance of layers drawn (white: full).
+ *
+ * Every form takes `invert` and `ease` (a smooth step, default true).
+ * The result is an exact mix of the layer before and after the effect:
+ * inside the filter for filter effects (the mask is a small greyscale
+ * image), per pixel for pixel effects. A layer mask that can't be drawn
+ * (a Worker) draws the effect over the layer through an SVG mask.
+ *
+ * @module effects/mask
+ */
+
+import { attrs, num } from '../svg.js';
+import { len } from '../geometry.js';
+import { encodePng, pngUri } from '../png.js';
+import { pixelsOf } from '../raster/index.js';
+import { fraction, clamp01 } from './buffer.js';
+
+/** The gradient forms. */
+export const MASK_GRADIENTS = Object.freeze(['linear', 'radial', 'band']);
+
+/** Where a resolved layer mask is kept on an effect (markup, and a raster where one could be drawn). */
+export const RESOLVED = Symbol('covers.mask');
+
+/** Longest side of a gradient mask image, px (it scales smoothly). */
+const GRADIENT_PX = 256;
+
+/** Longest side of a layer mask image, px. */
+const LAYER_PX = 1024;
+
+/**
+ * Check a mask, throwing a readable error.
+ *
+ * @param {any} spec
+ * @param {string} [where='mask']
+ * @returns {void}
+ * @throws {TypeError}
+ */
+export function checkMask(spec, where = 'mask') {
+  if (!spec || typeof spec !== 'object' || Array.isArray(spec)) throw new TypeError(`${where}: a mask is { gradient: 'linear' | 'radial' | 'band', … } or { layers: [...] }`);
+  const known = ['gradient', 'from', 'to', 'center', 'angle', 'aspect', 'invert', 'ease', 'layers'];
+  for (const k of Object.keys(spec)) if (!known.includes(k)) throw new TypeError(`${where}.${k}: unknown mask option (${known.join(', ')})`);
+  if (spec.layers != null) {
+    if (!Array.isArray(spec.layers)) throw new TypeError(`${where}.layers: an array of layers`);
+    return;
+  }
+  if (!MASK_GRADIENTS.includes(spec.gradient)) throw new TypeError(`${where}.gradient: "${spec.gradient}" (${MASK_GRADIENTS.join(', ')}), or give layers`);
+}
+
+/**
+ * A gradient mask as a function of a point in the layer's units.
+ *
+ * @param {import('./mask.js').EffectMask} spec
+ * @param {{ width: number, height: number, canvas: { width: number, height: number } }} ctx
+ * @returns {(x: number, y: number) => number} 0–1.
+ */
+export function maskField(spec, ctx) {
+  checkMask(spec);
+  const W = ctx.width;
+  const H = ctx.height;
+  const ease = spec.ease !== false;
+  const inv = Boolean(spec.invert);
+  const out = (/** @type {number} */ t) => {
+    let v = clamp01(t);
+    if (ease) v = v * v * (3 - 2 * v);
+    return inv ? 1 - v : v;
+  };
+  if (spec.gradient === 'linear') {
+    const [fx, fy] = fraction(/** @type {any} */ (spec.from), [0, 0.5]);
+    const [tx, ty] = fraction(/** @type {any} */ (spec.to), [1, 0.5]);
+    const x0 = fx * W;
+    const y0 = fy * H;
+    const dx = tx * W - x0;
+    const dy = ty * H - y0;
+    const k = 1 / (dx * dx + dy * dy || 1);
+    return (x, y) => out(((x - x0) * dx + (y - y0) * dy) * k);
+  }
+  const [cx, cy] = fraction(/** @type {any} */ (spec.center), [0.5, 0.5]);
+  const ox = cx * W;
+  const oy = cy * H;
+  const isBand = spec.gradient === 'band';
+  const r0 = len(/** @type {any} */ (spec.from), ctx.canvas, isBand ? '8vmin' : '12vmin');
+  const r1 = Math.max(r0 + 1e-6, len(/** @type {any} */ (spec.to), ctx.canvas, isBand ? '30vmin' : '48vmin'));
+  const k = 1 / (r1 - r0);
+  if (isBand) {
+    const a = ((spec.angle ?? 0) * Math.PI) / 180;
+    const nx = -Math.sin(a);
+    const ny = Math.cos(a);
+    return (x, y) => out((Math.abs((x - ox) * nx + (y - oy) * ny) - r0) * k);
+  }
+  const ar = 1 / (spec.aspect ?? 1);
+  return (x, y) => {
+    const dx = x - ox;
+    const dy = (y - oy) * ar;
+    return out((Math.sqrt(dx * dx + dy * dy) - r0) * k);
+  };
+}
+
+/**
+ * A mask sampled on a grid over a box of the layer, as greyscale bytes.
+ *
+ * @param {import('./mask.js').EffectMask} spec
+ * @param {any} ctx - The layer's render context.
+ * @param {{ x: number, y: number, width: number, height: number }} box - Layer units.
+ * @param {number} cols
+ * @param {number} rows
+ * @param {number} [angle=0] - The grid is in a frame turned by this many degrees about the canvas centre (a `motion` blur's).
+ * @returns {Promise<Uint8Array | undefined>} Undefined when a layer mask can't be drawn here.
+ */
+export async function maskGrid(spec, ctx, box, cols, rows, angle = 0) {
+  const resolved = /** @type {any} */ (spec)[RESOLVED];
+  if (spec.layers) return resolved ? drawnMask(resolved, spec, ctx, box, cols, rows, angle) : undefined;
+  return gradientGrid(spec, ctx, box, cols, rows, angle);
+}
+
+/**
+ * A gradient mask on a grid (synchronous).
+ *
+ * @param {import('./mask.js').EffectMask} spec
+ * @param {any} ctx
+ * @param {{ x: number, y: number, width: number, height: number }} box
+ * @param {number} cols
+ * @param {number} rows
+ * @param {number} [angle=0]
+ * @returns {Uint8Array}
+ */
+export function gradientGrid(spec, ctx, box, cols, rows, angle = 0) {
+  const f = maskField(spec, ctx);
+  const out = new Uint8Array(cols * rows);
+  const a = (angle * Math.PI) / 180;
+  const cos = Math.cos(a);
+  const sin = Math.sin(a);
+  const cx = ctx.width / 2;
+  const cy = ctx.height / 2;
+  const sx = box.width / cols;
+  const sy = box.height / rows;
+  for (let j = 0; j < rows; j++) {
+    for (let i = 0; i < cols; i++) {
+      let x = box.x + (i + 0.5) * sx;
+      let y = box.y + (j + 0.5) * sy;
+      if (a) {
+        const dx = x - cx;
+        const dy = y - cy;
+        x = cx + dx * cos - dy * sin;
+        y = cy + dx * sin + dy * cos;
+      }
+      out[j * cols + i] = Math.round(f(x, y) * 255);
+    }
+  }
+  return out;
+}
+
+/**
+ * Layers drawn as a mask: luminance times alpha, on a grid over a box.
+ *
+ * @param {{ defs: string, body: string }} m - The mask layers' markup.
+ * @param {import('./mask.js').EffectMask} spec
+ * @param {any} ctx
+ * @param {{ x: number, y: number, width: number, height: number }} box
+ * @param {number} cols
+ * @param {number} rows
+ * @param {number} angle
+ * @returns {Promise<Uint8Array | undefined>}
+ */
+async function drawnMask(m, spec, ctx, box, cols, rows, angle) {
+  const turn = angle ? `<g transform="rotate(${num(-angle)} ${num(ctx.width / 2)} ${num(ctx.height / 2)})">${m.body}</g>` : m.body;
+  const doc = `<svg xmlns="http://www.w3.org/2000/svg" width="${cols}" height="${rows}" viewBox="${num(box.x, 4)} ${num(box.y, 4)} ${num(box.width, 4)} ${num(box.height, 4)}" preserveAspectRatio="none">${m.defs ? `<defs>${m.defs}</defs>` : ''}${turn}</svg>`;
+  let px;
+  try {
+    px = await pixelsOf(doc, cols, rows, ctx.sharp);
+  } catch {
+    px = undefined;
+  }
+  if (!px) return undefined;
+  const out = new Uint8Array(cols * rows);
+  for (let i = 0, j = 0; j < out.length; i += 4, j++) {
+    const v = ((0.2126 * px[i] + 0.7152 * px[i + 1] + 0.0722 * px[i + 2]) * px[i + 3]) / 255;
+    out[j] = spec.invert ? 255 - v : v;
+  }
+  return out;
+}
+
+/**
+ * The mask as an image for a filter: a small greyscale PNG over the
+ * filter's region (a gradient scales up smoothly), or undefined where a
+ * layer mask can't be drawn.
+ *
+ * @param {import('./mask.js').EffectMask} spec
+ * @param {any} ctx
+ * @param {number} pad - The filter's padding, a fraction of the canvas.
+ * @param {number} [angle=0]
+ * @returns {Promise<{ href: string, x: number, y: number, width: number, height: number } | undefined>}
+ */
+export async function maskImage(spec, ctx, pad, angle = 0) {
+  const box = { x: -ctx.width * pad, y: -ctx.height * pad, width: ctx.width * (1 + 2 * pad), height: ctx.height * (1 + 2 * pad) };
+  const side = spec.layers ? LAYER_PX : GRADIENT_PX;
+  const k = side / Math.max(box.width, box.height);
+  const cols = Math.max(2, Math.round(box.width * k));
+  const rows = Math.max(2, Math.round(box.height * k));
+  const grid = await maskGrid(spec, ctx, box, cols, rows, angle);
+  if (!grid) return undefined;
+  return { href: pngUri(encodePng(grid, cols, rows, 1)), ...box };
+}
+
+/**
+ * The same, synchronously, for a gradient.
+ *
+ * @param {import('./mask.js').EffectMask} spec
+ * @param {any} ctx
+ * @param {number} pad
+ * @param {number} [angle=0]
+ * @returns {{ href: string, x: number, y: number, width: number, height: number }}
+ */
+export function gradientImage(spec, ctx, pad, angle = 0) {
+  const box = { x: -ctx.width * pad, y: -ctx.height * pad, width: ctx.width * (1 + 2 * pad), height: ctx.height * (1 + 2 * pad) };
+  const k = GRADIENT_PX / Math.max(box.width, box.height);
+  const cols = Math.max(2, Math.round(box.width * k));
+  const rows = Math.max(2, Math.round(box.height * k));
+  return { href: pngUri(encodePng(gradientGrid(spec, ctx, box, cols, rows, angle), cols, rows, 1)), ...box };
+}
+
+/**
+ * Filter primitives that mix the chain's result with its source through a
+ * mask image: `result × m + source × (1 − m)`, premultiplied, exact.
+ *
+ * @param {{ href: string, x: number, y: number, width: number, height: number }} image
+ * @returns {string}
+ */
+export function lerpPrimitives(image) {
+  return '<feOffset dx="0" dy="0" result="fxo"/>'
+    + `<feImage${attrs({ href: image.href, x: image.x, y: image.y, width: image.width, height: image.height, preserveAspectRatio: 'none', result: 'fxk' })}/>`
+    + '<feColorMatrix in="fxk" type="luminanceToAlpha" color-interpolation-filters="sRGB" result="fxm"/>'
+    + '<feComposite in="fxo" in2="fxm" operator="in" result="fxa"/>'
+    + '<feComposite in="SourceGraphic" in2="fxm" operator="out" result="fxb"/>'
+    + '<feComposite in="fxa" in2="fxb" operator="arithmetic" k2="1" k3="1"/>';
+}
+
+/**
+ * Mix pixels before and after an effect through a mask, in place on `out`.
+ *
+ * @param {Uint8ClampedArray} src - Before (RGBA, unpremultiplied).
+ * @param {Uint8ClampedArray} out - After; becomes the mix.
+ * @param {Uint8Array} m - The mask, a byte a pixel.
+ * @returns {Uint8ClampedArray}
+ */
+export function lerpPixels(src, out, m) {
+  for (let p = 0, i = 0; p < m.length; p++, i += 4) {
+    const t = m[p];
+    if (t === 255) continue;
+    if (t === 0) { out[i] = src[i]; out[i + 1] = src[i + 1]; out[i + 2] = src[i + 2]; out[i + 3] = src[i + 3]; continue; }
+    const k = t / 255;
+    const a0 = src[i + 3];
+    const a1 = out[i + 3];
+    if (a0 === 255 && a1 === 255) {
+      out[i] = src[i] + (out[i] - src[i]) * k;
+      out[i + 1] = src[i + 1] + (out[i + 1] - src[i + 1]) * k;
+      out[i + 2] = src[i + 2] + (out[i + 2] - src[i + 2]) * k;
+      continue;
+    }
+    // Premultiplied mix.
+    const w0 = (a0 / 255) * (1 - k);
+    const w1 = (a1 / 255) * k;
+    const a = w0 + w1;
+    if (a <= 0) { out[i + 3] = 0; continue; }
+    out[i] = (src[i] * w0 + out[i] * w1) / a;
+    out[i + 1] = (src[i + 1] * w0 + out[i + 1] * w1) / a;
+    out[i + 2] = (src[i + 2] * w0 + out[i + 2] * w1) / a;
+    out[i + 3] = a * 255;
+  }
+  return out;
+}
+
+/**
+ * The effect drawn over the layer through an SVG mask (for effects made
+ * of copies, and for layer masks where none can be drawn as pixels):
+ * exact where the effect keeps the layer opaque.
+ *
+ * @param {string} before - The layer's body before the effect.
+ * @param {{ defs: string, body: string }} after - Its markup after (all the defs so far).
+ * @param {import('./mask.js').EffectMask} spec
+ * @param {any} ctx
+ * @param {string} id
+ * @returns {{ defs: string, body: string }}
+ */
+export function maskOverlay(before, after, spec, ctx, id) {
+  const W = ctx.width;
+  const H = ctx.height;
+  const pad = Math.max(W, H);
+  const region = { x: -pad, y: -pad, width: W + 2 * pad, height: H + 2 * pad };
+  let content;
+  let extra = '';
+  if (spec.layers) {
+    const m = /** @type {any} */ (spec)[RESOLVED] ?? { defs: '', body: '' };
+    extra = m.defs;
+    content = spec.invert
+      ? `<rect${attrs({ ...region, fill: '#fff' })}/><g filter="url(#${id}i)">${m.body}</g>`
+      : m.body;
+    if (spec.invert) extra += `<filter${attrs({ id: `${id}i`, filterUnits: 'userSpaceOnUse', ...region, 'color-interpolation-filters': 'sRGB' })}><feColorMatrix type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"/></filter>`;
+  } else {
+    const g = gradientImage(spec, ctx, 0.25);
+    content = `<image${attrs({ x: g.x, y: g.y, width: g.width, height: g.height, preserveAspectRatio: 'none', href: g.href })}/>`;
+  }
+  const defs = `${after.defs}${extra}<mask${attrs({ id: `${id}k`, maskUnits: 'userSpaceOnUse', ...region })}>${content}</mask>`;
+  return { defs, body: `${before}<g mask="url(#${id}k)">${after.body}</g>` };
+}

package/src/effects/motion.d.ts

@@ -0,0 +1,6 @@
+// The motion blur on pixels (renderImage).
+import type { Effect } from './index.js';
+import type { Pixels } from './buffer.js';
+
+/** A Gaussian blur along an angle, on pixels. */
+export function motion(img: Pixels, fx: Extract<Effect, { kind: 'motion' }>, ctx: object): Uint8ClampedArray;

package/src/effects/motion.js

@@ -0,0 +1,60 @@
+/**
+ * `motion` on pixels: a Gaussian blur along `angle` (`length` its
+ * standard deviation) and `spread` across it. librsvg can't blur along
+ * one axis under a rotation (a turned one-axis `feGaussianBlur` comes out
+ * round), so `renderImage` draws motion blur here (`renderSvg` keeps the
+ * filter, which browsers draw correctly): the layer is
+ * resampled into a frame turned to the angle (the edge held, so a
+ * full-bleed photo doesn't fade at the edges), blurred along rows with
+ * running sums (O(1) a pixel), and resampled back.
+ *
+ * @module effects/motion
+ */
+
+import { px, premultiplied, unpremultiply, bilinear, gaussian } from './buffer.js';
+
+/**
+ * The blur.
+ *
+ * @param {import('./buffer.js').Pixels} img
+ * @param {import('./index.js').Effect & { kind: 'motion' }} fx
+ * @param {any} ctx
+ * @returns {Uint8ClampedArray}
+ */
+export function motion(img, fx, ctx) {
+  const { width: w, height: h } = img;
+  const along = px(fx.length, ctx, img, '3vmin');
+  const across = px(fx.spread, ctx, img, 0);
+  const a = ((fx.angle ?? 0) * Math.PI) / 180;
+  const c = Math.cos(a);
+  const s = Math.sin(a);
+  const src = premultiplied(img);
+  // The turned frame: big enough to hold the layer, with room for the blur at its ends.
+  const pad = Math.ceil(3 * Math.max(along, across)) + 2;
+  const rw = Math.ceil(Math.abs(w * c) + Math.abs(h * s)) + 2 * pad;
+  const rh = Math.ceil(Math.abs(w * s) + Math.abs(h * c)) + 2 * pad;
+  const cx = (w - 1) / 2;
+  const cy = (h - 1) / 2;
+  const rcx = (rw - 1) / 2;
+  const rcy = (rh - 1) / 2;
+  // Turned frame (u along the blur, v across) → layer pixels, the edge held
+  // (a full-bleed photo stays full-bleed; a cut-out's edge is clear anyway).
+  const turnedPx = new Uint8ClampedArray(rw * rh * 4);
+  for (let v = 0, o = 0; v < rh; v++) {
+    for (let u = 0; u < rw; u++, o += 4) {
+      const du = u - rcx;
+      const dv = v - rcy;
+      bilinear(src, w, h, cx + du * c - dv * s, cy + du * s + dv * c, turnedPx, o);
+    }
+  }
+  gaussian(turnedPx, rw, rh, 4, along, across);
+  const out = new Uint8ClampedArray(w * h * 4);
+  for (let y = 0, o = 0; y < h; y++) {
+    for (let x = 0; x < w; x++, o += 4) {
+      const dx = x - cx;
+      const dy = y - cy;
+      bilinear(turnedPx, rw, rh, rcx + dx * c + dy * s, rcy - dx * s + dy * c, out, o);
+    }
+  }
+  return img.opaque ? out : unpremultiply(out);
+}

package/src/effects/newsprint.d.ts

@@ -0,0 +1,6 @@
+// A four-colour process halftone.
+import type { Effect } from './index.js';
+import type { Pixels } from './buffer.js';
+
+/** `newsprint`, on pixels. */
+export function newsprint(img: Pixels, fx: Extract<Effect, { kind: 'newsprint' }>, ctx: object): Uint8ClampedArray;

package/src/effects/newsprint.js

@@ -0,0 +1,89 @@
+/**
+ * `newsprint`: a four-colour process halftone, computed on pixels. The
+ * layer is separated into cyan, magenta, yellow and black (with grey
+ * component replacement), each screened at its classic angle (C 15°,
+ * M 75°, Y 0°, K 45°) as round dots that join into a checkerboard past
+ * half coverage, anti-aliased, and printed on `paper` with process inks.
+ *
+ * @module effects/newsprint
+ */
+
+import { px } from './buffer.js';
+import { rgb } from './util.js';
+
+/** Process inks (sRGB approximations of SWOP on uncoated stock). */
+const INKS = { c: '#00a3e0', m: '#e5007e', y: '#ffe600', k: '#1d1b1c' };
+
+/**
+ * `newsprint`: `cell` (a length: the screen ruling), `angles`
+ * (`[c, m, y, k]`, degrees), `paper`, `gain` (dot gain, 0–0.3) and `gcr`
+ * (0–1: how much grey goes to black).
+ *
+ * @param {import('./buffer.js').Pixels} img
+ * @param {import('./index.js').Effect & { kind: 'newsprint' }} fx
+ * @param {any} ctx
+ * @returns {Uint8ClampedArray}
+ */
+export function newsprint(img, fx, ctx) {
+  const { data, width: w, height: h } = img;
+  const cell = Math.max(2, px(fx.cell, ctx, img, '1vmin'));
+  const angles = fx.angles ?? [15, 75, 0, 45];
+  const paper = rgb(fx.paper ?? '#f2ede1');
+  const inks = ['c', 'm', 'y', 'k'].map((k) => rgb(/** @type {any} */ (INKS)[k]));
+  const gain = fx.gain ?? 0.08;
+  const gcr = fx.gcr ?? 0.8;
+  const rot = angles.map((a) => { const t = (a * Math.PI) / 180; return [Math.cos(t) / cell, Math.sin(t) / cell]; });
+  // Anti-aliasing: a pixel's width in cell units.
+  const aa = 1 / cell;
+  const out = new Uint8ClampedArray(data.length);
+  const cov = new Float64Array(4);
+  for (let y = 0, i = 0; y < h; y++) {
+    for (let x = 0; x < w; x++, i += 4) {
+      const r = data[i] / 255;
+      const g = data[i + 1] / 255;
+      const b = data[i + 2] / 255;
+      // Separation: grey component replaced by black.
+      const k = (1 - Math.max(r, g, b)) * gcr;
+      const d = 1 - k || 1;
+      cov[0] = (1 - r - k) / d;
+      cov[1] = (1 - g - k) / d;
+      cov[2] = (1 - b - k) / d;
+      cov[3] = k;
+      let R = paper[0];
+      let G = paper[1];
+      let B = paper[2];
+      for (let n = 0; n < 4; n++) {
+        const c = Math.min(1, Math.max(0, cov[n] * (1 + gain * (1 - cov[n]) * 4)));
+        if (c <= 0.002) continue;
+        const [cs, sn] = rot[n];
+        // The pixel in this screen's cell coordinates, -1–1 across a cell.
+        const u = x * cs + y * sn;
+        const v = -x * sn + y * cs;
+        const fu = (u - Math.floor(u)) * 2 - 1;
+        const fv = (v - Math.floor(v)) * 2 - 1;
+        let ink;
+        if (c <= 0.5) {
+          // A dot of area c (of the cell's 4 square units).
+          const rad = Math.sqrt((4 * c) / Math.PI);
+          ink = Math.min(1, Math.max(0, (rad - Math.hypot(fu, fv)) / (2 * aa) + 0.5));
+        } else {
+          // Past half: paper shrinks to holes at the corners.
+          const rad = Math.sqrt((4 * (1 - c)) / Math.PI);
+          const dc = Math.hypot(1 - Math.abs(fu), 1 - Math.abs(fv));
+          ink = Math.min(1, Math.max(0, (dc - rad) / (2 * aa) + 0.5));
+        }
+        if (!ink) continue;
+        // Inks multiply, as they do on paper.
+        const t = inks[n];
+        R *= 1 - ink * (1 - t[0]);
+        G *= 1 - ink * (1 - t[1]);
+        B *= 1 - ink * (1 - t[2]);
+      }
+      out[i] = R * 255;
+      out[i + 1] = G * 255;
+      out[i + 2] = B * 255;
+      out[i + 3] = data[i + 3];
+    }
+  }
+  return out;
+}