@arraypress/covers 1.1.0 → 1.3.1

package/src/{effects → paint}/tile.d.ts

@@ -1,5 +1,5 @@
 // Tile paints.
-import type { TilePaint } from './paint.js';
+import type { TilePaint } from './index.js';
 
 /** Tile kinds. */
 export const TILES: readonly ('checker' | 'stripes' | 'dots' | 'grid' | 'custom')[];

package/src/{effects → paint}/tile.js

@@ -2,12 +2,12 @@
  * Tile paints: a pattern repeated over a shape (checker, stripes, dots,
  * grid), or a custom tile of markup.
  *
- * @module effects/tile
+ * @module paint/tile
  */
 
-import { attrs, num } from '../svg.js';
-import { len } from '../geometry.js';
-import { toHex } from '../color.js';
+import { attrs, num } from '@logomarks/image-effects/svg';
+import { len } from '@logomarks/image-effects/length';
+import { toHex } from '@logomarks/image-effects/color';
 import { sanitize } from '../layers/svg.js';
 
 /** Tile kinds. */

package/src/palette.js

@@ -20,7 +20,7 @@
  */
 
 import { relativeLuminance, contrastRatio, readableOn, readableText } from '@arraypress/color-utils';
-import { toHex, toOklch, fromOklch, mixOklab } from './color.js';
+import { toHex, toOklch, fromOklch, mixOklab } from '@logomarks/image-effects/color';
 
 /**
  * Curated presets. Each is a full palette; the light ones pair with the

package/src/platform/files.d.ts

@@ -0,0 +1,6 @@
+// Files read from disk in Node.
+
+/** Read a text file synchronously (Node). */
+export function readTextSync(path: string | URL): string;
+/** A file shipped with the package, from disk (Node), or undefined. */
+export function packageFileSync(rel: string): Uint8Array | undefined;

package/src/platform/files.js

@@ -0,0 +1,41 @@
+/**
+ * Files read from disk in Node: a recipe's JSON, and the fonts that ship
+ * with this package. Node's built-ins come from the image-effects platform
+ * adapter (`process.getBuiltinModule`, or what `@arraypress/covers/node`
+ * installs).
+ *
+ * @module platform/files
+ */
+
+import { node } from '@logomarks/image-effects/platform';
+
+/** This module was loaded from disk (Node, Deno, Bun), not a bundle or a page. */
+const FROM_DISK = String(import.meta.url).startsWith('file:');
+
+/**
+ * Read a text file synchronously (Node only; `loadRecipe`).
+ *
+ * @param {string | URL} path
+ * @returns {string}
+ */
+export function readTextSync(path) {
+  const fs = node('fs');
+  if (!fs) throw new Error('Reading a file synchronously needs Node. In a browser or Worker, fetch the JSON and pass it to defineRecipe().');
+  return fs.readFileSync(path, 'utf8');
+}
+
+/**
+ * Read a file that ships with this package (Node, from disk), or undefined.
+ *
+ * @param {string} rel - Relative to the package root (`'fonts/inter-latin-400.woff'`).
+ * @returns {Uint8Array | undefined}
+ */
+export function packageFileSync(rel) {
+  const fs = node('fs');
+  if (!fs || !FROM_DISK) return undefined;
+  try {
+    return fs.readFileSync(new URL(`../../${rel}`, import.meta.url));
+  } catch {
+    return undefined;
+  }
+}

package/src/platform/harfbuzz.js

@@ -7,7 +7,7 @@
  * @module platform/harfbuzz
  */
 
-import { isBytes } from './bytes.js';
+import { isBytes } from '@logomarks/image-effects/platform';
 import { settings } from './settings.js';
 import { loadBytes, asBytes } from './load.js';
 

package/src/platform/index.d.ts

@@ -1,8 +1,8 @@
 // The platform adapter.
