Effect regions
Apply an effect to part of a clip, such as blurring a password or spotlighting a button.
Coming in the next release
Effect regions are built and tested in @miraiclip/core and @miraiclip/renderer, and ship in the next SDK release.
// Pixelate a password field
project.dispatch({
type: "effect/add",
payload: {
clipId: "screen",
effectId: "hide-password",
kind: "pixelate",
region: { x: 0.42, y: 0.31, width: 0.22, height: 0.05, feather: 0.2 },
},
});Any effect, built-in or custom, can apply to part of a clip instead of all of it. The region is measured in the clip's own frame, so it stays on the same content when the clip is moved, zoomed or rotated. A redaction stays over the password through a zoom.
The region
| Field | Default | Meaning |
|---|---|---|
x, y | required | Top-left corner, as fractions (0 to 1) of the clip's width and height |
width, height | required | Size, as fractions of the clip's width and height |
shape | "rect" | "rect" or "ellipse" |
feather | 0 | Soft edge, as a fraction of the region's shorter side |
invert | false | Apply the effect everywhere except the region |
animations | none | Keyframes for x, y, width and height |
Spotlight
invert darkens or blurs everything except the region:
project.dispatch({
type: "effect/add",
payload: {
clipId: "screen",
kind: "colorAdjust",
params: { brightness: -0.4 },
region: { x: 0.7, y: 0.08, width: 0.12, height: 0.07, shape: "ellipse", feather: 0.5, invert: true },
},
});Change or remove a region
// Move it
project.dispatch({
type: "effect/update",
payload: { clipId: "screen", effectId: "hide-password", region: { x: 0.4, y: 0.3, width: 0.25, height: 0.06 } },
});
// Back to the whole clip
project.dispatch({ type: "effect/update", payload: { clipId: "screen", effectId: "hide-password", region: null } });effect/update replaces the whole region and keeps its keyframes.
Follow moving content
Keyframe a coordinate when the content moves inside the clip, for example a field that scrolls:
for (const [timeUs, y] of [[0, 0.31], [2_000_000, 0.18]] as const) {
project.dispatch({
type: "effect/set-region-keyframe",
payload: { clipId: "screen", effectId: "hide-password", property: "y", timeUs, value: y, easing: "easeInOut" },
});
}| Command | Payload |
|---|---|
effect/set-region-keyframe | { clipId, effectId, property, timeUs, value, easing?, anchor? }. property is x, y, width or height. timeUs is clip-relative, as in keyframes |
effect/clear-region-keyframes | { clipId, effectId, property? }. Omit property to clear all four |
effect/set-region-keyframe rejects with no-region if the effect has no region yet. Set one with effect/add or effect/update first.
evaluateEffectRegion(region, localUs) from @miraiclip/core returns the region at a clip-relative time, which is what preview and export draw. Use it to draw the region's outline in your editor.
For screen recordings, planRedactions in @miraiclip/screencast creates these regions from the fields a recording marked as sensitive. See Screen recordings for developers.