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.

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' },
  },
}

Tip

Use textAnchor="middle" when centering text on a known x coordinate — this avoids manually calculating text width offsets.

Tip

Use textbox instead of loose text when generated copy must stay within a known rectangle.

Typing and text reveal

Text remains a normal SVG layer. In a canonical timeline, a reveal effect with strategy: "type" reveals grapheme clusters and shows a cursor until the effect completes.

import { Reveal, Text, Timeline } from '@elucim/dsl/react';

<Text id="status" x={80} y={140} fontSize={28}>Deploying your workspace...</Text>
<Timeline id="intro" duration={60}>
  <Reveal id="status-type" target="status" from={12} duration={48} strategy="type" cursor={{ character: '|' }} />
</Timeline>

Set cursor={false} to reveal text without a cursor. JSON/YAML documents represent the same authored effect in timelines.*.effects.