Effect

Effect describes effects on a node or an effect style.

type Effect = DropShadowEffect | InnerShadowEffect | BlurEffect | NoiseEffect | TextureEffect | GlassEffect | MotionBlurEffect | ZoomBlurEffect;

DropShadowEffect

interface DropShadowEffect {
  readonly type: "DROP_SHADOW";
  readonly color: RGBA;
  readonly offset: Vector;
  readonly radius: number;
  readonly spread?: number;
  readonly visible: boolean;
  readonly blendMode: BlendMode;
  readonly showShadowBehindNode?: boolean;
  readonly boundVariables?: {
    radius?: VariableAlias;
    color?: VariableAlias;
    spread?: VariableAlias;
    offsetX?: VariableAlias;
    offsetY?: VariableAlias;
  };
}

InnerShadowEffect

interface InnerShadowEffect {
  readonly type: "INNER_SHADOW";
  readonly color: RGBA;
  readonly offset: Vector;
  readonly radius: number;
  readonly spread?: number;
  readonly visible: boolean;
  readonly blendMode: BlendMode;
  readonly boundVariables?: {
    radius?: VariableAlias;
    color?: VariableAlias;
    spread?: VariableAlias;
    offsetX?: VariableAlias;
    offsetY?: VariableAlias;
  };
}

BlurEffect

type BlurEffect = BlurEffectNormal | BlurEffectProgressive;

interface BlurEffectNormal {
  readonly type: "LAYER_BLUR" | "BACKGROUND_BLUR";
  readonly radius: number;
  readonly visible: boolean;
  readonly blurType?: "NORMAL";
  readonly saturation?: number;
  readonly boundVariables?: {
    radius?: VariableAlias;
  };
}

interface BlurEffectProgressive {
  readonly type: "LAYER_BLUR" | "BACKGROUND_BLUR";
  readonly radius: number;
  readonly visible: boolean;
  readonly blurType: "PROGRESSIVE";
  readonly startRadius: number;
  readonly startOffset: Vector;
  readonly endOffset: Vector;
  readonly progressiveStops?: ReadonlyArray<ProgressiveStop>;
  readonly saturation?: number;
  readonly boundVariables?: {
    radius?: VariableAlias;
  };
}

interface ProgressiveStop {
  readonly position: number;
  readonly radius: number;
}

progressiveStops describes the control points for progressive blur. Each stop uses position for its position on the progressive path and radius for the blur radius at that position.

NoiseEffect

type NoiseEffect = NoiseEffectMonotone | NoiseEffectDuotone | NoiseEffectMultitone;

interface NoiseEffectBase {
  readonly type: "NOISE";
  readonly color: RGBA;
  readonly visible: boolean;
  readonly blendMode: BlendMode;
  readonly noiseSize: number;
  readonly density: number;
  readonly boundVariables?: {};
}

interface NoiseEffectMonotone extends NoiseEffectBase {
  readonly noiseType: "MONOTONE";
}

interface NoiseEffectDuotone extends NoiseEffectBase {
  readonly noiseType: "DUOTONE";
  readonly secondaryColor: RGBA;
}

interface NoiseEffectMultitone extends NoiseEffectBase {
  readonly noiseType: "MULTITONE";
  readonly opacity: number;
}

TextureEffect

interface TextureEffect {
  readonly type: "TEXTURE";
  readonly visible: boolean;
  readonly noiseSize: number;
  readonly radius: number;
  readonly clipToShape: boolean;
  readonly boundVariables?: {};
}

GlassEffect

interface GlassEffect {
  readonly type: "GLASS";
  readonly visible: boolean;
  readonly lightIntensity: number;
  readonly lightAngle: number;
  readonly refraction: number;
  readonly depth: number;
  readonly dispersion: number;
  readonly radius: number;
  readonly brightness?: number;
  readonly saturation?: number;
  readonly uniformLight?: boolean;
  readonly isImpact?: boolean;
  readonly samplingRange?: number;
  readonly isConvex?: boolean;
  readonly splay?: number;
  readonly boundVariables?: {};
}

Glass effect fields:

• lightIntensity / lightAngle: Light intensity and light angle.
• refraction / depth / dispersion: Refraction intensity, depth, and dispersion.
• brightness / saturation: Brightness and saturation.
• uniformLight: Whether uniform lighting is used.
• isImpact: Whether the effect is affected by the environment.
• samplingRange: Sampling range used when environment impact is enabled. The range is 0 to 20.
• isConvex: Lens shape. true means convex lens; false means concave lens.
• splay: Surface spread. The range is 0 to 1.

MotionBlurEffect

interface MotionBlurEffect {
  readonly type: "MOTION_BLUR";
  readonly visible: boolean;
  readonly radius?: number;
  readonly motionAngle?: number;
  readonly boundVariables?: {
    radius?: VariableAlias;
  };
}

motionAngle is the motion blur angle.

ZoomBlurEffect

interface ZoomBlurEffect {
  readonly type: "ZOOM_BLUR";
  readonly visible: boolean;
  readonly radius: number;
  readonly center?: Vector;
  readonly boundVariables?: {
    radius?: VariableAlias;
  };
}

center is the zoom blur center point in relative coordinates. When omitted, it defaults to { x: 0.5, y: 0.5 }.