Background Blur

Overview

Background blur applies a blur to the pixels that are already rendered behind an object. The blur is masked by the object's shape (or the frame background when applied to frames), then the object itself is drawn on top.

Data Model

Background blur is stored on the object effects array:

{
  effects: [
    {
      type: 'backgroundBlur',
      radius: 12,
      enabled: true,
    },
  ],
}

Access in the Editor

editor.updateObjectProperty(objectId, 'effects', [
  { type: 'backgroundBlur', radius: 12 },
])

Rendering Behavior

• Uses the current scene canvas as the blur source (what is already drawn behind the object).
• Masks the blur using the object's shape. For frames, the mask is the frame background.
• Respects parent clipping (for example, a clipped frame).
• Skips rendering when enabled is false or radius <= 0.
• The blur radius is scaled by the canvas pixel ratio.

Notes

• The effect is applied before the object draws, so the object stays sharp on top of the blurred backdrop.
• Updating effects triggers a re-render via the normal object update flow.