Visual Effects

Use these methods when masks, clips, filters, backdrop filters, or blend modes should run inside a transform.

const flash = Transform.create()
    .filter("brightness(1.5)")
    .commit({ duration: 120 })
    .filter("none")
    .commit({ duration: 160 });

For image masks that should be preloaded automatically, use Displayable.mask.

effect

Set multiple visual effect fields at once.

Transform.create()
    .effect({
        clipPath: "inset(0 0 30% 0)",
        filter: "brightness(0.8)",
    })
    .commit({ duration: 200 });

effect: TransformDefinitions.VisualEffectTransformProps - Supports mask, clip path, filter, backdrop filter, and blend mode fields.
Returns this

maskImage

Set the raw CSS mask-image value.

Transform.create()
    .maskImage('url("/masks/spotlight.png")')
    .commit({ duration: 300 });

maskImage: TransformDefinitions.Types["maskImage"]
Returns this

clipPath

Set a CSS clip-path value.

Transform.create()
    .clipPath("circle(0% at 50% 50%)")
    .commit({ duration: 0 })
    .clipPath("circle(150% at 50% 50%)")
    .commit({ duration: 500, ease: "easeOut" });

clipPath: TransformDefinitions.Types["clipPath"]
Returns this

filter

Set a CSS filter value.

Transform.create()
    .filter("blur(4px) brightness(0.8)")
    .commit({ duration: 240 });

filter: TransformDefinitions.Types["filter"]
Returns this

backdropFilter

Set a CSS backdrop-filter value.

Transform.create()
    .backdropFilter("blur(12px)")
    .commit({ duration: 200 });

backdropFilter: TransformDefinitions.Types["backdropFilter"]
Returns this

mixBlendMode

Set a CSS mix-blend-mode value.

Transform.create()
    .mixBlendMode("screen")
    .commit({ duration: 0 });

mixBlendMode: TransformDefinitions.Types["mixBlendMode"]
Returns this