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

See what's new

Documentation

Documentation Components

Text

Single-line text with any Google font, 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
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