Mix

The mix layout allows you to overlay one piece of content on top of another. “A” is in the background and “B” is in the foreground. You can specify opacity and mix mode for each layer to create interesting effects.

mix:
  a:
    opacity: 0.6
    image: placeholders/example-program.webp
  b:
    mixMode: difference
    generator: test-pattern

Properties

a required

Type: content engine

The content to display in the left section of the screen. This can be any engine, including another layout.

---

b required

Type: content engine

The content to display in the right section of the screen. This can be any engine, including another layout.

Layer Properties

Tip

The following properties can be specified for both layer A and layer B.

mixMode

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 with each layer. Accepts any valid CSS mix-blend-mode value.

---

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.