-export { node, installNode, isNode, FROM_DISK, readTextSync, packageFileSync } from './node.js';
-export type { NodeModules } from './node.js';
+export { node, installNode, isNode, deflateSync, deflate, inflate, unbrotli, unbrotliSync, u8, isBytes, toBase64, fromBase64, latin1, utf8, encodeUtf8, concat, fromDataUri, hexDigest } from '@logomarks/image-effects/platform';
+export type { NodeModules } from '@logomarks/image-effects/platform';
+export { readTextSync, packageFileSync } from './files.js';
 export { settings, configure, registry } from './settings.js';
 export type { Settings } from './settings.js';
 export { loadBytes } from './load.js';
-export { deflateSync, deflate, inflate, unbrotli, unbrotliSync } from './compress.js';
 export { harfbuzz, shaperModule } from './harfbuzz.js';

package/src/platform/index.js

@@ -1,13 +1,15 @@
 /**
  * The platform: everything that differs between Node, a browser and a
- * Cloudflare Worker, behind one small adapter. Nothing here imports a
- * `node:` module.
+ * Cloudflare Worker, behind one small adapter. Node's built-ins, zlib and
+ * the byte helpers are image-effects' (one registry, so
+ * `@arraypress/covers/node` installs for both); settings, loading, files
+ * and HarfBuzz are covers' own. Nothing here imports a `node:` module.
  *
  * @module platform
  */
 
-export { node, installNode, isNode, FROM_DISK, readTextSync, packageFileSync } from './node.js';
+export { node, installNode, isNode, deflateSync, deflate, inflate, unbrotli, unbrotliSync, u8, isBytes, toBase64, fromBase64, latin1, utf8, encodeUtf8, concat, fromDataUri, hexDigest } from '@logomarks/image-effects/platform';
+export { readTextSync, packageFileSync } from './files.js';
 export { settings, configure, registry } from './settings.js';
 export { loadBytes } from './load.js';
-export { deflateSync, deflate, inflate, unbrotli, unbrotliSync } from './compress.js';
 export { harfbuzz, shaperModule } from './harfbuzz.js';

package/src/platform/load.js

@@ -6,8 +6,7 @@
  * @module platform/load
  */
 
-import { isBytes, u8, fromDataUri } from './bytes.js';
-import { node, isNode } from './node.js';
+import { isBytes, u8, fromDataUri, node, isNode } from '@logomarks/image-effects/platform';
 import { settings } from './settings.js';
 
 /** @returns {boolean} */

package/src/print.js

@@ -5,11 +5,13 @@
  * @module print
  */
 
-import { attrs, num, layerAttrs, esc } from './svg.js';
-import { len, regionPx } from './geometry.js';
-import { toHex } from './color.js';
-import { createRng } from './rng.js';
-import { encodePngAsync, pngUri } from './png.js';
+import { attrs, num, esc } from '@logomarks/image-effects/svg';
+import { layerAttrs } from './layers/util.js';
+import { len } from '@logomarks/image-effects/length';
+import { regionPx } from './geometry.js';
+import { toHex } from '@logomarks/image-effects/color';
+import { createRng } from '@logomarks/image-effects/rng';
+import { encodePngAsync, pngUri } from '@logomarks/image-effects/png';
 import { text as textLayer } from './layers.js';
 
 /** Classic risograph inks, by name (`'riso:pink'`). Approximations, not trademarks. */
