Mix

The mix layout overlays multiple pieces of content on top of each other. The first component is the bottom layer, and each following component is stacked above it. You can specify opacity and blend mode for each layer to create interesting effects.

mix:
  - image: placeholders/example-program.webp
    _mix:
      opacity: 0.6
  - generator: test-pattern
    _mix:
      mode: difference

The same layout can also be written with an explicit components array:

mix:
  components:
    - image: placeholders/example-program.webp
      _mix:
        opacity: 0.6
    - generator: test-pattern
      _mix:
        mode: difference

Properties

components required since TVS 6.0.0

Type: content engine[]

The component layers to mix together. The mix value can be this array directly, or an object with a components array. The first component is the bottom layer, subsequent components are layered in the order they are listed, and the last component appears on top. Each component can be any content engine, including another layout.

Layer Properties

Tip

The following properties can be specified in the _mix section of any layer.

_mix.mode

Type: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity | plus-darker | plus-lighter

The blend mode to use for this layer. These values map to CSS mix-blend-mode values. Defaults to normal.

---

_mix.opacity

Type: number

The opacity of the layer, ranging from 0.0 (fully transparent) to 1.0 (fully opaque). The default value is 1.0.