Writing a Technique

A technique is a function that takes the host and layer and returns a painter. The painter gets a frame every time the element moves and has to undo everything in clear.

import { sigmaFor, type Technique } from "@web-kits/motion-blur";

const soft: Technique = ({ layer }) => ({
  paint({ dx, dy }) {
    layer.style.filter = `blur(${sigmaFor(Math.hypot(dx, dy))}px)`;
  },
  clear() {
    layer.style.removeProperty("filter");
  },
});

Frames

Each frame has:

Field
`path(t)`	The element's transform while the shutter is open, from `t = -0.5` to `0.5`.
`matrix`	The transform on screen now.
`dx`, `dy`	How far the centre travels while the shutter is open, in the element's own px.
`streak`	The furthest any corner travels, in screen px.
`origin`, `width`, `height`	The element's `transform-origin` and size.

Add destroy to the painter if it puts anything in the page. Set soft.key = "soft" when you build techniques inside a render, so a new function with the same settings doesn't rebuild the painter. sigmaFor(length) turns a streak length into the Gaussian with the same spread as a camera's box blur.