Introducing v3 — a new editor, faster engine, and more.

See what's new

Documentation

Documentation Components

Text

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

Props

textstring
Default:Hello World
The text to display (single line)
fontFamilystring
Default:Inter
Google Fonts family name
fontWeightnumber
Default:400
Font weight (only weights published for the family render true; others are synthesized)
italicboolean
Default:false
Italic style
textTransform"none" | "uppercase" | "lowercase" | "capitalize"
Default:none
Case transformation applied to the text
fontSizenumber
Default:0.07
Font size as a fraction of canvas height
letterSpacingnumber
Default:0
Letter spacing in em units
lineHeightnumber
Default:1.2
Line height as a multiple of font size (multi-line text)
textAlign"left" | "center" | "right"
Default:center
Horizontal alignment of lines within the text block
widthnumber
Default:0
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.
colorstring
Default:#ffffff
Text color
originstring
Default:center
Reference edge the center position is measured from (center default). Lets you pin the text relative to a corner or the canvas centre.
center{x: number, y: number}
Default:{"x":0.5,"y":0.5}
Center position of the text
rotationnumber
Default:0
Rotation in degrees

Usage

<Shader>
  <Text
    color="#ffffff"
  />
</Shader>
Previous
Teardrop
Next
ThinFilm