Skip to main content

Interface: SkSLEffect

Defined in: attributes/shape/effects/implementations/sksl.ts:25

Custom SkSL effect. Two modes:

  • 'backdrop': The shader receives uniform shader u_backdrop (a snapshot of the canvas content beneath the node). Use this for magnification, distortion, ripple, etc. Works identically to the built-in zoom/bulge effects — the result replaces the backdrop within the node's silhouette clip.

  • 'layer': The shader is applied as an overlay/modifier on the node's own layer via ImageFilter.MakeShader. The shader generates a colour from uniforms/position and is Screen-blended onto the layer. Useful for procedural overlays (noise, gradients, glows). Use blendMode to change how the shader composites onto the layer content.

Properties

blendMode?

optional blendMode?: string

Defined in: attributes/shape/effects/implementations/sksl.ts:40

Blend mode used when mode === 'layer'. Defaults to 'screen' so the generated shader overlay composites additively onto the layer.

Any CSS blend-mode name that CanvasKit supports is valid (e.g. 'srcOver', 'multiply', 'screen', 'overlay').


mode

mode: "layer" | "backdrop"

Defined in: attributes/shape/effects/implementations/sksl.ts:32

How the effect is applied.


shader

shader: string

Defined in: attributes/shape/effects/implementations/sksl.ts:28

SkSL shader source code.


type

type: "sksl"

Defined in: attributes/shape/effects/implementations/sksl.ts:26


uniforms

uniforms: SkSLUniform[]

Defined in: attributes/shape/effects/implementations/sksl.ts:30

Uniform values passed to the shader in declaration order. Values lerp component-wise.