Blending & Masking

Beyond stacking and nesting, you have precise control over how components combine and interact. Blend modes determine how layers mix together, while masks let you selectively show or hide portions of your effects.

Blend Modes

Every component has a blendMode prop that controls how it composites with the layers below it. By default, components use normal blending (standard alpha compositing), but you have 20 different blend modes to choose from.

Available blend modes:

• Basic: normal
• Darkening: multiply, darken, colorBurn, linearBurn
• Lightening: screen, lighten, colorDodge, linearDodge
• Contrast: overlay, softLight, hardLight
• Difference: difference, exclusion
• Color: hue, saturation, color, luminosity
• Color Space Blending: normal-oklab, normal-oklch

Combining Blend Modes

Use different blend modes on multiple layers to create complex interactions:

Opacity

Control layer transparency with the opacity prop. Values range from 0 (fully transparent) to 1 (fully opaque):

Opacity works with all blend modes. It multiplies the component's alpha channel before blending, giving you fine-grained control over layer strength.

Visibility

Every component has a visible prop that defaults to true. Setting it to false completely removes the component from the composition, as if it wasn't there at all:

<Circle visible={false} />

This is different from opacity={0}, which still processes the component but makes it transparent. Use visible={false} when you want a component to exist in the tree (perhaps as a mask source) but not appear in the final output.

Masking

Masks let you selectively reveal portions of a component based on another component's pixels. Give one component an id property (string) and then set maskSource to that ID on another component to use it as a mask.

Masks typically have visible={false} so they don't appear in the final output—they only control visibility of other components:

Note that layer order doesn't matter for masking, you can render the mask on top or below of the layer that's using it. Most of the time this won't matter anyway, as you'll likely have the mask layer set to visible={false}.

Mask Types

Control how the mask is interpreted with the maskType prop:

• alpha: Uses the mask's alpha channel (default)
• alphaInverted: Uses the inverted alpha channel
• luminance: Uses the mask's brightness
• luminanceInverted: Uses the inverted brightness