Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt

Use this file to discover all available pages before exploring further.

These modifiers apply image-style filters to a component and its descendants. blur softens content with a Gaussian blur. saturation, brightness, contrast, grayscale, and colorInvert adjust the color values of the rendered output. blendMode changes how the component composites with content drawn behind it — useful for overlays, tinting, and text that adapts to its background.

​
blur

Applies a Gaussian blur effect to a component. 
.blur(radius: number)
​
radius
number
required
The blur radius in points. Higher values produce a more blurred result. A value of 0 produces no blur.
Basic blur 
Image({ url: "background.jpg" })
    .resizable()
    .blur(10)
Blur behind text for readability 
ZStack([
    Image({ url: "photo.jpg" })
        .resizable()
        .blur(20),
    Text("Overlay Text")
        .foregroundStyle(Color("white"))
        .font("title")
])

​
saturation

Adjusts the color saturation of a component. 
.saturation(amount: number): Component
​
amount
number
required
The saturation multiplier. 0 produces grayscale, 1 is the original color, and values greater than 1 oversaturate.
Desaturate to grayscale 
Image({ url: "photo.jpg" })
    .frame({ width: 200, height: 200 })
    .saturation(0)
Half saturation 
Image({ url: "photo.jpg" })
    .frame({ width: 200, height: 200 })
    .saturation(0.5)
Oversaturated 
Image({ url: "photo.jpg" })
    .frame({ width: 200, height: 200 })
    .saturation(2)

​
brightness

Adjusts the brightness of a component. 
.brightness(amount: number)
​
amount
number
required
The brightness adjustment, from -1 (completely dark) to 1 (completely bright). A value of 0 leaves brightness unchanged.
Brighten an image 
Image({ url: "photo.jpg" })
    .resizable()
    .brightness(0.2)
Darken a background 
Image({ url: "background.jpg" })
    .resizable()
    .brightness(-0.3)

​
contrast

Adjusts the contrast of a component. 
.contrast(amount: number)
​
amount
number
required
The contrast adjustment. 0 produces flat gray, 1 is the original contrast, and values greater than 1 increase contrast.
Increase contrast 
Image({ url: "photo.jpg" })
    .resizable()
    .contrast(1.5)
Reduce contrast 
Image({ url: "photo.jpg" })
    .resizable()
    .contrast(0.5)

​
grayscale

Applies a grayscale filter to the component. 
.grayscale(amount?: number): Component
​
amount
number
default:"1"
The intensity of the grayscale effect, from 0 (full color) to 1 (fully desaturated).
Fully desaturated 
Image({ url: "photo.jpg" })
    .resizable()
    .frame({ width: 200, height: 200 })
    .grayscale()
Partial grayscale 
Image({ url: "photo.jpg" })
    .resizable()
    .frame({ width: 200, height: 200 })
    .grayscale(0.5)
Conditional grayscale 
const body = () => {
    const [disabled, setDisabled] = useState(false)

    return Image({ url: "avatar.jpg" })
        .resizable()
        .frame({ width: 64, height: 64 })
        .grayscale(disabled ? 1 : 0)
}

​
colorInvert

Inverts all colors in a component. 
.colorInvert()
Invert an image 
Image({ url: "photo.jpg" })
    .resizable()
    .colorInvert()
Invert a color swatch 
Color("blue")
    .frame({ width: 100, height: 100 })
    .colorInvert()

​
blendMode

Sets the blend mode for compositing a component with content behind it. 
.blendMode(mode: BlendMode)
​
mode
BlendMode
required
The blend mode to use when compositing. See BlendMode.
Multiply blend 
Image({ url: "overlay.png" })
    .resizable()
    .blendMode("multiply")
Screen blend for lightening 
Color("blue")
    .frame({ width: 100, height: 100 })
    .blendMode("screen")
Overlay blend on text 
Text("Blended")
    .font("largeTitle")
    .foregroundStyle(Color("red"))
    .blendMode("overlay")

​
See also