Apple.VibrancyEffect

The Apple.VibrancyEffect extension applies the Apple iOS "vibrancy" effect to an Item.

The vibrancy effect amplifies and adjusts the color of content behind an Apple.BlurLayer item, allowing the content placed within it to become more vivid. The specific appearance of the vibrancy is chosen to contrast against the Apple.BlurLayer style.

If you apply the effect to an item that is not a child of an Apple.BlurLayer, it has no effect.

For non-material styled blur layers, the vibrancy effect is depends on the item's color. If in doubt, for a basic vibrancy look, set the item's color to white.

For material styled blur layers, the vibrancy effect only uses the alpha channel of the item to which it is applied. The specific colors of the item are ignored. This makes it most useful when applied to simple text or mask-image style items.

In the example below, you can tap the panel to switch blur styles, and drag it around to see how the appearance of the vibrant text responds to the content behind it.

Apple.BlurLayer {
    Text {
        text: "Vibrancy"
        with Apple.VibrancyEffect {}
    }
}