Text

Text with any Google font — multi-line with wrapping, alignment and line height — rendered crisp via a glyph texture

Props

  • text

    The text to display (single line)

    Type
    string
    Default
    Hello World

  • fontFamily

    Google Fonts family name

    Type
    string
    Default
    Inter

  • fontWeight

    Font weight (only weights published for the family render true; others are synthesized)

    Type
    number
    Default
    400

  • italic

    Italic style

    Type
    boolean
    Default
    false

  • textTransform

    Case transformation applied to the text

    Type
    "none" | "uppercase" | "lowercase" | "capitalize"
    Default
    none

  • fontSize

    Font size as a fraction of canvas height

    Type
    number
    Default
    0.07

  • letterSpacing

    Letter spacing in em units

    Type
    number
    Default
    0

  • lineHeight

    Line height as a multiple of font size (multi-line text)

    Type
    number
    Default
    1.2

  • textAlign

    Horizontal alignment of lines within the text block

    Type
    "left" | "center" | "right"
    Default
    center

  • width

    Wrap width — text wraps to fit; 0 = auto (hug contents, single line per explicit break). Edited via the Typography panel's Auto/Fixed width toggle and the side drag handles, not a slider.

    Type
    number
    Default
    0

  • color

    Text color

    Type
    string
    Default
    #ffffff

  • origin

    Reference edge the center position is measured from (center default). Lets you pin the text relative to a corner or the canvas centre.

    Type
    string
    Default
    center

  • center

    Center position of the text

    Type
    {x: number, y: number}
    Default
    {"x":0.5,"y":0.5}

  • rotation

    Rotation in degrees

    Type
    number
    Default
    0

Usage

<Shader>
  <Text
    color="#ffffff"
  />
</Shader>