Skip to main content
type UnitPoint =
  | { x: number; y: number }
  | "zero"
  | "center"
  | "top"
  | "bottom"
  | "leading"
  | "trailing"
  | "topLeading"
  | "topTrailing"
  | "bottomLeading"
  | "bottomTrailing";

​
Values

​
Custom Coordinates

​
{ x: number; y: number }
object
A custom point with x and y values between 0 and 1, where:
  • x: 0 is the leading edge, x: 1 is the trailing edge
  • y: 0 is the top edge, y: 1 is the bottom edge
Example: { x: 0.5, y: 0.5 } represents the center point

​
Predefined Points

​
zero
string
The top-leading corner. Equivalent to { x: 0, y: 0 }.
​
center
string
The center point. Equivalent to { x: 0.5, y: 0.5 }.

​
Edge Centers

​
top
string
The center of the top edge. Equivalent to { x: 0.5, y: 0 }.
​
bottom
string
The center of the bottom edge. Equivalent to { x: 0.5, y: 1 }.
​
leading
string
The center of the leading edge. Equivalent to { x: 0, y: 0.5 }.
​
trailing
string
The center of the trailing edge. Equivalent to { x: 1, y: 0.5 }.

​
Corners

​
topLeading
string
The top-leading corner. Equivalent to { x: 0, y: 0 }.
​
topTrailing
string
The top-trailing corner. Equivalent to { x: 1, y: 0 }.
​
bottomLeading
string
The bottom-leading corner. Equivalent to { x: 0, y: 1 }.
​
bottomTrailing
string
The bottom-trailing corner. Equivalent to { x: 1, y: 1 }.

​
Usage

// Gradient from top to bottom
LinearGradient({
  colors: ["red", "blue"],
  startPoint: "top",
  endPoint: "bottom"
})

// Custom gradient angle
LinearGradient({
  colors: ["red", "blue"],
  startPoint: { x: 0, y: 0 },
  endPoint: { x: 1, y: 1 }
})

// Scale from center
Rectangle()
  .scaleEffect({ x: 2, y: 2, anchor: "center" })

// Rotate around bottom-trailing corner
Rectangle()
  .rotationEffect({ degrees: 45, anchor: "bottomTrailing" })

​
Notes

UnitPoint uses a normalized coordinate system (0 to 1) that is independent of the actual view size. This makes it ideal for:
  • Gradient start and end points
  • Scale and rotation anchors
  • Alignment references