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.

Clipping and masking modifiers control which parts of a component are visible. clipped trims content to the component’s rectangular bounds; clipShape clips to any Shape — circle, capsule, rounded rectangle; mask uses an image’s luminance to drive transparency. clipShape clips both visuals and hit testing, so taps land only inside the shape. To change just the hit area without altering visuals, see contentShape. For overall transparency, see opacity.

​
clipped

Clips a component’s content to its bounding frame. 
.clipped()
Clip overflowing content 
Image({ url: "wide-image.jpg" })
    .resizable()
    .frame({ width: 100, height: 100 })
    .clipped()
Clip after aspect ratio fill 
Image({ url: "photo.jpg" })
    .resizable()
    .aspectRatio(1, "fill")
    .frame({ width: 150, height: 150 })
    .clipped()
clipped() clips to the component’s rectangular bounds. For clipping to a custom shape, use clipShape instead.

​
clipShape

Clips a component’s content to a specific shape. 
.clipShape(shape: Shape)
​
shape
Shape
required
The shape to clip to. Common shapes include Circle(), Capsule(), RoundedRectangle(cornerRadius), Rectangle(), and Ellipse().
Clip an image to a circle 
Image({ url: "avatar.jpg" })
    .resizable()
    .frame({ width: 64, height: 64 })
    .clipShape(Circle())
Clip to a rounded rectangle 
Image({ url: "photo.jpg" })
    .resizable()
    .frame({ width: 200, height: 150 })
    .clipShape(RoundedRectangle(16))
Clip to a capsule 
Text("Tag")
    .padding({ leading: 12, trailing: 12, top: 6, bottom: 6 })
    .background(Color("blue"))
    .foregroundStyle(Color("white"))
    .clipShape(Capsule())
clipShape clips both the visual content and the hit-testing area. To change only the hit-testing shape without clipping visuals, use contentShape.

​
mask

Masks the component using an image, controlling which areas are visible. 
.mask(image: Image): Component
​
image
Image
required
The image used as a mask. White areas show the underlying content, black areas hide it. Gray values produce partial transparency.
Masking with an image 
Image({ url: "photo.jpg" })
    .resizable()
    .frame({ width: 200, height: 200 })
    .mask(
        Image({ url: "mask.png" })
            .resizable()
    )
Gradient fade using a shape mask 
Text("Fading text that trails off at the bottom")
    .frame({ maxWidth: 200 })
    .mask(
        LinearGradient({
            colors: ["black", "clear"],
            startPoint: "top",
            endPoint: "bottom"
        })
    )
The mask image’s luminance determines visibility: white (or light) areas show the content, black (or dark) areas hide it. On web, this is implemented using CSS mask-image.

​
See also

  • contentShape — change the hit-testing shape without clipping visuals
  • cornerRadius — round the corners of a component
  • opacity — control overall transparency
  • overlay — layer a component on top