Class: EffectChain
Defined in: attributes/shape/effects/chain.ts:15
Immutable, chainable list of scene effects.
Each builder method returns a new EffectChain with the effect appended,
so chains are safe to share and branch.
Example
const fx = FX.blur(4).grayscale(0.5);
node.effects = fx; // assign directly
node.effects = [...fx, { type: 'pixelate', ... }]; // spread into array
Constructors
Constructor
new EffectChain(
list?):EffectChain
Defined in: attributes/shape/effects/chain.ts:16
Parameters
list?
SceneEffect[] = []
Returns
EffectChain
Properties
list
list:
SceneEffect[] =[]
Defined in: attributes/shape/effects/chain.ts:16
Methods
[iterator]()
[iterator]():
Generator<SceneEffect,void,unknown>
Defined in: attributes/shape/effects/chain.ts:131
Allows spreading the chain into an array: [...FX.blur(5)].
Returns
Generator<SceneEffect, void, unknown>
backgroundBlur()
backgroundBlur(
radius):EffectChain
Defined in: attributes/shape/effects/chain.ts:28
Append a Figma-style background blur with the given pixel radius. Blurs
whatever is painted beneath the node and clips that blur to the node's
silhouette, leaving the node's own edges sharp.
Parameters
radius
number
Returns
EffectChain
bloom()
bloom(
threshold?,radius?,intensity?):EffectChain
Defined in: attributes/shape/effects/chain.ts:83
Append a bloom (glow) effect. Bright areas bleed soft light outward via a screen-blend of the blurred bright-pass onto the layer.
Parameters
threshold?
number = 0.7
0–1 luminance cutoff — only pixels brighter than this bloom (default 0.7).
radius?
number = 12
spread in pixels (default 12).
intensity?
number = 1
additive multiplier for the bloom pass (default 1).
Returns
EffectChain
blur()
blur(
radius):EffectChain
Defined in: attributes/shape/effects/chain.ts:19
Append a Gaussian blur with the given pixel radius.
Parameters
radius
number
Returns
EffectChain
bulgePinch()
bulgePinch(
strength,radius?,center?):EffectChain
Defined in: attributes/shape/effects/chain.ts:60
Append a bulge/pinch lens that warps the backdrop within the node's shape. The lens fills the node's bounding box and is clipped to its silhouette, so a rect bulges as a rect, a rounded rect rounds, an ellipse domes, etc.
Parameters
strength
number
positive bulges (magnifies), negative pinches (compresses) (≈ −1…1).
radius?
number = 1
reach in 0–1: how far across the node box the warp spans (default 1).
center?
distortion centre in 0–1 layer coords (default middle).
x
number
y
number
Returns
EffectChain
chromaticAberration()
chromaticAberration(
amount?,angle?):EffectChain
Defined in: attributes/shape/effects/chain.ts:102
Append a chromatic aberration effect — red/blue colour fringing that mimics lens dispersion.
Parameters
amount?
number = 4
pixel offset distance for the R/B channel fringe (default 4).
angle?
number = 0
angle in degrees (0 = horizontal, R right / B left) (default 0).
Returns
EffectChain
grayscale()
grayscale(
amount):EffectChain
Defined in: attributes/shape/effects/chain.ts:38
Append a grayscale effect with amount in the 0–1 range.
Parameters
amount
number
Returns
EffectChain
pixelate()
pixelate(
size):EffectChain
Defined in: attributes/shape/effects/chain.ts:33
Append a pixelate effect where both axes use the same block size (0–1).
Parameters
size
number
Returns
EffectChain
skslBackdrop()
skslBackdrop(
shader,uniforms?):EffectChain
Defined in: attributes/shape/effects/chain.ts:126
Append a custom SkSL backdrop effect. The shader receives
uniform shader u_backdrop — a snapshot of the canvas content beneath the
node — and resamples it to produce distortion, ripple, refraction, etc.
The result replaces the backdrop within the node's silhouette clip.
Parameters
shader
string
SkSL source. First child shader is always u_backdrop.
uniforms?
SkSLUniform[] = []
Values in declaration order — lerped between animation frames.
Returns
EffectChain
skslLayer()
skslLayer(
shader,uniforms?,blendMode?):EffectChain
Defined in: attributes/shape/effects/chain.ts:114
Append a custom SkSL overlay shader applied as a layer effect.
The shader generates colour from position/uniforms and is blended onto the
node's layer using blendMode (default 'screen').
Parameters
shader
string
SkSL source. Uniforms declared after any built-ins are supplied via uniforms.
uniforms?
SkSLUniform[] = []
Values in declaration order — lerped between animation frames.
blendMode?
string = 'screen'
How the shader composites onto the layer (default 'screen').
Returns
EffectChain
texture()
texture(
radius,size?):EffectChain
Defined in: attributes/shape/effects/chain.ts:47
Append a texture (spatter dissolve) effect.
Parameters
radius
number
spread distance — how far the grain dissolve reaches inward.
size?
number | { x: number; y: number; }
grain cell size in px; a number sets both axes, or pass {x, y}.
Returns
EffectChain
toJSON()
toJSON():
SceneEffect[]
Defined in: attributes/shape/effects/chain.ts:136
Serializes to the raw effect array so frameworks that call toJSON get a plain value.
Returns
vintage()
vintage(
amount?,warmth?):EffectChain
Defined in: attributes/shape/effects/chain.ts:92
Append a vintage / film-look colour grading effect.
Parameters
amount?
number = 1
0–1: 0 = original, 1 = full sepia+desaturate (default 1).
warmth?
number = 0.2
1…1: negative = cool/cyan tint, positive = warm/amber tint (default 0.2).
Returns
EffectChain
zoom()
zoom(
scale?,center?):EffectChain
Defined in: attributes/shape/effects/chain.ts:72
Append a zoom lens that magnifies the backdrop beneath the node. The lens
fills the node's bounding box and is clipped to its silhouette, so whatever
is painted underneath shows through scaled about center — like a
magnifying glass shaped to the node.
Parameters
scale?
number = 2
magnification factor (1 = none, 2 = 2×, 0.5 = zoomed out) (default 2).
center?
zoom centre in 0–1 layer coords (default middle).
x
number
y
number
Returns
EffectChain