Text Nodes

Text

Text renders a string with a single consistent style. Like all shape nodes, it supports fills, strokes, and shadows.

<Text
  text="Hello, world!"
  fontSize={48}
  fontFamily="Inter"
  fontWeight={700}
  fill="white"
  align={0}
/>

Props

Prop	Type	Default	Description
text	string	''	Text content
fontSize	number | 'autofit'	16	Font size in pixels, or 'autofit'
fontFamily	string	'Roboto'	Font name
fontWeight	number	400	Weight 100–900
letterSpacing	number	0	Extra spacing between characters
lineHeight	number	1.2	Line height multiplier
align	number	0	-1 left · 0 center · 1 right
wrap	boolean	false	Enable word wrapping
minFontSize	number	12	Minimum font size for autofit

Methods

Method	Signature	Description
append	*append(text, duration, easing?)	Animate adding text to the end
prepend	*prepend(text, duration, easing?)	Animate adding text to the start

Size defaults

Condition	width default	height default
Normal	'hug'	'hug'
fontSize: 'autofit' or wrap: true	'fill'	'fill'

---

RichText

RichText renders mixed-style text. Style is defined as a tree of TextSpan objects — children inherit and can override the parent's style.

<RichText
  fontSize={36}
  fill="white"
  spans={[
    { text: 'Hello ' },
    { text: 'world', fill: '#4f80ff', fontWeight: 700 },
    { text: '!', fontSize: 56, fill: '#e84393' },
  ]}
/>

Props

Prop	Type	Default	Description
spans	TextSpan | TextSpan[]	[]	Span tree
fontSize	number	16	Default font size
fontFamily	string	'Roboto'	Default font family
fontWeight	number	400	Default font weight
letterSpacing	number	0	Default letter spacing
lineHeight	number	1.2	Line height multiplier
align	number	0	-1 left · 0 center · 1 right

TextSpan interface

interface TextSpan {
  text?: string;
  fontFamily?: string;
  fontSize?: number;
  fontWeight?: number;
  letterSpacing?: number;
  fill?: FillProp | FillProp[];
  stroke?: StrokeProp | StrokeProp[];
  children?: TextSpan[];  // Nested spans that inherit this span's styles
}

Defaults

RichText defaults to width: 'hug', height: 'hug'.

---

Draw-on animation

Both Text and RichText respect the start and end props inherited from ShapeNode. Animate end from 0 to 1 to draw text character by character along its outline:

const label = createRef<Text>();
this.add(<Text ref={label} text="Motion" fontSize={80} fontWeight={900} fill="white" end={0} />);

yield* label().to({ end: 1 }, 1.2);