@@ -181,7 +183,7 @@ export async function ink(layer, ctx) {
 /**
  * Seeded value noise in 2D, smooth, in [0, 1], with octaves.
  *
- * @param {import('./rng.js').Rng} rng
+ * @param {import('@logomarks/image-effects/rng').Rng} rng
  * @param {number} octaves
  * @returns {(x: number, y: number) => number}
  */
@@ -457,7 +459,7 @@ function smoothPath(pts) {
  * Seeded demo peaks: a smooth loudness envelope with transients. Not audio:
  * pass `peaks` or `audio` for a real episode.
  *
- * @param {import('./rng.js').Rng} rng
+ * @param {import('@logomarks/image-effects/rng').Rng} rng
  * @param {number} n
  * @returns {number[]}
  */

package/src/recipes.js

@@ -33,7 +33,7 @@ import { BUILTIN_JSON } from './builtins.js';
  * @property {number} width - Canvas width.
  * @property {number} height - Canvas height.
  * @property {import('./index.js').Palette} palette - Resolved palette.
- * @property {import('./rng.js').Rng} rng - The cover's random stream (for recipe-level choices).
+ * @property {import('@logomarks/image-effects/rng').Rng} rng - The cover's random stream (for recipe-level choices).
  * @property {number} u - The design unit: `sqrt(width × height)`.
  * @property {string} seed - The cover's seed (JSON recipes seed each layer's draws from it).
  */

package/src/render/backdrop.js

@@ -5,8 +5,8 @@
  * @module render/backdrop
  */
 
-import { toHex } from '../color.js';
-import { pixelsOf } from '../raster/index.js';
+import { toHex } from '@logomarks/image-effects/color';
+import { pixelsOf } from '@logomarks/image-effects/raster';
 
 /**
  * The average colour under a box, from the layers drawn so far: rendered

package/src/render/grain.js

@@ -16,7 +16,7 @@ import { VARY_FLOOR, VARY_PEAK } from '../layers.js';
  * @param {any} sharp - The sharp module.
  * @param {number} width @param {number} height
  * @param {import('../index.js').GrainLayer} layer
- * @param {import('../rng.js').Rng} rng - The layer's stream.
+ * @param {import('@logomarks/image-effects/rng').Rng} rng - The layer's stream.
  * @returns {Promise<{ data: Buffer, channels: 1 | 3 }>} Full-size noise.
  */
 export async function noise(sharp, width, height, layer, rng) {

package/src/render/group.js

@@ -4,10 +4,10 @@
  * @module render/group
  */
 
-import { attrs, esc, num } from '../svg.js';
+import { attrs, esc, num } from '@logomarks/image-effects/svg';
 import { pos } from '../layers/util.js';
 import { scaledReport } from './report.js';
-import { IDENTITY, compose } from '../effects/transform.js';
+import { IDENTITY, compose } from './transform.js';
 
 /**
  * `group` — a stack of layers drawn as one: in a box (`x`, `y`, `width`,
@@ -40,7 +40,7 @@ export async function renderGroup(layer, ctx, decorate) {
   const tx = bx + (bw - vw * sx) * ax;
   const ty = by + (bh - vh * sy) * ay;
   const k = Math.min(sx, sy);
-  /** @type {import('../effects/transform.js').Affine} Grid units to the box. */
+  /** @type {import('./transform.js').Affine} Grid units to the box. */
   const grid = [sx, 0, 0, sy, tx - vx * sx, ty - vy * sy];
   const parts = await ctx.stack(layer.layers ?? [], { tag: 'g', width: vw, height: vh, scale: k, res: Math.max(sx, sy), matrix: grid });
   let defs = parts.map((/** @type {any} */ p) => p.defs).join('');

package/src/render/key.js

@@ -4,8 +4,7 @@
  * @module render/key
  */
 
-import { loadBytes } from '../platform/index.js';
-import { hexDigest, u8, isBytes } from '../platform/bytes.js';
+import { loadBytes, hexDigest, u8, isBytes } from '../platform/index.js';
 import { fontBytes } from '../fonts.js';
 import { cover } from '../render.js';
 import { VERSION } from '../version.js';

package/src/{effects → render}/transform.d.ts

@@ -15,7 +15,8 @@ export interface LayerTransform {
   origin?: [Length, Length] | { x?: Length; y?: Length } | 'center';
 }
 
-
+/** A transform's `origin` in px (`'center'`, the default, is the canvas centre). */
+export function originOf(origin: LayerTransform['origin'], canvas: { width: number; height: number }): [number, number];
 /** A `transform` option as an SVG transform string (a string is used as written). */
 export function transformAttr(t: LayerTransform | string | undefined, canvas: { width: number; height: number }): string | undefined;
 

package/src/{effects → render}/transform.js

@@ -1,10 +1,10 @@
 /**
  * A layer's `transform` option as an SVG transform.
  *
- * @module effects/transform
+ * @module render/transform
  */
 
-import { num } from '../svg.js';
+import { num } from '@logomarks/image-effects/svg';
 import { pos } from '../layers/util.js';
 
 /**
@@ -25,9 +25,7 @@ export function transformAttr(t, canvas) {
   const parts = [];
   const tr = Array.isArray(t.translate) ? { x: t.translate[0], y: t.translate[1] } : t.translate;
   if (tr) parts.push(`translate(${num(pos(tr.x ?? 0, 'x', canvas))} ${num(pos(tr.y ?? 0, 'y', canvas))})`);
-  const o = t.origin === undefined || t.origin === 'center'
-    ? [canvas.width / 2, canvas.height / 2]
-    : Array.isArray(t.origin) ? [pos(t.origin[0], 'x', canvas), pos(t.origin[1], 'y', canvas)] : [pos(t.origin.x, 'x', canvas), pos(t.origin.y, 'y', canvas)];
+  const o = originOf(t.origin, canvas);
   const inner = [];
   if (t.rotate) inner.push(`rotate(${num(t.rotate, 3)})`);
   let [sx, sy] = t.scale == null ? [1, 1] : Array.isArray(t.scale) ? t.scale : [t.scale, t.scale];
@@ -40,6 +38,20 @@ export function transformAttr(t, canvas) {
   return parts.length ? parts.join(' ') : undefined;
 }
 
+/**
+ * A transform's `origin` in px: `[x, y]` or `{ x, y }` (px, `'%'` or
+ * lengths), or `'center'` (the default).
+ *
+ * @param {unknown} origin
+ * @param {{ width: number, height: number }} canvas
+ * @returns {[number, number]}
+ */
+export function originOf(origin, canvas) {
+  if (origin === undefined || origin === 'center') return [canvas.width / 2, canvas.height / 2];
+  const o = /** @type {any} */ (origin);
+  return Array.isArray(o) ? [pos(o[0], 'x', canvas), pos(o[1], 'y', canvas)] : [pos(o.x, 'x', canvas), pos(o.y, 'y', canvas)];
+}
+
 /** @typedef {[number, number, number, number, number, number]} Affine - `[a, b, c, d, e, f]`, as SVG's `matrix()`. */
 
 /** @param {Affine} m @param {Affine} n @returns {Affine} `m × n`. */

package/src/render/use.d.ts

@@ -1,6 +1,6 @@
 // Reusable stacks: `defs` and `use`.
 import type { Layer, BaseLayer, Length } from '../index.js';
-import type { LayerTransform } from '../effects/transform.js';
+import type { LayerTransform } from './transform.js';
 import type { RenderContext, Markup } from './context.js';
 
 /** `defs`: named layers (each with an `id`) that `use` draws; nothing is drawn here. */

package/src/render/use.js

@@ -8,9 +8,9 @@
  * @module render/use
  */
 
-import { attrs, num } from '../svg.js';
+import { attrs, num } from '@logomarks/image-effects/svg';
 import { pos, wrap } from '../layers/util.js';
-import { transformAttr } from '../effects/transform.js';
+import { transformAttr } from './transform.js';
 
 /**
  * `defs`: register named layers for `use`.

package/src/render/wrap.js

@@ -5,12 +5,11 @@
  * @module render/wrap
  */
 
-import { attrs, esc, num } from '../svg.js';
-import { applyEffects, transformAttr, rasterEffect, isRaster, RESOLVED, maskImage } from '../effects/index.js';
-import { transformMatrix, stretchOf, compose, IDENTITY } from '../effects/transform.js';
+import { attrs, esc, num } from '@logomarks/image-effects/svg';
+import { drawEffects, contentBox } from '@logomarks/image-effects';
+import { transformAttr, transformMatrix, stretchOf, compose, IDENTITY } from './transform.js';
 import { renderGroup } from './group.js';
 import { scaledReport } from './report.js';
-import { contentBox } from './content.js';
 
 /** Layer options handled here, for every layer type. */
 export const WRAP_KEYS = ['effects', 'mask', 'knockout', 'clip', 'area'];
@@ -64,7 +63,7 @@ export async function renderWrapped(layer, ctx, scope, renderOne) {
 
   let { defs, body } = grid
     ? await renderGroup(inner, lctx, (/** @type {any} */ part, /** @type {any} */ gctx) => decorate(part, layer, gctx))
-    : await decorateEffects(await renderOne(inner, lctx), layer.effects, lctx);
+    : await drawEffects(await renderOne(inner, lctx), layer.effects, lctx);
   if (geometric) {
     const t = transformAttr(layer.transform, lctx.canvas);
     if (t) body = `<g transform="${t}">${body}</g>`;
@@ -104,61 +103,7 @@ function areaBox(a, ctx, scope) {
  * @returns {Promise<{ defs: string, body: string }>}
  */
 export async function decorate(m, layer, ctx) {
-  return decorateMasks(await decorateEffects(m, layer.effects, ctx), layer, ctx);
-}
-
-/**
- * Effects, in order. Pixel effects are computed on pixels where something
- * can draw them (sharp, a canvas) and copy effects drawn as copies; the
- * rest are SVG filters. An effect's layer `mask` is drawn first (as
- * markup, and as an image for a filter to mix through).
- *
- * @param {{ defs: string, body: string }} m
- * @param {any} list
- * @param {any} ctx
- * @returns {Promise<{ defs: string, body: string }>}
- */
-async function decorateEffects(m, list, ctx) {
-  if (!list) return m;
-  const effects = await Promise.all((Array.isArray(list) ? list : [list]).map((e, i) => withMask(typeof e === 'string' ? { kind: e } : e, ctx, i)));
-  let { defs, body } = m;
-  const filters = async (/** @type {number} */ from, /** @type {number} */ to) => {
-    if (to <= from) return;
-    // In renderImage, filters work over what the layer paints, not the whole canvas.
-    const out = applyEffects(body, effects.slice(from, to), ctx, from, await contentBox({ defs, body }, ctx), defs);
-    defs += out.defs;
-    body = out.body;
-  };
-  let from = 0;
-  for (let i = 0; i < effects.length; i++) {
-    const fx = effects[i];
-    if (!isRaster(fx, ctx)) continue;
-    await filters(from, i);
-    from = i + 1;
-    const raster = await rasterEffect(fx, { defs, body }, ctx, i);
-    if (raster) ({ defs, body } = raster);
-    else await filters(i, i + 1);
-  }
-  await filters(from, effects.length);
-  return { defs, body };
-}
-
-/**
- * An effect with a layer `mask`: the mask's layers drawn (kept on the
- * mask), and for a filter effect drawn as an image too, where something
- * can draw pixels. Other effects come back as they are.
- *
- * @param {any} fx
- * @param {any} ctx
- * @param {number} i
- * @returns {Promise<any>}
- */
-async function withMask(fx, ctx, i) {
-  if (!fx?.mask?.layers || !ctx.stack) return fx;
-  const parts = await ctx.stack(fx.mask.layers, { tag: `fm${i}` });
-  const mask = { ...fx.mask, [RESOLVED]: { defs: parts.map((/** @type {any} */ p) => p.defs).join(''), body: parts.map((/** @type {any} */ p) => p.body).join('') } };
-  if (!isRaster(fx, ctx)) mask[RESOLVED].image = await maskImage(mask, ctx, fx.pad ?? 0.3, fx.kind === 'motion' ? fx.angle ?? 0 : 0);
-  return { ...fx, mask };
+  return decorateMasks(await drawEffects(m, layer.effects, ctx), layer, ctx);
 }
 
 /**

package/src/render.js

@@ -5,12 +5,12 @@
  */
 
 import { node } from './platform/index.js';
-import { createRng } from './rng.js';
-import { resolveSize, unit, len } from './geometry.js';
+import { createRng } from '@logomarks/image-effects/rng';
+import { resolveSize, unit } from './geometry.js';
+import { len } from '@logomarks/image-effects/length';
 import { resolveFormat, printMarks, zonesOverlay, safeBox } from './formats/index.js';
-import { animate, isAnimated } from './animate/index.js';
+import { animate, isAnimated, renderMotion, createSheet, nameSheet } from './animate/index.js';
 import { preloadIcons } from './icons.js';
-import { rasterize } from './raster/index.js';
 import { resolvePalette } from './palette.js';
 import { fontPool } from './fonts.js';
 import { LAYERS } from './layers.js';
@@ -20,15 +20,15 @@ import { registerDefs, renderUse } from './render/use.js';
 import { expandRepeat } from './layers/repeat.js';
 import { scaledReport } from './render/report.js';
 import { hasLayoutRef, resolveLayoutRefs } from './type/layout-ref.js';
-import { svgPixels } from './render/tiles.js';
-import { IDENTITY, compose } from './effects/transform.js';
-import { needsPixels } from './effects/index.js';
+import { rasterize, svgPixels, webpImages } from '@logomarks/image-effects/raster';
+import { IDENTITY, compose } from './render/transform.js';
+import { needsPixels } from '@logomarks/image-effects';
 import { backdropSampler } from './render/backdrop.js';
 import { noise, applyGrain } from './render/grain.js';
 import { extractPalette } from './extract.js';
 import { recipes, applyOverrides } from './recipes.js';
 import { defineRecipe } from './json-recipe.js';
-import { attrs, esc, num } from './svg.js';
+import { attrs, esc, num } from '@logomarks/image-effects/svg';
 
 export { VERSION } from './version.js';
 export { coverKey } from './render/key.js';
@@ -39,7 +39,7 @@ export { safeBox } from './formats/index.js';
 const built = new WeakSet();
 
 /** Options that belong to the cover itself, never to a recipe layer. */
-const COVER_KEYS = new Set(['width', 'height', 'aspect', 'seed', 'palette', 'recipe', 'layers', 'fonts', 'alt', 'radius', 'output', 'format', 'dpi', 'bleed', 'safe', 'cropMarks', 'cutLine', 'cut', 'textRender', 'overlay', 'loop']);
+const COVER_KEYS = new Set(['width', 'height', 'aspect', 'seed', 'palette', 'recipe', 'layers', 'fonts', 'alt', 'radius', 'output', 'format', 'dpi', 'bleed', 'safe', 'cropMarks', 'cutLine', 'cut', 'textRender', 'overlay', 'loop', 'animate', 'poster']);
 
 /**
  * Build a cover: resolve its size and palette and expand its recipe into a
@@ -120,6 +120,8 @@ export function cover(options) {
   if (fmt?.zones) /** @type {any} */ (result).zones = fmt.zones;
   if (o.overlay) /** @type {any} */ (result).overlay = o.overlay;
   if (o.loop != null) /** @type {any} */ (result).loop = o.loop;
+  if (o.animate === false) /** @type {any} */ (result).animate = false;
+  if (o.poster != null) /** @type {any} */ (result).poster = o.poster;
   built.add(result);
   return result;
 }
@@ -136,7 +138,9 @@ export function cover(options) {
  * @property {((box: { x: number, y: number, width: number, height: number }) => Promise<string | undefined>) | undefined} backdrop
  * @property {((entry: any) => void) | undefined} report
  * @property {object} doc - Identity of the document being rendered.
- * @property {number} [t] - The time being drawn (seconds), for animated layers.
+ * @property {number} [t] - The time being drawn (seconds), for animated layers: the frame stills show.
+ * @property {boolean} [live] - Motion plays in the SVG (CSS keyframes in `sheet`).
+ * @property {import('./animate/sheet.js').Sheet} [sheet]
  */
 
 /**
@@ -172,12 +176,13 @@ async function renderStack(layers, scope) {
     if (!layer || !Object.hasOwn(LAYERS, layer.type)) throw new TypeError(`Unknown layer type "${layer?.type}". Types: ${Object.keys(LAYERS).join(', ')}`);
     const n = (seen[layer.type] = (seen[layer.type] ?? -1) + 1);
     const key = layer.seed ?? layer.id ?? `${layer.type}#${n}`;
+    const stream = scope.seedPrefix ? `${c.seed}:${scope.seedPrefix}/${key}` : `${c.seed}:${key}`;
     const ctx = /** @type {any} */ ({
       width: scope.width,
       height: scope.height,
       canvas: { width: scope.width, height: scope.height },
       palette: c.palette,
-      rng: createRng(scope.seedPrefix ? `${c.seed}:${scope.seedPrefix}/${key}` : `${c.seed}:${key}`),
+      rng: createRng(stream),
       id: top ? `l${i}` : `${scope.prefix}_${i}`,
       fonts: scope.fonts,
       sharp: scope.sharp,
@@ -214,7 +219,16 @@ async function renderStack(layers, scope) {
         height: sub.height ?? self.height,
       });
     };
-    const markup = wrapped(layer) ? await renderWrapped(/** @type {any} */ (layer), ctx, scope, renderOne) : await renderOne(/** @type {any} */ (layer), ctx);
+    // The layer drawn with its stream from the start (motion draws it more than once, and its frames with `extra` context).
+    const draw = (/** @type {any} */ l, /** @type {any} */ extra) => {
+      ctx.rng = createRng(stream);
+      const x = extra ? { ...ctx, ...extra } : ctx;
+      return wrapped(l) ? renderWrapped(l, x, scope, renderOne) : renderOne(l, x);
+    };
+    // Motion is drawn when it plays, or at a time a still asks for; otherwise the layer is at rest.
+    const markup = layer.motion != null && (scope.live || scope.t != null)
+      ? await renderMotion(layer, ctx, { live: Boolean(scope.live), t: scope.t, sheet: /** @type {any} */ (scope.sheet), draw })
+      : await draw(layer);
     out.push({ layer, ...markup, ctx });
   }
   return out;
@@ -244,7 +258,7 @@ async function renderOne(layer, ctx) {
  *
  * @param {import('./index.js').Cover} c
  * @param {any} sharp
- * @param {{ report?: (entry: any) => void, t?: number, raster?: boolean, reach?: { px: number } }} [extra] - `raster`: drawn for `renderImage` (librsvg), so effects may take its faster forms; `reach` collects how far filters reach, output px.
+ * @param {{ report?: (entry: any) => void, t?: number, live?: boolean, sheet?: import('./animate/sheet.js').Sheet, raster?: boolean, reach?: { px: number } }} [extra] - `t`: the time to draw (default the cover's `poster`); `live`: motion plays (into `sheet`); `raster`: drawn for `renderImage` (librsvg), so effects may take its faster forms; `reach` collects how far filters reach, output px.
  */
 async function renderLayers(c, sharp, extra = {}) {
   // Icon sets named anywhere in the stack load first (from node_modules, or configure({ icons }) elsewhere).
@@ -255,7 +269,7 @@ async function renderLayers(c, sharp, extra = {}) {
   scan(c.layers);
   if (names.size) await preloadIcons(names);
   const auto = c.layers.some(usesAuto);
-  const t = /** @type {any} */ (extra).t;
+  const t = extra.t ?? /** @type {any} */ (c).poster;
   return renderStack(c.layers, {
     c,
     sharp,
@@ -270,6 +284,8 @@ async function renderLayers(c, sharp, extra = {}) {
     layout: new Map(),
     defs: new Map(),
     t,
+    live: extra.live,
+    sheet: extra.sheet,
     raster: extra.raster,
     reach: extra.reach,
   });
@@ -316,8 +332,12 @@ function documentFor(c, parts) {
  * needs no fonts; images are embedded as data URIs; nothing is fetched.
  * The same cover always gives byte-identical output.
  *
+ * Layers with `motion` play in the SVG (CSS keyframes, stopped by
+ * `prefers-reduced-motion`), unless the cover has `animate: false` or a
+ * time is asked for: then it's a still.
+ *
  * @param {import('./index.js').CoverOptions | import('./index.js').Cover} input - The cover.
- * @param {{ t?: number }} [options] - `t`: the time to draw, in seconds, for layers with keyframes (static covers ignore it).
+ * @param {{ t?: number, images?: 'webp', quality?: number }} [options] - `t`: a still at this time, in seconds, for layers with keyframes or motion (static covers ignore it). `images: 'webp'`: embedded photos and pixel effects re-encoded as WebP where smaller (`quality` for photos, default 82; needs sharp), for SVGs shown in browsers (librsvg can't draw WebP).
  * @returns {Promise<string>} The SVG document.
  *
  * @example
@@ -325,8 +345,24 @@ function documentFor(c, parts) {
  */
 export async function renderSvg(input, options = {}) {
   const c = cover(input);
+  return svgDocument(c, { ...options, live: options.t == null && /** @type {any} */ (c).animate !== false });
+}
+
+/**
+ * A cover's SVG document, playing its motion or still.
+ *
+ * @param {import('./index.js').Cover} c
+ * @param {{ t?: number, live?: boolean, images?: 'webp', quality?: number }} options
+ * @returns {Promise<string>}
+ */
+async function svgDocument(c, options) {
   const sharp = c.layers.some(hasImage) ? await loadSharp(false) : undefined;
-  return documentFor(c, await renderLayers(c, sharp, { t: options.t }));
+  const sheet = options.live ? createSheet() : undefined;
+  const parts = await renderLayers(c, sharp, { t: options.t, live: options.live, sheet });
+  const svg = sheet && !sheet.empty ? nameSheet(documentFor(c, [{ defs: `<style>${sheet.css()}</style>`, body: '' }, ...parts])) : documentFor(c, parts);
+  if (!options.images) return svg;
+  if (options.images !== 'webp') throw new TypeError(`Unknown images "${options.images}" (webp)`);
+  return webpImages(svg, sharp ?? await loadSharp(false), { quality: options.quality });
 }
 
 /**
@@ -383,14 +419,15 @@ export async function renderReport(input) {
 }
 
 /**
- * Render a cover to an image in the browser (a canvas; no sharp).
+ * Render a cover to an image in the browser (a canvas; no sharp): a still,
+ * the cover's `poster` frame or its layers at rest.
  *
  * @param {import('./index.js').CoverOptions | import('./index.js').Cover} input
  * @param {{ format?: 'png' | 'jpeg' | 'webp', quality?: number, scale?: number, width?: number }} [options]
  * @returns {Promise<Blob>}
  */
 export async function renderBlob(input, options = {}) {
-  return rasterize(await renderSvg(input), options);
+  return rasterize(await svgDocument(cover(input), {}), options);
 }
 
 /** @type {Promise<any> | undefined} */

package/src/text.js

@@ -21,7 +21,7 @@
  * @module text
  */
 
-import { num } from './svg.js';
+import { num } from '@logomarks/image-effects/svg';
 
 /**
  * A shaped run of text.

package/src/type/auto-color.js

@@ -11,7 +11,7 @@
  * @module type/auto-color
  */
 
-import { toHex } from '../color.js';
+import { toHex } from '@logomarks/image-effects/color';
 
 /** Backdrop luma (0–1) above which `color: 'auto'` picks the dark colour. */
 export const AUTO_THRESHOLD = 0.72;

package/src/type/glyphs.js

@@ -12,8 +12,8 @@
  * @module type/glyphs
  */
 
-import { len } from '../geometry.js';
-import { toHex } from '../color.js';
+import { len } from '@logomarks/image-effects/length';
+import { toHex } from '@logomarks/image-effects/color';
 
 /** @param {any} list @param {number} i @param {any} fallback @returns {any} The i-th of a cycled list (or a single value). */
 const at = (list, i, fallback) => (list == null ? fallback : Array.isArray(list) ? (list.length ? list[i % list.length] : fallback) : list);

package/src/type/line.js

@@ -5,7 +5,7 @@
  * @module type/line
  */
 
-import { num } from '../svg.js';
+import { num } from '@logomarks/image-effects/svg';
 import { loadFont, pickFont, variationsFor } from '../fonts.js';
 import { shape, outline } from '../text.js';
 import { pixelFace } from './pixel.js';