@motion-script/core / EffectChain
Class: EffectChain
Defined in: attributes/shape/effects/chain.ts:537
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:538
Parameters
list?
SceneEffect[] = []
Returns
EffectChain
Properties
list
list:
SceneEffect[] =[]
Defined in: attributes/shape/effects/chain.ts:538
Methods
[iterator]()
[iterator]():
Generator<SceneEffect,void,unknown>
Defined in: attributes/shape/effects/chain.ts:1205
Allows spreading the chain into an array: [...FX.blur(5)].
Returns
Generator<SceneEffect, void, unknown>
ascii()
ascii(
options?):EffectChain
Defined in: attributes/shape/effects/chain.ts:979
Append ASCII art — the content divided into a grid of cells, each cell's tone replaced by the glyph that carries a matching amount of ink.
Set background: 'transparent' to lay the glyphs over whatever is behind
the node instead of over a solid field.
Parameters
options?
number | AsciiOptions
Returns
EffectChain
bitCrush()
bitCrush(
options?):EffectChain
Defined in: attributes/shape/effects/chain.ts:959
Append colour-depth reduction — bits per channel, or a fixed hardware
palette. Pair with EffectChain.dither so gradients survive the cut.
Parameters
options?
number | BitCrushOptions
Returns
EffectChain
blockDisplace()
blockDisplace(
options?):EffectChain
Defined in: attributes/shape/effects/chain.ts:940
Append datamosh-style band tearing. Step seed in whole numbers to jump
between distinct glitch states rather than sliding between them.
Parameters
options?
number | BlockDisplaceOptions
Returns
EffectChain
bloom()
bloom(
options?):EffectChain
Defined in: attributes/shape/effects/chain.ts:622
Append a bloom (glow) effect. Bright areas bleed soft light outward via a screen-blend of the blurred bright-pass onto the layer.
Parameters
options?
number | BloomOptions
Returns
EffectChain
blur()
blur(
options):EffectChain
Defined in: attributes/shape/effects/chain.ts:549
Append a Gaussian blur. Pass { mode: "backdrop" } to blur the content
beneath the node (clipped to its silhouette, Figma-style) instead of the
node's own content.
Parameters
options
number | BlurOptions
Returns
EffectChain
bulge()
bulge(
options):EffectChain
Defined in: attributes/shape/effects/chain.ts:594
Append a bulge/pinch lens applied to the node's own content (like blur), not the backdrop. A barrel distortion magnifies the centre and pins the edges; a negative strength pinches the centre inward instead.
Parameters
options
number | BulgeOptions
Returns
EffectChain
chromaticAberration()
chromaticAberration(
options?):EffectChain
Defined in: attributes/shape/effects/chain.ts:648
Append a chromatic aberration effect — red/blue colour fringing that mimics lens dispersion.
Parameters
options?
number | ChromaticAberrationOptions
Returns
EffectChain
colorAdjustment()
colorAdjustment(
options):EffectChain
Defined in: attributes/shape/effects/chain.ts:889
Append photographic grading (brightness / contrast / saturation / vibrance /
shadows / highlights / temperature / tint) — ImageFilters.colorAdjustment
on any node. For darkened edges use EffectChain.vignette.
Parameters
options
Returns
EffectChain
curves()
curves(
options):EffectChain
Defined in: attributes/shape/effects/chain.ts:877
Append a tone curve — the same adjustment ImageFilters.curves applies to a
photo, on any node.
Parameters
options
Returns
EffectChain
directionalBlur()
directionalBlur(
options):EffectChain
Defined in: attributes/shape/effects/chain.ts:558
Append a motion-blur-style directional (linear) blur, smearing the node's
own content along a single axis (or the backdrop, with { mode: "backdrop" }).
Parameters
options
number | DirectionalBlurOptions
Returns
EffectChain
displace()
displace(
options):EffectChain
Defined in: attributes/shape/effects/chain.ts:1090
Append a displacement map — the content resampled at a position pushed around by a second image, rather than recoloured.
With { mode: 'backdrop' } the displacement runs on what is painted
beneath the node and is clipped to its silhouette, which is refraction:
the scene bends through the shape while the shape's own edges stay sharp.
Parameters
options
Returns
EffectChain
dither()
dither(
options?):EffectChain
Defined in: attributes/shape/effects/chain.ts:841
Append ordered (Bayer) dithering — quantization to levels tones per
channel with the error traded for a retro crosshatch pattern.
Parameters
options?
number | DitherOptions
Returns
EffectChain
duotone()
duotone(
options?):EffectChain
Defined in: attributes/shape/effects/chain.ts:860
Append a duotone / gradient map — the content's luminance remapped onto a
shadows → highlights ramp, discarding its original chroma.
Parameters
options?
number | DuotoneOptions
Returns
EffectChain
edges()
edges(
options?):EffectChain
Defined in: attributes/shape/effects/chain.ts:776
Append edge detection — flat areas go black and boundaries light up with the magnitude of the local gradient.
Parameters
options?
number | EdgesOptions
Returns
EffectChain
godRays()
godRays(
options?):EffectChain
Defined in: attributes/shape/effects/chain.ts:1050
Append god rays — bright areas streamed outward from center and screened
over the source, so light appears to pass whatever occludes it.
Parameters
options?
number | GodRaysOptions
Returns
EffectChain
grain()
grain(
options?):EffectChain
Defined in: attributes/shape/effects/chain.ts:748
Append film grain. Static grain reads as texture rather than film, so pass
{ animated: true } to re-seed it each frame — or tween seed when the
render has to stay deterministic.
Parameters
options?
number | GrainOptions
Returns
EffectChain
grayscale()
grayscale(
options):EffectChain
Defined in: attributes/shape/effects/chain.ts:584
Append a grayscale effect. { mode: "backdrop" } desaturates the backdrop.
Parameters
options
number | GrayscaleOptions
Returns
EffectChain
halftone()
halftone(
options?):EffectChain
Defined in: attributes/shape/effects/chain.ts:823
Append a halftone screen — the newsprint look, where tone becomes the size of a mark on a rotated grid.
Parameters
options?
number | HalftoneOptions
Returns
EffectChain
invert()
invert(
options?):EffectChain
Defined in: attributes/shape/effects/chain.ts:657
Append a colour-invert effect.
Parameters
options?
number | InvertOptions
Returns
EffectChain
kaleidoscope()
kaleidoscope(
options?):EffectChain
Defined in: attributes/shape/effects/chain.ts:1170
Append a kaleidoscope fold. Animating angle sweeps fresh source material
through the sampled wedge while the pattern itself stays locked — which is
not what rotating the node does.
Parameters
options?
number | KaleidoscopeOptions
Returns
EffectChain
magnify()
magnify(
options?):EffectChain
Defined in: attributes/shape/effects/chain.ts:610
Append a magnify 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.
Defaults to { mode: 'backdrop' }; pass mode explicitly to override.
Parameters
options?
number | MagnifyOptions
Returns
EffectChain
motionBlur()
motionBlur(
options?):EffectChain
Defined in: attributes/shape/effects/chain.ts:691
Append velocity-driven motion blur — smears the node's own content along its
actual per-frame motion (a static node stays sharp). Modelled on After
Effects' shutter angle (length) and shutter phase (alignment).
Parameters
options?
number | MotionBlurOptions
Returns
EffectChain
oilPaint()
oilPaint(
options?):EffectChain
Defined in: attributes/shape/effects/chain.ts:1022
Append Kuwahara brushwork — averages within a region but never across an
edge, so flat areas smooth into strokes while boundaries stay crisp.
By some margin the most expensive effect in the set; keep radius small.
Parameters
options?
number | OilPaintOptions
Returns
EffectChain
outline()
outline(
options?):EffectChain
Defined in: attributes/shape/effects/chain.ts:711
Append an outline — a coloured band traced around the node's silhouette,
including alpha silhouettes (text, an image's cutout, a whole subtree) that
a geometry stroke can't follow.
Parameters
options?
number | OutlineOptions
Returns
EffectChain
pixelate()
pixelate(
options):EffectChain
Defined in: attributes/shape/effects/chain.ts:571
Append an After Effects-style Mosaic / pixelate. blocks is the number of
blocks across the node (a count equal to the node's pixel size on that
axis is pristine; lower is coarser), not a pixel block size.
Parameters
options
number | PixelateOptions
Returns
EffectChain
posterize()
posterize(
options?):EffectChain
Defined in: attributes/shape/effects/chain.ts:681
Append an After Effects-style posterize effect — quantizes each colour
channel into levels evenly-spaced bands, flattening gradients into steps.
Parameters
options?
number | PosterizeOptions
Returns
EffectChain
progressiveBlur()
progressiveBlur(
options?):EffectChain
Defined in: attributes/shape/effects/chain.ts:1148
Append a blur whose radius ramps across the node rather than being
uniform. With { mode: 'backdrop' } this is the frosted panel whose blur
fades out instead of ending at a hard edge.
Parameters
options?
number | ProgressiveBlurOptions
Returns
EffectChain
radialBlur()
radialBlur(
options?):EffectChain
Defined in: attributes/shape/effects/chain.ts:805
Append a radial blur — samples smeared along the radius ('zoom', the
default) or the tangent ('spin') about center, leaving the centre sharp.
Parameters
options?
number | RadialBlurOptions
Returns
EffectChain
rgbShift()
rgbShift(
options?):EffectChain
Defined in: attributes/shape/effects/chain.ts:903
Append a per-channel RGB offset — the digital cousin of EffectChain.chromaticAberration, where each plane goes where you point it instead of following a lens model.
Parameters
options?
number | RgbShiftOptions
Returns
EffectChain
scanlines()
scanlines(
options?):EffectChain
Defined in: attributes/shape/effects/chain.ts:921
Append CRT scanlines. Animate offset past spacing to roll the bands;
the pattern wraps, so a linear tween loops seamlessly.
Parameters
options?
number | ScanlinesOptions
Returns
EffectChain
scatter()
scatter(
options?):EffectChain
Defined in: attributes/shape/effects/chain.ts:669
Append a scatter effect — randomly jitters the node's own pixels, smearing its content like After Effects' Scatter.
Parameters
options?
number | ScatterOptions
Returns
EffectChain
sharpen()
sharpen(
options?):EffectChain
Defined in: attributes/shape/effects/chain.ts:764
Append an unsharp-mask sharpen — local contrast boosted at radius scale.
Parameters
options?
number | SharpenOptions
Returns
EffectChain
sksl()
sksl(
options):EffectChain
Defined in: attributes/shape/effects/chain.ts:1071
Append a custom SkSL shader. mode picks the layer it runs on — a
foreground overlay blended with blendMode, or a backdrop shader that
resamples uniform shader u_backdrop.
Parameters
options
Returns
EffectChain
streak()
streak(
options?):EffectChain
Defined in: attributes/shape/effects/chain.ts:1032
Append an anamorphic streak — a bright pass smeared along one axis and screened back on. EffectChain.bloom spreads light in every direction; this spreads it in one.
Parameters
options?
number | StreakOptions
Returns
EffectChain
texture()
texture(
options):EffectChain
Defined in: attributes/shape/effects/chain.ts:1003
Append an image overlay — paper grain, canvas weave, fabric. The image is
yours: drop it in the project's public/ folder and name it the way an
image fill would.
A missing or not-yet-loaded image makes the effect a no-op, so a wrong path costs you the texture and nothing else.
Parameters
options
Returns
EffectChain
threshold()
threshold(
options?):EffectChain
Defined in: attributes/shape/effects/chain.ts:793
Append a luminance threshold — a two-tone stencil cut at level, with
smoothness widening the cut into a ramp.
Parameters
options?
number | ThresholdOptions
Returns
EffectChain
toJSON()
toJSON():
SceneEffect[]
Defined in: attributes/shape/effects/chain.ts:1210
Serializes to the raw effect array so frameworks that call toJSON get a plain value.
Returns
trails()
trails(
options?):EffectChain
Defined in: attributes/shape/effects/chain.ts:1190
Append motion trails — the node composited with a trail of its own past frames. History-dependent, so it is exact under linear playback and export and refills after a backwards scrub; see TrailsEffect.
Parameters
options?
number | TrailsOptions
Returns
EffectChain
twirl()
twirl(
options?):EffectChain
Defined in: attributes/shape/effects/chain.ts:1130
Append a twirl / swirl vortex — a rotation about center that falls off
with distance, so the middle spins while the rim stays pinned.
Parameters
options?
number | TwirlOptions
Returns
EffectChain
vignette()
vignette(
options?):EffectChain
Defined in: attributes/shape/effects/chain.ts:729
Append a vignette — a soft tint ramping in toward the node's corners. The falloff follows the node's aspect ratio, so a wide node darkens along its short edges the way a lens would.
Parameters
options?
number | VignetteOptions
Returns
EffectChain
vintage()
vintage(
options?):EffectChain
Defined in: attributes/shape/effects/chain.ts:636
Append a vintage / film-look colour grading effect.
Parameters
options?
number | VintageOptions
Returns
EffectChain
wave()
wave(
options?):EffectChain
Defined in: attributes/shape/effects/chain.ts:1110
Append a sine warp. Tween phase over 360 to make the wave travel — it
wraps, so a linear tween loops seamlessly.
Parameters
options?
number | WaveOptions
Returns
EffectChain