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 visually transform a component without changing its layout frame — surrounding components keep their original space. scaleEffect resizes uniformly or per-axis, rotationEffect rotates by a degree value around an anchor point, and transformEffect applies an arbitrary 2D affine matrix when you need scale, shear, and translate together. For simple position changes that don’t affect layout, see offset.

​
scaleEffect

Scales a component uniformly or along individual axes. 
.scaleEffect(scale: number): Component
.scaleEffect(props: { x?: number; y?: number; anchor?: UnitPoint }): Component
​
scale
number
A uniform scale factor applied to both axes. 1 is the original size, 0.5 is half size, 2 is double size.
​
props
object
Scaling doesn’t affect the component’s layout frame. The component’s original space is preserved, and the scaled content may overlap neighboring components. Uniform scale 
Text("Small")
    .scaleEffect(0.5)
Per-axis scale 
Rectangle()
    .frame({ width: 100, height: 100 })
    .foregroundStyle(Color("blue"))
    .scaleEffect({ x: 1.5, y: 0.75 })
Scale from a corner 
Text("Grow")
    .scaleEffect({ x: 2, y: 2, anchor: "topLeading" })
Interactive scale 
const body = () => {
    const [enlarged, setEnlarged] = useState(false)
    return Image({ systemName: "star.fill" })
        .font("largeTitle")
        .scaleEffect(enlarged ? 1.5 : 1)
        .onTapGesture(() => setEnlarged(!enlarged))
}

​
rotationEffect

Rotates a component by the specified angle. 
.rotationEffect(degrees: number): Component
.rotationEffect(props: { degrees: number; anchor?: UnitPoint }): Component
​
degrees
number
required
The rotation angle in degrees. Positive values rotate clockwise.
​
anchor
UnitPoint
The point to rotate around. Defaults to "center". See UnitPoint.
Simple rotation 
Text("Tilted")
    .rotationEffect(15)
45-degree rotation 
Rectangle()
    .frame({ width: 50, height: 50 })
    .foregroundStyle(Color("blue"))
    .rotationEffect(45)
Custom anchor point Rotate around the top-leading corner instead of the center. 
Text("Rotated")
    .rotationEffect({ degrees: 30, anchor: "topLeading" })
Animated rotation 
const body = () => {
    const [angle, setAngle] = useState(0)
    return VStack([
        Image({ systemName: "arrow.up" })
            .font("largeTitle")
            .rotationEffect(angle),
        Button("Rotate", () => setAngle(angle + 90))
    ])
}

​
transformEffect

Applies a 2D affine transform matrix to a component. 
.transformEffect(matrix: {
    a: number; b: number;
    c: number; d: number;
    tx: number; ty: number;
}): Component
​
matrix
object
required
A 2D affine transform matrix.
The transform matrix is applied as a standard 2D affine transformation: [a b tx; c d ty; 0 0 1]. For simple scale, rotation, or offset operations, prefer scaleEffect, rotationEffect, or offset for clarity. The transform doesn’t affect the component’s layout frame. Identity transform (no change) 
Text("Normal")
    .transformEffect({ a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 })
Scale 2x 
Text("Big")
    .transformEffect({ a: 2, b: 0, c: 0, d: 2, tx: 0, ty: 0 })
Skew (shear) 
Rectangle()
    .frame({ width: 100, height: 50 })
    .foregroundStyle(Color("blue"))
    .transformEffect({ a: 1, b: 0, c: 0.3, d: 1, tx: 0, ty: 0 })
Translate 
Text("Moved")
    .transformEffect({ a: 1, b: 0, c: 0, d: 1, tx: 50, ty: -20 })

​
See also

  • offset — shift a component visually without affecting layout
  • UnitPoint — anchor values for scaleEffect and rotationEffect
  • animation — animate transform changes