textmode.js

Appearance

Quick Actions

Open in ChatGPTOpen in ClaudeOpen in Perplexity

textmode.js / layering / LayerBlendMode

Enumeration: LayerBlendMode ​

Numeric blend mode constants for layer compositing.

These values are the source of truth for the wire protocol between the TypeScript layer compositor and the composite.frag GLSL shader. Each value must match the corresponding const int BLEND_* constant in composite.frag.

Use the t.BLEND_* prototype constants for ergonomic access:

ts
layer.blendMode(t.BLEND_ADDITIVE);

Enumeration Members ​

ADDITIVE ​

ts
ADDITIVE: 1;

Add the layer's color channels to the layers below it.

Use this for glowing marks, light trails, sparks, and other effects that should get brighter as animated layers overlap.

Example ​

COLOR_BURN ​

ts
COLOR_BURN: 11;

Darken the layers below by inverting the color dodge relationship.

Use this for dense shadow burns, high-pressure edges, and animated shapes that should compress color toward black.

Example ​

COLOR_DODGE ​

ts
COLOR_DODGE: 10;

Brighten the layers below by dividing around the layer color.

Use this for sharp flares, blooming accents, and small highlights that should push quickly toward white.

Example ​

DARKEN ​

ts
DARKEN: 5;

Keep the darker channel from either the layer or the layers below it.

Use this when animated marks should only carve darker detail into the existing composition.

Example ​

DIFFERENCE ​

ts
DIFFERENCE: 12;

Use the absolute channel difference between the layer and the layers below.

Use this for inversion effects, interference patterns, and animated overlaps that reveal contrast where colors diverge.

Example ​

EXCLUSION ​

ts
EXCLUSION: 13;

Use a lower-contrast difference blend between the layer and the layers below.

Use this for softer inversion, muted interference, and animated overlays that should shift color without the full edge of difference.

Example ​

HARD_LIGHT ​

ts
HARD_LIGHT: 9;

Apply an intense contrast blend driven by the layer's brightness.

Use this for crisp lighting passes, punchy animated masks, and graphic marks that should strongly reshape contrast.

Example ​

LIGHTEN ​

ts
LIGHTEN: 6;

Keep the lighter channel from either the layer or the layers below it.

Use this when animated marks should only add brighter detail to the existing composition.

Example ​

MULTIPLY ​

ts
MULTIPLY: 2;

Multiply the layer's colors with the layers below it.

Use this to darken overlapping areas, tint a base image, or create shadow-like patterns that preserve underlying contrast.

Example ​

NORMAL ​

ts
NORMAL: 0;

Draw the layer with standard source-over alpha compositing.

Use this when a layer should appear exactly as drawn, with opacity controlling how much of the layer covers the layers below it.

Example ​

OVERLAY ​

ts
OVERLAY: 7;

Combine multiply and screen based on the brightness below the layer.

Use this for high-contrast overlays that deepen shadows and brighten highlights in one pass.

Example ​

SCREEN ​

ts
SCREEN: 3;

Screen the layer against the layers below it.

Use this for soft light washes and bright overlays that lift darker areas while preserving highlight detail.

Example ​

SOFT_LIGHT ​

ts
SOFT_LIGHT: 8;

Apply a softer contrast blend based on the layer's brightness.

Use this for gentle illumination, atmospheric color movement, and animated texture that should stay subtle.

Example ​

SUBTRACT ​

ts
SUBTRACT: 4;

Subtract the layer's colors from the layers below it.

Use this for cutout-like animation, eroded trails, and dark pulses that remove brightness from the composite.

Example ​