Text

The <Text> primitive places a text label at a given position. Control font size, weight, alignment, and color to add labels, titles, annotations, and axis markers to your scenes.

0.00s / 3.97s · F0

Props

Prop	Type	Default	Description
`x`	`number`	`0`	X coordinate of the text anchor point
`y`	`number`	`0`	Y coordinate of the text baseline
`content`	`string` (children)	`''`	The text to display
`fill`	`string`	`'currentColor'`	Text color
`fontSize`	`number`	`16`	Font size in pixels
`fontFamily`	`string`	`'sans-serif'`	Font family
`fontWeight`	`string \| number`	`'normal'`	Font weight (e.g. `'bold'`, `600`)
`textAnchor`	`'start' \| 'middle' \| 'end'`	`'start'`	Horizontal alignment relative to `x`
`opacity`	`number`	`1`	Opacity from 0 to 1

Code Example

elements: {
  title: {
    id: 'title',
    type: 'text',
    role: 'title',
    props: { type: 'text', x: 250, y: 80, content: 'Hello Elucim', fill: '$title', fontSize: 32, textAnchor: 'middle', fontWeight: 'bold' },
  },
  subtitle: {
    id: 'subtitle',
    type: 'text',
    role: 'caption',
    props: { type: 'text', x: 250, y: 140, content: 'Animate concepts. Illuminate understanding.', fill: '$muted', fontSize: 16, textAnchor: 'middle' },
  },
}